Home > OS >  Xamarin ListView alternate column color
Xamarin ListView alternate column color

Time:10-18

I need to alternate my ListView columns color so it looks like this.

task

I was searching Google for any help, and found out that i can put BoxView in the same column with my Label and color that BoxView

My result:

Result

As you can see, i have this annoying white line above BoxViews, which i was not able to remove. My question is how do i remove them? i havent set any paddings and margins, have no clue what is problem.

<ListView x:Name="ListView" ItemTapped="ListView_OnItemTapped" ItemsSource="{Binding FilteredReports, Mode=TwoWay}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout>
                    <BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
                    <Grid HorizontalOptions="FillAndExpand">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <BoxView Color="#F7FAFC" Grid.Column="0"/>
                        <Label Grid.Column="0" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding ClientPhone}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                        <Label Grid.Column="1" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding OfficeName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                        <BoxView Color="#F7FAFC" Grid.Column="2"/>
                        <Label Grid.Column="2" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding BranchName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                    </Grid>
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

CodePudding user response:

You are using a StackLayout and by default it has a Spacing property with a value of 6.

You should set it to 0

<ViewCell>
                <StackLayout Spacing = "0" >
                    <BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
                    <Grid HorizontalOptions="FillAndExpand">
                        ....
                </StackLayout>
</ViewCell>

Happy coding!

  • Related