How to organize this Layout using Xamarin Forms?

Asked

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:

inserir a descrição da imagem aqui

On an Android device:

inserir a descrição da imagem aqui

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>
xamarin xamarin-forms

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:

Exemplo de resultado correto

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):

Exemplo de resultado errado

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.

  • No. I provide the code exactly like yours. I only changed the bindings pada my data collection. I will share the full code @Deividsouza

  • @Deividsouza, I posted the source code of the example I used. you did so and it didn’t work? what results did you get?

  • Thanks @Diego

0

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):

inserir a descrição da imagem aqui

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>

Browser other questions tagged xamarin xamarin-forms

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