Geek Answers Handbook

Xamarin Forms - a button appears at the bottom of the page

I play with a Xamarin form, trying to get the button that appears 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 to make the button paste the bottom of the screen?

+5
source share
3 answers

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

+11
source

It 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>
+1
source

try this for code:

  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;
0
source

More articles:


All Articles