Xamarin Forms XAML Layout問題

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與電網的，但這應該是一個體面的地方開始。