Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
198 views
in Technique[技术] by (71.8m points)

xamarin.forms - Move buttons on the bottom and give more space for editor

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.

enter image description here

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"
  

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...