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

Question

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

shouldComponentUpdate

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

结果：

Answer 2

这对我有用。

<StackLayout BackgroundColor="#2D3033"> 
                <Button Clicked ="Button_Clicked"
                            Text="Login"  
                            BackgroundColor="#007F00"
                            BorderColor="#004C00"
                            BorderWidth="1"
                            TextColor="white"
                        HorizontalOptions="CenterAndExpand"
                        VerticalOptions="EndAndExpand"
                    />
        </StackLayout>

Answer 3

尝试使用后面的代码：

      Label EnterACodeLabel = new Label { Text = "Enter A code " };
      Button RevealCodeButton= new Button { Text = "Reveal Code" };
      StackLayout RevealButtonStackLayout = new StackLayout
                {
                    VerticalOptions = LayoutOptions.End,
                    Children =
                    {
                        RevealCodeButton,
                           //put all controls want to be on button 
                    }
                };

                StackLayout AllContentExceptRevelCodeButton = new StackLayout
                {
                    Padding = new Thickness(5),
                    Children =
                    {
                       EnterACodeLabel ,
                      //put all controls need to be on the top 
                    }
                };

                StackLayout AllPageContent = new StackLayout
                {
                    VerticalOptions = LayoutOptions.FillAndExpand,
                    HorizontalOptions = LayoutOptions.FillAndExpand,
                    Children =
                    {
                        AllContentExceptRevelCodeButton,
                        RevealButtonStackLayout
                    }
                };

                Content = AllPageContent;

Answer 4

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

        <StackLayout Grid.Row="0">
        </StackLayout>

        <StackLayout Grid.Row="1" VerticalOptions="End">
            <controls:STButton Text="Yeni Görev Ekle" />
        </StackLayout>
   </Grid>
</ContentPage.Content>

％100作品;）