Xamarin表单 - 制作按钮出现在页面底部

Question

我正在玩一个Xamarin表单试图让一个按钮出现在页面底部.这是我的xaml ......

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:control="clr-namespace:RMG.InView.Device.Shared;assembly=RMG.InView.Device"
             x:Class="RMG.InView.Device.Shared.PinCodeControlDemoPage">
  <StackLayout>
    <Label Text="Enter A Code" VerticalOptions="Center" HorizontalOptions="Center" />
    <Button Text="Reveal Code" x:Name="RevealCode" Clicked="RevealCode_OnClicked" VerticalOptions="End" ></Button>
  </StackLayout>
</ContentPage>

我将VerticalOptions设置为End,但按钮出现在屏幕中间.

如何使按钮粘在屏幕底部？

Answer 1

有一个Grid很简单就是这样做:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:shared_forms" x:Class="shared_forms.shared_formsPage">
    <Grid>
        <Label Text="Enter A Code" VerticalOptions="Center" HorizontalOptions="Center" />
        <Button Text="Reveal Code" x:Name="RevealCode" HorizontalOptions="CenterAndExpand" VerticalOptions="End" />
    </Grid>
</ContentPage>

用StackLayout:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:shared_forms" x:Class="shared_forms.shared_formsPage">
    <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
        <StackLayout Orientation="Horizontal" VerticalOptions="Start">
            <!-- top controls -->
            <Label Text="Enter A Code" VerticalOptions="Center" HorizontalOptions="CenterAndExpand" />
        </StackLayout>
        <StackLayout VerticalOptions="CenterAndExpand">
            <!-- middle controls -->
        </StackLayout>
        <StackLayout Orientation="Horizontal" VerticalOptions="End">
            <!-- bottom controls -->
            <Button Text="Reveal Code" x:Name="RevealCode" HorizontalOptions="CenterAndExpand" />
        </StackLayout>
    </StackLayout>
</ContentPage>

结果: