问题
I am struggling with two things in xamarin forms layout. As shown on the picture i need to make more space for edidor control (highlited as 1) as this will be the place for user's comment. I would like to extend it to the right (max width). Second thing is i need to move buttons to the bottom which i thought i could solve that by settiung VerticalOptions="End" in the <Grid Grid.Row ="4" (higlighted as 2). How can i solve both things up? Below also full xaml code.
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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="MobileAppXamarinForms.Views.Order.OrderHatModifyPage"
Title="{Binding SelectedHatOrder.OrderId, StringFormat='Numer zamówienia: {0}'}">
<ContentPage.Content>
<StackLayout Orientation="Vertical">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row ="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedHatOrder.OrderId, StringFormat='NUMER ZAMÓWIENIA: {0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="2"
FontSize="15"
HorizontalOptions="Start"
Text="KLIENT:"
VerticalOptions="Center" />
<Label
Grid.Column="3"
Padding="5,1,1,1"
FontAttributes="None"
FontSize="16"
HorizontalOptions="FillAndExpand"
Text="{Binding SelectedClient.Value, StringFormat='{0}'}"
TextColor="Gray"
VerticalOptions="Center" />
<Label
Grid.Column="4"
HorizontalOptions="StartAndExpand"
Text="NA DZIEŃ:"
VerticalOptions="Center" />
<DatePicker
Grid.Column="5"
Date="{Binding SelectedTargetDate, Mode=TwoWay}"
Format="dd.MM.yyyy"
HorizontalOptions="StartAndExpand" />
</Grid>
<Grid Grid.Row ="1" Margin="5" HorizontalOptions="FillAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<!--szerokosc, aby zmiescila sie nazwa butli-->
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="KWOTA:"
TextColor="Gray"
VerticalOptions="Center" />
<Entry
Grid.Column="1"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Kwota"
Text="{Binding SelectedPrice, Mode=TwoWay}" />
<Label
Grid.Column="2"
HorizontalOptions="FillAndExpand"
Text=" " />
<Label
Grid.Column="3"
FontSize="15"
HorizontalOptions="Start"
Text="ILOŚĆ:"
VerticalOptions="Center" />
<Entry
Grid.Column="4"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość"
Text="{Binding SelectedAmount, Mode=TwoWay}" />
</Grid>
<Grid Grid.Row ="2" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" VerticalOptions="Start">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Komentarz:"
TextColor="Gray"
VerticalOptions="Center" />
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
</Grid>
</Grid>
<Grid Grid.Row ="3" VerticalOptions="StartAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Typ płatności:"
TextColor="Gray"
VerticalOptions="Center" />
<Picker
Grid.Column="1"
Title="Typ płatności"
FontSize="15"
HorizontalOptions="FillAndExpand"
ItemDisplayBinding="{Binding Value}"
ItemsSource="{Binding PaymentTypes}"
SelectedIndex="{Binding Id}"
SelectedItem="{Binding SelectedPaymentType, Mode=TwoWay}"
VerticalOptions="Center" />
<Label
Grid.Column="2"
Padding="30,1,1,1"
FontAttributes="None"
FontSize="15"
HorizontalOptions="FillAndExpand"
Text="Ilość dni:"
TextColor="Gray"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
VerticalOptions="Center" />
<Entry
Grid.Column="3"
HorizontalOptions="Start"
Keyboard="Numeric"
MaxLength="5"
Placeholder="Ilość dni"
IsVisible="{Binding IsDaysCountVisible, Mode=TwoWay}"
Text="{Binding SelectedDaysCount, Mode=TwoWay}" />
</Grid>
<!-- Buttons section -->
<Grid Grid.Row ="4" VerticalOptions="End">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*" />
<ColumnDefinition Width="50*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
BackgroundColor="DarkMagenta"
Command="{Binding SaveOrderCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Zatwierdz"
TextColor="White"
HorizontalOptions="FillAndExpand" />
<Button
Grid.Column="1"
BackgroundColor="MediumVioletRed"
Command="{Binding ExitCommand}"
FontAttributes="Bold"
FontSize="20"
Text="Anuluj"
TextColor="White"
HorizontalOptions="FillAndExpand" />
</Grid>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
回答1:
So, as @Jason said in the comments, you have to remove the <StackLayout /> because it prevents the Grid to fill the page.
Thus, for your other issue, I tried to reproduce it.
I've found that if you change the HorizontalOptions of your <Editor /> from CenterAndExpand to FillAndExpand this solves the issue (you can also remove the HorizontalOptions altogether).
So, instead of:
<Editor
Grid.Column="1"
HorizontalOptions="CenterAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Try:
<Editor
Grid.Column="1"
HorizontalOptions="FillAndExpand"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
Or:
<Editor Grid.Column="1"
Keyboard="Text"
MaxLength="3000"
Placeholder="Komentarz"
Text="{Binding SelectedComment, Mode=TwoWay}" />
For more about this: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/layout-options
For good measure, you can also remove Keyboard="Text" since Keyboard's default value is already Text 😉
I hope this solved your issue. However, if you've got any concerns with my Answer please let me know 🙂
来源：https://stackoverflow.com/questions/65628394/move-buttons-on-the-bottom-and-give-more-space-for-editor