Grid with Spacing and BoxView

The Xamarin documentation provides a general explanation of this layout , so let's get right to your questions:

  

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 usually use more; but if using Margin would not be different spacing depending on the amount of megapixel on the screen of the tested device, so it could look good on my device but in another deformed?

  

Just making an addition: I am against speeches that attempt to impress opinion on what is or is not 'better'. 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 each situation will determine what would be 'best' for you in that case.

HorizontalOptions does not determine a fixed location. It determines a positioning behavior of an element inside a container.

However, other factors help determine the final positioning of the element. For example, in each case, each cell of Grid acts as a container, but this layout allows overlap , and this causes HorizontalOptions="Start" to more than one element (assuming same size) do with one lay over the other. Hence the need to use artifacts as Margin for this case.

Alternatively, you can use a StackLayout with Orientation="Horizontal" inside the cell, which will cause the elements to position ( StackLayout can not overlap). >

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

  

I want to use a BoxView in the Grid to separate the rows from the ListView and get a better view, but I can not and will leave the code to help me if possible.

  

According to your 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 width (this is the default behavior) .

I think your intention here was for it to occupy two columns ( Grid.ColumnSpan="2" ).

  

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

  

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

With all of 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.