Xamarin Forms XAML Layout Ques - xaml

Question

I have a question guys. Im kind new to xaml and, I'm trying to make the 4 buttons i created from my xaml code line up with the labels i have created from my xaml code. now, my first image("Image from my xaml code") thats the image i have when running my xaml code. however, when i try to keep it all into one stack layout it doesn't match up as in my finish image in which ("im trying to achieve image") any pointers in the right direction in what im doing wrong?
<!-- Page -->
<StackLayout
x:Name = "CustomerStackLayout">
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start" >
</Label>
<Label
Text = "John Doe"
VerticalOptions ="Start">
</Label>
<Label
Text = "(832)-555-4518"
VerticalOptions ="Start">
</Label>
<Label
Text = "5612 StillWater Dr"
VerticalOptions ="Start">
</Label>
<Label
Text = "Houston, TX 77079"
VerticalOptions ="Start">
</Label>
<Label
Text = "Pickup Time:Mon July 10, 4:30PM"
TextColor = "Yellow"
HorizontalOptions = "Center">
</Label>
<!--AbsoluteLayout.LayoutBounds = "0.975,0.01,100,25-->
<Button
x:Name = "callButton"
Text ="call"
HorizontalOptions = "End"
VerticalOptions = "End"
Clicked = "Handle_Clicked"
BackgroundColor = "Red">
</Button>
<!--AbsoluteLayout.LayoutBounds = "0.975,0.06,100,25"-->
<Button
Text = "text"
x:Name = "textButton"
Clicked = "textButton_Clicked"
BackgroundColor = "Red"
HorizontalOptions = "End"/>
<Button
Text = "map"
HorizontalOptions = "End"
VerticalOptions = "Start"
x:Name = "mapButton"
Clicked="MapsButton_Clicked"
BackgroundColor = "Red"/>
<!--AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"-->
<AbsoluteLayout>
<Button
x:Name = "ImOnItButton"
Text ="Im on it"
Clicked = "ImOnIt_Clicked"
IsVisible = "true"
BackgroundColor = "Red"
AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"/>
<!--AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"-->
<Button
x:Name = "ArrivedButton"
Text = "Arrived"
Clicked ="arrivedButton_Clicked"
IsVisible = "false"
BackgroundColor = "Red"
AbsoluteLayout.LayoutBounds = ".7,0.9,104,34"
/>
</AbsoluteLayout>
</StackLayout>

Answer 1

StackLayout will lay out its children in order, either vertically or horizontally. Since you didn't specify an Orientation, Vertical is implied, which is exactly what you are seeing. As the name implies, the children are stacked on top of each other.
The short answer is that you will need a more complex layout than a single StackLayout. You could probably achieve your goal with nested StackLayouts, but that would be tough, and less efficient than other options.
At least for the top portion of your design, a Grid is probably your best bet, something like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
HorizontalOptions = "Center"
Grid.Row = "0"
Grid.Column = "0"
Grid.ColumnSpan = "2">
</Label>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start"
Grid.Row="1"
Grid.Column="0">
</Label>
<Button
x:Name = "callButton"
Text ="call"
HorizontalOptions = "End"
VerticalOptions = "End"
Clicked = "Handle_Clicked"
BackgroundColor = "Red"
Grid.Row="1"
Grid.Column="">
</Button>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start"
Grid.Row="2"
Grid.Column="0">
</Label>
<Button
Text = "text"
x:Name = "textButton"
Clicked = "textButton_Clicked"
BackgroundColor = "Red"
HorizontalOptions = "End"
Grid.Row="2"
Grid.Column="1">
</Button>
<Label
x:Name = "ThisLabel"
Text = "Order #2102"
VerticalOptions= "Start"
Grid.Row="3"
Grid.Column="0">
</Label>
<Button
Text = "map"
HorizontalOptions = "End"
VerticalOptions = "Start"
x:Name = "mapButton"
Clicked="MapsButton_Clicked"
BackgroundColor = "Red"
Grid.Row="3"
Grid.Column="1">
</Button>
</Grid>
You may not need all of the the VerticalOptions and HorizontalOptions with the Grid, but this should be a decent place to start.