Xamarin ListView列颜色交替时BoxView上方出现白线如何解决

问题原因 #

你看到的多余白线是Xamarin.Forms布局控件的默认间距导致的，有两处核心原因：

1. StackLayout默认的子控件间距为6，你放在内部的分隔线BoxView和下方Grid之间的默认间距就会露出底层的白色背景，看起来像多余白线
2. Grid默认的列间距为6，后续如果发现列之间也有细白线也是这个原因
   此外部分平台ListView自带分隔线、ViewCell自带内边距也可能加重这个问题。

解决方法 #

按以下步骤修改你的XAML代码即可：

1. 给StackLayout添加属性Spacing="0"，清除子控件默认间距
2. 给Grid添加属性ColumnSpacing="0"，清除列之间的默认间距
3. 给ListView添加属性SeparatorVisibility="None"，关闭自带分隔线，避免和你自定义的分隔线叠加
4. 可选：给ViewCell添加属性Padding="0"，清除部分平台默认的单元格内边距

修改后完整代码 #

<ListView x:Name="ListView" 
          ItemTapped="ListView_OnItemTapped" 
          ItemsSource="{Binding FilteredReports, Mode=TwoWay}"
          SeparatorVisibility="None">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell Padding="0">
                <StackLayout Spacing="0">
                    <BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
                    <Grid HorizontalOptions="FillAndExpand" ColumnSpacing="0">
                        <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>

内容的提问来源于stack exchange，提问作者urmat abdykerimov