Xaml中的按鈕位置

Question

我想用Xaml或後面的代碼在屏幕底部定位一個按鈕。這就是我想實現：

這裏是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> 

和後面的代碼：`

// 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;` 

我試圖用相對和絕對定位的各種事情但因爲我對Xamarin是新手，所以我比其他任何事情都陷入混亂。 我在某處使用了AbsoluteLayout，但似乎只有硬編碼的x和y座標有效，但它需要比不同設備更具動態性。

任何幫助，將不勝感激。

Answer 1

你可以用Grid來做到這一點。我們可以定義4行（從索引'0'開始）。 最後一行（索引3）可以設置爲佔用所有剩餘空間，以便按鈕可以放置在VerticalOptions至結束保持卡住底部。

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

我建議你以選擇適合每種情況最好的一個閱讀佈局。 https://developer.xamarin.com/guides/xamarin-forms/user-interface/controls/layouts/

Answer 2

有幾個選項。

其中之一是您使用StackLayout環繞您的​​其他視圖並將VerticalOptions設置爲FillAndExpands。這會將按鈕推到底部。

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