Space and color between ViewCell in a ListView

Navigation
1

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

Followthecode:

    

<ListViewx: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>
    
asked by anonymous 28.05.2018 / 16:42

1 answer

2

The StackLayout has a Spacing 6 dip pattern . It's just that spacing between the items that is appearing gray on your screen: it's the space between your stack containing the data that is paired and the other stack that contains BoxView .

One of the ways to solve is to remove Spacing from 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 on your layout:

You are using multiple% nested% s, sometimes unnecessarily as StackLayout . The more elements you include (primarily speaking of BoxView , which will render this several times), the greater the effect on application performance.

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

    
28.05.2018 / 17:15
Redirect ActionResult flexbox: space-between 2 children starting in the middle and then ending