Schaltfläche Position in Xaml

Question

Ich versuche, eine Schaltfläche am unteren Rand des Bildschirms mit Xaml oder den Code dahinter zu positionieren. Das ist, was ich zu erreichen versuche:

Hier ist die XAML:

<StackLayout> 


      <Label Text="Identification" 
        x:Name="DriverLabel"/> 

      <Image x:Name="VigoLogo"/> 

      <Entry Placeholder="Driver Name" 
        Text="{Binding driverID}"/> 

    <Button Text="Submit"        
      Command="{Binding Submit}" 
      x:Name="SubmitButton" 
      HorizontalOptions="CenterAndExpand" 
      ></Button> 

</StackLayout> 

und der Code hinter: `

// Styling and resources 
      // ************************* 
      // Whole page ino 
      BackgroundColor = Color.White; 
      // ID Label at top of screen styles 
      DriverLabel.BackgroundColor = Color.LightBlue; 
      DriverLabel.HorizontalTextAlignment = TextAlignment.Center; 
      DriverLabel.VerticalTextAlignment = TextAlignment.Center; 
      DriverLabel.FontSize = 20; 
      DriverLabel.HeightRequest = 80; 
      DriverLabel.TextColor = Color.Black; 

      //VigoLogo Information 
      VigoLogo.Source = "Resources/vigo_sign.png"; 


      // Submit button 
      SubmitButton.BackgroundColor = Color.LightBlue; 
      SubmitButton.VerticalOptions = LayoutOptions.End;` 

ich verschiedene Dinge mit relativen und absoluten Positionierung versucht haben, Aber weil ich neu in Xamarin bin, bin ich mehr als alles andere in Schwierigkeiten. Ich habe irgendwo mit AbsoluteLayout, aber es scheint, dass nur harte Codierung x und y-Koordinaten funktioniert, aber es muss dynamischer sein als das für verschiedene Geräte.

Jede Hilfe wäre willkommen.

Answer 1

Sie können dies mit einem Raster tun. Wir können 4 Zeilen definieren (beginnend mit dem Index '0'). Die letzte Zeile (Index 3) kann so eingestellt werden, dass der gesamte verbleibende Platz belegt wird, sodass die Schaltfläche mit VerticalOptions bis End auf dem Boden bleiben kann.

<Grid> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 

      <Label Text="Identification" Grid.Row="0" 
        x:Name="DriverLabel"/> 

      <Image x:Name="VigoLogo" Grid.Row="1"/> 

      <Entry Placeholder="Driver Name" Grid.Row="2" 
        Text="{Binding driverID}"/> 

    <Button Text="Submit" Grid.Row="3"        
      Command="{Binding Submit}" 
      x:Name="SubmitButton" 
      HorizontalOptions="FillAndExpand" VerticalOptions="End" 
      ></Button> 

</Grid> 

Ich schlage vor, Sie Layouts lesen, um die besten für jede Situation auszuwählen.

Answer 2

Es gibt ein paar Optionen.

Eine davon ist die Verwendung einer StackLayout Umhüllung Ihrer anderen Ansichten und Einstellung der VerticalOptions auf FillAndExpands. Dies wird den Knopf nach unten drücken.

<StackLayout> 
    <StackLayout VerticalOptions="FillAndExpand"> 

      <Label Text="Identification" 
        x:Name="DriverLabel"/> 

      <Image x:Name="VigoLogo" /> 

      <Entry Placeholder="Driver Name" 
        Text="{Binding driverID}"/> 

    </StackLayout> 

    <Button Text="Submit"        
      Command="{Binding Submit}" 
      x:Name="SubmitButton" 
      HorizontalOptions="CenterAndExpand" /> 

</StackLayout>