Xamarin Forms XAML Layout Ques

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>

DavidS DavidS · Accepted Answer · 2016-07-28T04:30:30

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.

Xamarin Forms XAML Layout Ques

1 Answers