Xamarin Forms : How to make button appear at the bottom of a page

Question

I am playing with a Xamarin Form trying to get a button to appear at the bottom of the page. Here is my 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>

I have VerticalOptions set to End, but the button appears in the middle of the screen.

How can I make the button stick to the bottom of the screen?

Solution 1

With a Grid is simple just do this:

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

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

Result:

Solution 2

<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 works ;)

Solution 3

This worked for me.

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

Comments

[Mohamad Mahmoud Darwish]

could you please make image more friendly by resize it to more smaller

[James Heffer]

Alternatively you could always create a relative or stack panel, and have a grid inside the panel and set your control to have the last row (grid.row="2") for instance