How to organize this Layout using Xamarin Forms?

Question

How to organize this Layout using Xamarin Forms?

Asked 6 years ago

Viewed 719 times

3

I haven’t been able to organize my layout in my Listview, it gets disorganized, I’ve tried several ways but so far nothing, I would like to have tips/help. I wish I could have the Código at first, Valor in the middle and Hora lance at the end. No Genymotion:

On an Android device:

Note: I am avoiding the StackLayout because it has understood from some sources that it can hinder the end performance of the user.

Follows XAML code:

<!-- Listagem de Lances -->
                <StackLayout>

                    <ListView x:Name="lstLance"  
                              ItemTapped="Lance_OnItemTapped"
                              BackgroundColor="LightGray"
                              HasUnevenRows="True">
                        <!--  HasUnevenRows = Serve para fazer com que o conteúdo digitado não seja cortado -->
                        <ListView.ItemTemplate>
                            <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                            <DataTemplate>
                                <ViewCell>
                                    <Grid Margin="2">

                                        <!-- Colunas -->
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Linhas -->
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="1"/>
                                        </Grid.RowDefinitions>

                                        <!-- Código -->
                                        <Label Grid.Row="0" 
                                               Grid.Column="0" 
                                               Text="Código:"
                                               FontSize="Small"
                                               Margin="0"/>
                                        <Label Grid.Row="0" 
                                               Grid.Column="1"
                                               Text="{Binding ID_LANCE}" 
                                               FontSize="Small"
                                               TextColor="Black"
                                               HorizontalOptions="Start"
                                               Margin="0"/>

                                        <!-- Valor -->
                                        <Label Grid.Row="0" 
                                               Grid.Column="2"
                                               Text="Valor:"
                                               FontSize="Small"
                                               Margin="0"
                                               HorizontalOptions="Center"/>
                                        <Label Grid.Row="0" 
                                               Grid.Column="3"
                                               Text="{Binding VALOR}" 
                                               FontSize="Small"
                                               TextColor="Black"
                                               HorizontalOptions="Start"
                                               Margin="0"/>

                                        <!-- Hora do Lance -->
                                        <Label Grid.Row="0" 
                                               Grid.Column="4"
                                               Text="Hora lance:"
                                               FontSize="Small"
                                               HorizontalOptions="End"
                                               Margin="0"/>
                                        <Label Grid.Row="0" 
                                               Grid.Column="5"
                                               Text="{Binding HR_LANCE}" 
                                               FontSize="Small"
                                               TextColor="Black"
                                               HorizontalOptions="End"
                                               Margin="0"/>

                                        <!-- Repartir conteudo com cor -->
                                        <BoxView Grid.Row="1" 
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="6"
                                                 BackgroundColor="Red"/>

                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>

                </StackLayout>

2 answers

2

When you set the row or column measure of the grid as "Auto", the row/column size will be determined when its contents are allocated, increasing or decreasing according to what is required.

In other words, if you will use content from variable size in the cell and want all items to be aligned, you cannot set that column as "Auto". The latter should only be used if the content size is the same for all items. To fix, either you set the fixed size for the content or a size proportional to the total size of the Grid.

So, in your case, I think it is enough to define the columns that have variable content with proportions of 1/6 of the Grid width, the ones that contain the labels can be "Auto" (just need to adjust the column settings):

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>

And the result will be something like:

This would be the result if you used the same definition you used in the presented code (which is precisely the cause of the problem):

Editing: Adding Sample Source Code

<?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:App1"
             x:Class="App1.MainPage">
    <ContentPage.Resources>
        <ResourceDictionary>
            <x:Array x:Key="itens" Type="{x:Type x:String}">
                <x:String>311</x:String>
                <x:String>021026</x:String>
                <x:String>03248751739</x:String>
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />

        <ListView HasUnevenRows="True"
                  ItemsSource="{StaticResource itens}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Margin="2">
                            <!-- Colunas -->
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>

                            <!-- Linhas -->
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="1"/>
                            </Grid.RowDefinitions>

                            <!-- Código -->
                            <Label Grid.Row="0" 
                               Grid.Column="0" 
                               Text="Código:"
                               FontSize="Small"
                               Margin="0"/>
                            <Label Grid.Row="0" 
                               Grid.Column="1"
                               Text="{Binding Length}" 
                               FontSize="Small"
                               TextColor="Black"
                               HorizontalOptions="Start"
                               Margin="0"/>

                            <!-- Valor -->
                            <Label Grid.Row="0" 
                               Grid.Column="2"
                               Text="Valor:"
                               FontSize="Small"
                               Margin="0"
                               HorizontalOptions="Center"/>
                            <Label Grid.Row="0" 
                               Grid.Column="3"
                               Text="{Binding Length, StringFormat='{}{0:#0.00}'}" 
                               FontSize="Small"
                               TextColor="Black"
                               HorizontalOptions="Start"
                               Margin="0"/>

                            <!-- Hora do Lance -->
                            <Label Grid.Row="0" 
                               Grid.Column="4"
                               Text="Hora lance:"
                               FontSize="Small"
                               HorizontalOptions="End"
                               Margin="0"/>
                            <Label Grid.Row="0" 
                               Grid.Column="5"
                               Text="{Binding ., StringFormat='{}{0:00-00-00}'}" 
                               FontSize="Small"
                               TextColor="Black"
                               HorizontalOptions="End"
                               Margin="0"/>

                            <!-- Repartir conteudo com cor -->
                            <BoxView Grid.Row="1" 
                                 Grid.Column="0"
                                 Grid.ColumnSpan="6"
                                 BackgroundColor="Red"/>

                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

</ContentPage>

I hope it helps.

Did you use Stacklayout to organize them? I understood what you meant, but I put to work without Stacklayout and it is still difficult to organize.

– Deivid Souza

2018/06/20 at 16:17
No. I provide the code exactly like yours. I only changed the bindings pada my data collection. I will share the full code @Deividsouza

– Diego Rafael Souza

2018/06/20 at 16:22
@Deividsouza, I posted the source code of the example I used. you did so and it didn’t work? what results did you get?

– Diego Rafael Souza

2018/06/20 at 17:51
Thanks @Diego

– Deivid Souza

2018/06/21 at 13:02

Browser other questions tagged xamarin xamarin-forms

You are not signed in. Login or sign up in order to post.

by Deivid Souza • **407** points · Answer 1 · 2018-06-20T12:17:23+00:00

I had some returns from other sources and the middle field (the Valor) is always clumsy, so to avoid this especially if the app is installed on a small device I decided that I will use only two columns to be sure about an organized layout.

Of course, if anyone can help by answering how to make the 3 columns well organized, great, it will serve for learning.

Follow how I left it (if anyone is interested in a possible resolution with the 2 columns):

In XAML:

<!-- Listagem de Lances -->
                <StackLayout>

                    <ListView x:Name="lstLance"  
                              BackgroundColor="LightGray"
                              HasUnevenRows="True">
                        <!--  HasUnevenRows = Serve para fazer com que o conteúdo digitado não seja cortado -->
                        <ListView.ItemTemplate>
                            <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
                            <DataTemplate>
                                <ViewCell>

                                    <Grid Margin="2">

                                        <!-- Colunas -->
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Linhas -->
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="1"/>
                                        </Grid.RowDefinitions>

                                        <!-- Código -->
                                        <StackLayout Grid.Row="0" 
                                                     Grid.Column="0" 
                                                     Orientation="Horizontal">
                                            <Label Text="Código:" 
                                                   FontSize="Small" />
                                            <Label Text="{Binding ID_LANCE}" 
                                                   FontSize="Small" 
                                                   TextColor="Black" 
                                                   Margin="0, 0, 0, 0"/>
                                        </StackLayout>

                                        <!-- Valor -->
                                        <StackLayout Grid.Row="1" 
                                                     Grid.Column="0" 
                                                     Orientation="Horizontal">
                                            <Label Text="Valor:   " 
                                                   FontSize="Small" />
                                            <Label Text="{Binding VALOR}" 
                                                   FontSize="Small" 
                                                   TextColor="Black"
                                                   FontAttributes="Bold"
                                                   Margin="0"/>
                                        </StackLayout>

                                        <!-- Hora -->
                                        <StackLayout Grid.Row="0" 
                                                     Grid.Column="2" 
                                                     Orientation="Horizontal" 
                                                     HorizontalOptions="End">
                                            <Label Text="Hora lance:" 
                                                   FontSize="Small" />
                                            <Label Text="{Binding HR_LANCE}"  
                                                   FontSize="Small" 
                                                   TextColor="Black" 
                                                   Margin="0"/>
                                        </StackLayout>

                                        <!-- Repartir conteudo com cor -->
                                        <BoxView Grid.Row="2" 
                                                 Grid.Column="0"
                                                 Grid.ColumnSpan="3"
                                                 BackgroundColor="Red"/> 
                                    </Grid>
                                </ViewCell>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackLayout>