XamarinフォームXAMLレイアウトQues

Question

質問があります。私はxamlに新しくて、私はxamlコードから作成した4つのボタンをxamlコードから作成したラベルで作ろうとしています。今、私の最初のイメージ（ "私のxamlコードからのイメージ"）は、私のxamlコードを実行しているイメージです。しかし、私は1つのスタックレイアウトにすべてそれを保持しようとすると、私は間違って何の正しい方向に任意のポインタ（ "私はイメージを達成しようとしている"）私の仕上がりイメージで一致しません？

<!-- 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は、子を縦または横の順に並べます。 Orientationを指定していないので、Verticalが暗示されています。これはまさにあなたが見ているものです。名前が示すように、子供たちはお互いの上に積み重ねられます。

簡単な答えは、単一の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のすべてを必要としないかもしれませんが、これがすべきまともな場所で始めること。