3

Não tenho conseguido organizar meu layout no meu ListView, fica desorganizado, já tentei utilizar várias formas mas até agora nada, gostaria de ter dicas/ajuda. Gostaria de poder ter o Código no início, Valor no meio e Hora lance no final. No Genymotion:

inserir a descrição da imagem aqui

Num aparelho Android:

inserir a descrição da imagem aqui

Obs: Estou evitando o StackLayout pelo fato de ter entendido de algumas fontes que ele pode atrapalhar no desempenho final do usuário.

Segue código XAML:

<!-- 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 Respostas 2

2

Quando você define a medida de linha ou coluna da grid como "Auto", o tamanho da linha/coluna será determinado quando o seu conteúdo for alocado, aumentando ou diminuindo de acordo com o que for necessário.

Em outras palavras, se você vai usar um conteúdo de tamanho variável na célula e quer que todos os itens fiquem alinhados, você não pode definir essa coluna como "Auto". Este último só deve ser usado se o tamanho dos conteúdo for o mesmo para todos os itens. Para corrigir, ou você define o tamanho fixo para o conteúdo ou um tamanho proporcional ao tamanho total da Grid.

Então, no seu caso, acho que é suficiente definir as colunas que possuem conteúdo variádo com proporções de 1/6 da largura da Grid, as que contém os rótulos podem ser "Auto" (só precisa ajustar as definições de colunas):

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

E o resultado será algo como:

Exemplo de resultado correto

Esse seria o resultado se você usasse a mesma definilão que usou no código apresentado (que é justamente a causa do problema):

Exemplo de resultado errado

Edição: Adicionando código fonte do exemplo

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

Espero que ajude.

4
  • Chegou a utilizar StackLayout pra organizá-los? Entendi o que quis dizer, mas coloquei pra funcionar sem StackLayout e ainda está difícil de organizar. 20/06/2018 às 16:17
  • Não. Presto do código esta igualzinho ao seu. So mudei os bindings pada minha coleção de dados. Vou compartilhar o código completo @DeividSouza 20/06/2018 às 16:22
  • @DeividSouza, postei o código fonte do exemplo que usei. você fez assim e não funcionou? que resultados você obteve? 20/06/2018 às 17:51
  • Agradeço @Diego 21/06/2018 às 13:02
0

Tive alguns retornos de outras fontes e o campo do meio (o Valor) fica sempre desajeitado, então para evitar isso principalmente se o app for instalado num aparelho pequeno decidi que utilizarei apenas duas colunas para ter certeza quanto a um layout organizado.

Claro, se alguém puder ajudar respondendo como deixar as 3 colunas bem organizadas, ótimo, servirá para aprendizado.

Segue como deixei (caso alguém se interesse numa possível resolução com as 2 colunas):

inserir a descrição da imagem aqui

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .