Блог

Главная - Вопросы по программированию - Проблема с макетом Xamarin, как сделать кнопку tow в нижней части экрана

Проблема с макетом Xamarin, как сделать кнопку tow в нижней части экрана

#c# #.net #xamarin

#c# #.net #xamarin

Вопрос:

Я изучаю макет 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

Я изменил сетку, и теперь 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" внутри две кнопки.

Но кнопки по-прежнему не находятся в нижней части экрана, и более того, это даже ухудшается. все еще проблема

Комментарии:

1. У вас есть три строки, индекс строки для кнопок Gird.Row=2 не должен быть Grid.Row=1

2. У вас есть StackLayout, содержащий одну сетку, которая содержит 2 другие сетки. Это действительно сложный макет для простой страницы. Попробуйте заменить все это одной сеткой с 4 строками и двумя столбцами. Элементы управления вводом могут быть первыми тремя строками с colspan = 2, тогда ваши кнопки могут быть 2 cols в последней строке.

3. @Jason Я сделал, но кнопки по-прежнему не находятся в нижней части экрана

4. у вас для их VerticalOptions установлено значение «End»?

5. Избавьтесь от StackLayout

Ответ №1:

Приведенный ниже код будет работать идеально для вас, добавьте VerticalOptions=»FillAndExpand» в сетку и укажите процентную высоту.

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