Space and color between Viewcell in a Listview

Question

I would like to help because I’m not being able to leave the way I hope, there’s more space between colors. The gray is the background I put in and the yellow is being filled in by Binding. The red line is a BoxView that I want to use to make the breakdown between them. The gray between them should not appear.

Follows the code:

    <ListView x:Name="lstLeilao" 
              ItemTapped="OnTapLance"
              HasUnevenRows="True"
              BackgroundColor="LightGray">
        <ListView.ItemTemplate>
            <!-- DataTemplate  = exibe dados de uma coleção de objetos em um ListView -->
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <StackLayout BackgroundColor="{Binding COR}"
                                     Margin="0">

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Código do Leilão: "
                                       Margin="2, 0, 2, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding ID_LEILAO}"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Data do Início: "
                                       Margin="2, 0, 20, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding DT_INICIO}"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Data do Término: "
                                       Margin="2, 0, 4, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding DT_TERMINO}"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Hora do Início: "
                                       Margin="2, 0, 19, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding HR_INICIO}"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Hora do Término: "
                                       Margin="2, 0, 2, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding HR_TERMINO}"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Produto: "
                                       Margin="2, 0, 56, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding PRODUTO}" 
                                       TextColor="Black"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Quantidade: "
                                       Margin="2, 0, 35, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding QTDE}" 
                                       TextColor="Black"
                                       FontSize="Small"/>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal">
                                <Label Text="Unidade: "
                                       Margin="2, 0, 55, 0"
                                       FontSize="Small"/>
                                <Label Text="{Binding UNIDADE}" 
                                       TextColor="Black"
                                       FontSize="Small"/>
                            </StackLayout>
                        </StackLayout>

                        <StackLayout>
                            <BoxView BackgroundColor="Red" 
                                     HeightRequest="1"
                                     Margin="0"/>
                        </StackLayout>

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

</StackLayout>

Answer 1

The StackLayout has a Spacing standard of 6 Dip. It’s just this spacing between the items that is appearing gray on your screen: it’s the space between your stack that contains the paired data and the other stack that contains the BoxView.

One of the ways to solve it is by removing the Spacing of StackLayout where the items in question are presenting the 'problem'':

<ViewCell>
    <StackLayout Spacing="0">
        <StackLayout BackgroundColor="{Binding COR}"
                     Margin="0">
            <!-- um monte de outros stacks -->
        </StackLayout>

        <StackLayout>
            <BoxView BackgroundColor="Red" 
                     HeightRequest="1"
                     Margin="0"/>
        </StackLayout>

    </StackLayout>
</ViewCell>

Tip about your layout:

You are using several StackLayoutnested, sometimes unnecessarily as is the case with BoxView. The more elements you include (mainly by ListView, that will render this several times), the greater will be the effect on application performance.

I suggest you watch the video and read these tips on performance with Xamarin.Forms, helped me a lot and I believe I can help you too.