Xamarin Forms - machen Knopf am unteren Rand einer Seite erscheinen

Question

Ich spiele mit einem Xamarin Form versuchen, eine Schaltfläche am unteren Rand der Seite erscheinen. Hier ist meine 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 VerticalOptions auf Ende, aber die Schaltfläche erscheint in der Mitte des Bildschirms.

Wie kann ich den Knopf-Stick an den unteren Rand des Bildschirms zu machen?

Answer 1

Mit einem Grid einfach nur dies tun:

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

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

Ergebnis:

Answer 2

dies hinter für Code versuchen:

 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 3

Das funktionierte für mich.

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