Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

enter image description here

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

like image 729
John Livermore Avatar asked Jun 18 '16 21:06

John Livermore


People also ask

What is Flex layout in Xamarin forms?

The Xamarin. Forms FlexLayout is new in Xamarin. Forms version 3.0. It is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box, so called because it includes many flexible options to arrange children within the layout. FlexLayout is similar to the Xamarin.

How do I add an icon to a button in Xamarin?

In your Xamarin forms project create a folder named CustomControls and create a ContentView xaml file with name MyButton. xaml. Here, we are creating an Icon for our button using Image control and Text using Label control. We are using Frame so that we can provide border radius for our button.

How do I navigate from one page to another in Xamarin?

Go to Solution Explorer-->Your Project-->Portable-->Right click-->Add-->New Item (Ctrl+Shift+A). Now, select Forms XAML page and give the name (MainPage. xaml). In this step, add another one page, whose name is called SecondPage.


3 Answers

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:

enter image description here

like image 159
jzeferino Avatar answered Oct 04 '22 10:10

jzeferino


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

like image 22
Samet ÖZTOPRAK Avatar answered Oct 04 '22 10:10

Samet ÖZTOPRAK


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>
like image 24
James Heffer Avatar answered Oct 04 '22 11:10

James Heffer