Question

我正在学习Xamarin的布局，并面对以下代码：

<?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:MyApp.Validators"
             x:Class="MyApp.MainPage">
    <StackLayout HorizontalOptions="Fill"  >
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition  ></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid Grid.Row="0" Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" ></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Entry x:Name="Username" Grid.Row="0" Placeholder="Username" PlaceholderColor="Blue">
                    <Entry.Behaviors>
                        <local:UsernameValidatorBehavior></local:UsernameValidatorBehavior>
                    </Entry.Behaviors>
                </Entry>
                <Entry x:Name="Password" Grid.Row="1" Keyboard="Numeric" Placeholder="Password" PlaceholderColor="Blue">
                    <Entry.Behaviors>
                        <local:PasswordValidatorBehavior></local:PasswordValidatorBehavior>
                    </Entry.Behaviors>
                </Entry>
                <Entry x:Name="Email" Grid.Row="2" Placeholder="Email" PlaceholderColor="Blue">
                    <Entry.Behaviors>
                        <local:EmailValidatorBehavior></local:EmailValidatorBehavior>
                    </Entry.Behaviors>
                </Entry>
            </Grid>
            <Grid VerticalOptions="End" Grid.Row="1" Grid.Column="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*"></ColumnDefinition>
                    <ColumnDefinition Width="5*"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <Button x:Name="Submit" Grid.Row="0" Grid.Column="0" Text="Submit" Clicked="OnButtonClicked"></Button>
                <Button x:Name="Cancel" Grid.Row="0" Grid.Column="1" Text="Cancel" Clicked="Cancel_Clicked"></Button>
            </Grid>
        </Grid>
    </StackLayout>
</ContentPage>

我的问题是我尝试使用

<Grid VerticalOptions="End" Grid.Row="1" Grid.Column="0">

使两个按钮位于屏幕底部，但显示在屏幕中间。如何解决这个问题呢？

UPDATE1

我修改了Grid，现在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:local="clr-namespace:MyApp.Validators"
             x:Class="MyApp.MainPage">
<StackLayout HorizontalOptions="Fill"  >
<Grid VerticalOptions="End">
<Grid.RowDefinitions>
<RowDefinition Height="*" ></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Entry x:Name="Username" Grid.Row="0" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:UsernameValidatorBehavior></local:UsernameValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Password" Grid.Row="1" Grid.ColumnSpan="2" Keyboard="Numeric" Placeholder="Password" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:PasswordValidatorBehavior></local:PasswordValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Email" Grid.Row="2" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:EmailValidatorBehavior></local:EmailValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Button x:Name="Submit" Grid.Row="3" Grid.Column="0" VerticalOptions="End" Text="Submit" Clicked="OnButtonClicked"></Button>
<Button x:Name="Cancel" Grid.Row="3" Grid.Column="1" 
VerticalOptions="End" Text="Cancel" Clicked="Cancel_Clicked"></Button>
</Grid>   
</StackLayout>
</ContentPage>

现在只有一个4行2列的网格。我添加了

VerticalOptions="End"放在两个按钮中。

但是按钮仍不在屏幕底部，而且，它甚至变得更糟。

Answer 1

下面的代码将为您正常工作，将VerticalOptions =“ FillAndExpand”添加到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:MyApp.Validators"
             x:Class="MyApp.MainPage">
<StackLayout HorizontalOptions="Fill">
            <Grid VerticalOptions="FillAndExpand">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="7*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Entry x:Name="Username" Grid.Row="0" Grid.ColumnSpan="2" Placeholder="Username" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:UsernameValidatorBehavior></local:UsernameValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Password" Grid.Row="1" Grid.ColumnSpan="2" Keyboard="Numeric" Placeholder="Password" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:PasswordValidatorBehavior></local:PasswordValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Entry x:Name="Email" Grid.Row="2" Grid.ColumnSpan="2" Placeholder="Email" PlaceholderColor="Blue">
<Entry.Behaviors>
<local:EmailValidatorBehavior></local:EmailValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Button x:Name="Submit" Grid.Row="3" Grid.Column="0" VerticalOptions="EndAndExpand" Text="Submit" Clicked="OnButtonClicked"></Button>
<Button x:Name="Cancel" Grid.Row="3" Grid.Column="1" 
VerticalOptions="EndAndExpand" Text="Cancel" Clicked="Cancel_Clicked"></Button>
</Grid>   
</StackLayout>
</ContentPage>

Xamarin布局问题，如何在屏幕底部制作拖曳按钮

1 个答案: