Xamarin Forms XAML 레이아웃 Ques

Question

질문이 있습니다. Im 친절 새로운 xaml 및 4 x 단추에서 내 xaml 코드에서 만든 레이블로 만든 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은 자식을 세로 또는 가로 순서로 배치합니다. Orientation을 지정하지 않았으므로, 수직이 함축되어 있습니다. 이는 정확하게 당신이보고있는 것입니다. 이름에서 알 수 있듯이 아이들은 서로의 위에 쌓여 있습니다.

간단한 대답은 단일 StackLayout보다 복잡한 레이아웃이 필요하다는 것입니다. 중첩 된 StackLayouts을 사용하여 목표를 달성 할 수도 있지만 힘들고 다른 옵션보다 효율적이지는 않습니다.

적어도 당신의 디자인의 맨 부분에 대한, 그리드는 가장 좋은 건, 같은 아마 : 당신은 그리드로하여 VerticalOptions 및 HorizontalOptions을 모두 필요하지 않을 수

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

는, 그러나 이것은해야 시작하기에 알맞은 곳이되어야합니다.