Xamarin 表单 XAML 布局查询

Question

伙计们，我有一个问题。我对 xaml 很陌生，我正在尝试使我从我的 xaml 代码创建的 4 个按钮与我从我的 xaml 代码创建的标签对齐。现在，我的第一个图像（“来自我的 xaml 代码的图像”）就是我在运行我的 xaml 代码时拥有的图像。但是，当我尝试将其全部保存到一个堆栈布局中时，它与我的完成图像不匹配，其中（“我试图实现图像”）任何指向正确方向的指针指向我做错了什么？

<!-- 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 将按垂直或水平顺序排列其子级。由于您没有指定方向，因此隐含了垂直，这正是您所看到的。顾名思义，孩子们是堆叠在一起的。

简短的回答是，您将需要一个比单个 StackLayout 更复杂的布局。您可能可以使用嵌套的 StackLayouts 实现您的目标，但这会很困难，而且效率低于其他选项。

至少对于您的设计的顶部，网格可能是您最好的选择，例如：

<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>

您可能不需要网格中的所有 VerticalOptions 和 Horizo​​ntalOptions，但这应该是一个不错的起点。