Xamarin Forms iOS端ListView头部下方出现粗边框如何解决？

问题描述 #

请查看下图：

相关代码如下：

//PopUp.Xaml
            <ListView.Header>
                <Frame>
                    <Grid>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30*" />
                            <ColumnDefinition Width="25*" />
                            <ColumnDefinition Width="25*" />
                            <ColumnDefinition Width="20*" />
                        </Grid.ColumnDefinitions>

                        <Label Grid.Column="0" Grid.Row="0" Text="Product"
                       HorizontalOptions="Center"/>
                    <Label Grid.Column="1" Grid.Row="0" 
                   Text="Quantity"
                       HorizontalOptions="Center"/>
                    <Label Grid.Column="2" Grid.Row="0" 
                   Text="Price"
                       HorizontalOptions="Center"/>
                    <Label Grid.Column="3" Grid.Row="0" 
                   Text="Sub"
                       HorizontalOptions="Center"/>

                        <BoxView Grid.Row="1"
                         Grid.ColumnSpan="4"
                         HeightRequest="1"
                         BackgroundColor="LightGray"/>


                    </Grid>
                </Frame>
            </ListView.Header>

            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid Padding="10" RowSpacing="10" ColumnSpacing="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="43*" />
                                <ColumnDefinition Width="8*" />
                                <ColumnDefinition Width="25*" />
                                <ColumnDefinition Width="24*" />
                            </Grid.ColumnDefinitions>
                            <Label Grid.Column="0" Text="{Binding OrderModel_Id}" VerticalOptions="End"/>
                        <Label Grid.Column="1" Grid.Row="0" Text="{Binding User_Name}" VerticalOptions="End"/>
                        <Label Grid.Column="0" Grid.Row="0" HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" Text="{Binding Product_Id, Converter={StaticResource converter}}"/>
                            <Label Grid.Column="1" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding Quantity}"/>
                            <Label Grid.Column="2" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding PriceOf_Item, StringFormat='£{0:0.00}'}"/>
                            <Label Grid.Column="3" Grid.Row="0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" Text="{Binding SubtotalForThis_Item, StringFormat='£{0:0.00}'}"/>
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>


</pages:PopupPage>

在PopupPage中为ListView设置了自定义头部，运行时仅iOS端的ListView弹出页头部下方会出现粗边框，Android端无此现象。请问该问题产生的原因是什么，如何才能移除这个粗边框？

问题原因 #

iOS端的UITableView（Xamarin.Forms/MAUI ListView的iOS原生实现）默认会给Header区域添加自带的分割线效果，同时你Header里使用的Frame控件在iOS端默认自带阴影和边框效果，两个效果叠加就会出现你看到的粗边框。

解决方法 #

按优先级尝试以下修改即可：

1. 给ListView添加iOS平台特定属性，关闭Header自带分隔线
   先在XAML头部引入iOS平台命名空间：

   <!-- Xamarin.Forms 写法 -->
   xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms"
   <!-- MAUI 写法 -->
   xmlns:ios="http://schemas.microsoft.com/dotnet/2021/maui?platform=ios"
   

   再给ListView标签添加对应配置：

   <ListView ...
             ios:ListView.SeparatorStyle="None"
             SeparatorVisibility="None">
   

2. 关闭Header中Frame的默认边框和阴影
   给Header里的Frame添加如下属性：

   <Frame HasShadow="False" BorderColor="Transparent" CornerRadius="0" ...>
   

3. 如果修改后还有残留线条，可以给Frame加负的底部Margin抵消原生分隔线的占位：

   <Frame Margin="0,0,0,-1" ...>
   

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