Xamarin Forms XAML Layout Fragen

Question

Ich habe eine Frage Jungs. Ich bin neu zu Xaml und, ich versuche, die 4 Tasten, die ich aus meinem XAML-Code erstellt habe, mit den Etiketten, die ich aus meinem XAML-Code erstellt habe, zu machen. Nun, mein erstes Bild ("Bild von meinem XAML-Code"), das ist das Bild, das ich habe, wenn ich meinen XAML-Code ausführe. aber wenn ich versuche, alles in einem stack-layout zu halten, stimmt es nicht mit meinem finish-image überein, in dem (was versucht wird, ein image zu erreichen) irgendwelche zeiger in die richtige richtung in dem was falsch machen?

<!-- 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 legt seine Kinder in der Reihenfolge vertikal oder horizontal an. Da Sie keine Ausrichtung angegeben haben, wird Vertical impliziert, was genau Sie sehen. Wie der Name schon sagt, sind die Kinder übereinander gestapelt.

Die kurze Antwort ist, dass Sie ein komplexeres Layout als ein einzelnes StackLayout benötigen. Sie könnten Ihr Ziel wahrscheinlich mit verschachtelten StackLayouts erreichen, aber das wäre schwierig und weniger effizient als andere Optionen.

Zumindest für den oberen Teil des Designs, ist ein Gitter wahrscheinlich die beste Wahl, so etwas wie:

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

Sie können nicht alle den den VerticalOptions und HorizontalOptions mit dem Gitter müssen, aber dies sollte sei ein anständiger Ort um anzufangen.