Grid with spacing and Boxview

Question

I am learning to use Grid and I have three questions in my project that even in tests or when following tutorials did not get good results in practice since I always saw being tested with Boxview:

1. What is the best way to give space between components? Why use HorizontalOption basically I would have only 3 controls (Start, Center and End), and this is bad for me since I usually use more; but if I use Margin it would not be different the spacing depending on the amount of megapixel on the screen of the tested appliance, thus being able to look good in my appliance but in another deformed?
2. I want to use a BoxView on the Grid to separate lines from the ListView and get a better view, but I’m not getting it and I’ll leave the code to, if possible, help me.
3. When viewing the code it will be clear that I use a Label Data: that does not even appear in the ListView, would like to know the reason.

Image of how my project is going:

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>

Answer 1

The Xamarin documentation provides an overview of this layout, so let’s go straight to your questions:

1. What is the best way to give space between components? Because if I use Horizontaloption basically I would only have 3 controls (Start, Center and End), and this is bad for me since I normally use more; but if I use Margin it would not be different the spacing depending on the amount of megapixel on the screen of the tested device, can thus be good in my device but in another deformed?

Just by making an addendum: I am against speeches that try to impress opinion on what is or is not 'best'. I can suggest some forms, but the adjective I would assign to them would be 'possible' (not necessarily better). There may be others. They may or may not be better, I do not intend to enter into this merit. I think every situation will determine what’s best' for you in that case.

The HorizontalOptions does not determine a fixed location. It determines an element’s positioning behavior within a container.

However, other factors help determine the final positioning of the element. For example, in your case, each cell of the Grid does the role of container, but this layout allows overlapping, and this makes it HorizontalOptions="Start" on more than one element (assuming they are the same size) do with one stand on the other. Hence the need to use artifices such as Margin for that case.

Another alternative is you use inside the cell a StackLayout with Orientation="Horizontal", that will cause the elements to be positioned sequentially (the StackLayout no overlap).

In general, when I use Grid i always choose to define a grid (number of rows and columns) where each individual element occupies one cell alone and others that need to overlap at certain times are set to occupy but one row/column.

2. I want to use a Boxview on the Grid to separate the Listview lines and get a better view, but I’m not getting it and I’ll leave the code to, if possible, help me.

According to its definition of BoxView (Grid.Row="1", Grid.Column="0" and Grid.ColumnSpan="1"), it will be in the first column, second row, and occupy only 1 column wide (is the default behavior).

I think your intention in this case was for him to occupy two columns (Grid.ColumnSpan="2").

3. When viewing the code it will be clear that I use a Label Data: that does not even appear in Listview, I would like to know the reason.

In that other answer I mentioned that the Grid allows overlapping of content. This is exactly the reason, the label that has the text "Date:" was superimposed by the other that is defined in the same position.

With all this answered, a possible solution to define your layout would be this:

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

I hope this helps.