1

Estou aprendendo a utilizar Grid e tenho três dúvidas no meu projeto que mesmo nos testes ou ao acompanhar tutoriais não consegui bons resultados na prática já que sempre vi sendo feito testes com BoxView:

  1. Qual a melhor forma de dar espaço entre os componentes? Porque se utilizo HorizontalOption basicamente eu teria apenas 3 controles (Start, Center e End), e isso é ruim pra mim já que normalmente utilizo mais; mas se utilizo Margin não iria ser diferente o espaçamento dependendo da quantia de megapixel na tela do aparelho testado, podendo assim ficar bom no meu aparelho mas num outro deformado?
  2. Quero utilizar um BoxView na Grid para separar as linhas do ListView e obter uma melhor visualização, mas não estou conseguindo e deixarei o código para, se possível, me ajudarem.
  3. Ao visualizarem o código estará nítido que utilizo uma Label Data: que nem aparece no ListView, gostaria de saber o motivo.

Imagem de como está esse meu projeto:

ListView

XAML:

<StackLayout>
    <ListView x:Name="lstCompra"  
              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>

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

                        <!-- Linhas -->
                        <Grid.RowDefinitions>
                            <RowDefinition Height="15"/>
                            <RowDefinition Height="3"/>
                        </Grid.RowDefinitions>

                        <!-- Código -->
                        <Label Grid.Row="0" 
                               Grid.Column="0"
                               Text="Código:"
                               FontSize="Small"
                               BackgroundColor="Yellow"
                               Margin="2, 0, 0, 0"/>
                        <Label Grid.Row="0" 
                               Grid.Column="0"
                               Text="{Binding ID_SOLCOMPRA}" 
                               FontSize="Small"
                               BackgroundColor="Green"
                               TextColor="Black"
                               Margin="50, 0, 0, 0"/>

                        <!-- Data -->
                        <Label Grid.Row="0" 
                               Grid.Column="1"
                               Text="Data:"
                               FontSize="Small"
                               BackgroundColor="LightCyan"
                               HorizontalOptions="EndAndExpand"/>
                        <Label Grid.Row="0" 
                               Grid.Column="1"
                               Text="{Binding DT_CADASTRO}" 
                               FontSize="Small"
                               BackgroundColor="Fuchsia"
                               TextColor="Black"
                               HorizontalOptions="End"/>

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

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

1 Resposta 1

2

A documentação do Xamarin oferece uma explicação geral sobre esse layout, então vamos direto às suas perguntas:

  1. Qual a melhor forma de dar espaço entre os componentes? Porque se utilizo HorizontalOption basicamente eu teria apenas 3 controles (Start, Center e End), e isso é ruim pra mim já que normalmente utilizo mais; mas se utilizo Margin não iria ser diferente o espaçamento dependendo da quantia de megapixel na tela do aparelho testado, podendo assim ficar bom no meu aparelho mas num outro deformado?

Somente fazendo um adendo: eu sou contra discursos que tentam imprimir opinião sobre o que é ou não 'melhor'. Posso sugerir algumas formas, mas o adjetivo que atribuiria a elas seria 'possíveis' (não necessariamente melhor). Podem existir outras. Podem ou não ser melhores, não pretendo entrar nesse mérito. Acho que cada situação determinará o que seria 'melhor' para você naquele caso.

O HorizontalOptions não determina uma localização fixa. Ele determina um comportamento de posicionamento de um elemento dentro de um container.

No entanto, outros fatores ajudam a determinar o posicionamento final do elemento. Por exemplo, no seu caso, cada célula do Grid faz o papel de container, porém esse layout permite sobreposição, e isso faz com que HorizontalOptions="Start" em mais de um elemento (supondo que tenham o mesmo tamanho) faça com um fique sobre o outro. Daí a necessidade de se usar artifícios como Margin para esse caso.

Um outra alternativa é você usar dentro da célula um StackLayout com Orientation="Horizontal", que fará com que os elementos sejam posicionados sequencialmente (o StackLayout não poermite sobreposição).

Em geral, quando eu uso Grid eu sempre opto por definir uma grade (quantidade de linhas e colunas) onde cada elemento individual ocupe sozinho uma célula e outros que precisam sobrepor em determinados momentos são definidos a ocupar mas de uma linha/coluna.

  1. Quero utilizar um BoxView na Grid para separar as linhas do ListView e obter uma melhor visualização, mas não estou conseguindo e deixarei o código para, se possível, me ajudarem.

De acordo com a sua definição do BoxView (Grid.Row="1", Grid.Column="0" e Grid.ColumnSpan="1"), ele vai estar na primeira coluna, segunda linha, e ocupar somente 1 coluna de largura (é o comportamento padrão).

Acho que sua intenção nesse caso era que ele ocupasse duas colunas (Grid.ColumnSpan="2").

  1. Ao visualizarem o código estará nítido que utilizo uma Label Data: que nem aparece no ListView, gostaria de saber o motivo.

Nessa outra resposta eu mencionei que o Grid permite sobreposição de conteúdo. Este é exatamente o motivo, o label que tem o texto "Data:" foi sobreposto pelo outro que está definido na mesma posição.

Com tudo isso respondido, uma possível solução para definir o seu layout seria essa:

<ViewCell>
    <Grid>

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

        <!-- Linhas -->
        <Grid.RowDefinitions>
            <RowDefinition Height="15"/>
            <RowDefinition Height="3"/>
        </Grid.RowDefinitions>

        <!-- Código -->
        <StackLayout Grid.Row="0" 
                     Grid.Column="0"
                     Padding="2"
                     Orientation="Horizontal">
            <Label Text="Código:"
                   FontSize="Small"
                   BackgroundColor="Yellow"/>
            <Label Text="{Binding ID_SOLCOMPRA}" 
                   FontSize="Small"
                   BackgroundColor="Green"
                   TextColor="Black"/>
        </StackLayout>

        <!-- Data -->
        <StackLayout Grid.Row="0" 
                     Grid.Column="1"
                     Padding="2"
                     Orientation="Horizontal">
            <Label Text="Data:"
                   FontSize="Small"
                   BackgroundColor="LightCyan"/>
            <Label Text="{Binding DT_CADASTRO}" 
                   FontSize="Small"
                   BackgroundColor="Fuchsia"
                   TextColor="Black"
                   HorizontalOptions="EndAndExpand"
                   HorizontalTextAlignment="End"/>
        </StackLayout>

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

    </Grid>
</ViewCell>

Espero que isso ajude.

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 .