.NET MAUI中ListViewItem多余默认内边距如何移除

问题说明 #

MAUI 6.0.400版本中，绑定数据源的ListView控件默认给每个ListViewItem设置了值为(12,0,0,0)的内边距，该属性未在ListView、ViewCell类上作为公开属性暴露，仅能在XAML实时可视化树中查看到，直接在控件标签上赋值Padding无法生效，会出现项内容和ListView边缘存在固定红色露白的现象（ListView背景设为红、子元素背景设为蓝时效果最明显）。

复现代码 #

<ListView ItemsSource="{Binding Items}" Background="Red">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid RowDefinitions="*" ColumnDefinitions="*">
                    <Label Grid.Column="0" Grid.Row="0" BackgroundColor="Blue" HorizontalTextAlignment="Start" HorizontalOptions="Start" Text="Hello World"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

• 复现环境：MAUI 6.0.400、Visual Studio 2022 预览版17.3、MAUI工作负载版本2.0

可行解决方案 #

方案1：全局隐式样式覆盖（推荐，全平台生效，代码量最少） #

直接在App.xaml的全局资源字典中添加针对ListViewItem的隐式样式，覆盖默认的Padding值即可，不需要编写任何平台特定代码：

<Application.Resources>
    <ResourceDictionary>
        <!-- 其他已存在的全局资源放这里 -->
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0"/>
        </Style>
    </ResourceDictionary>
</Application.Resources>

该方案在你当前使用的MAUI版本可直接生效，添加后所有页面的ListView默认左侧12px内边距会被清零，不需要修改单个ListView的代码。

方案2：单控件Handler修改（不影响全局其他ListView） #

如果只需要给特定页面的单个ListView移除内边距，不想影响全局样式，可以通过Handler直接修改各平台对应原生控件的属性：

1. 给目标ListView添加HandlerChanged事件绑定：

<ListView 
    ItemsSource="{Binding Items}" 
    Background="Red"
    HandlerChanged="ListView_HandlerChanged">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid RowDefinitions="*" ColumnDefinitions="*">
                    <Label Grid.Column="0" Grid.Row="0" BackgroundColor="Blue" HorizontalTextAlignment="Start" HorizontalOptions="Start" Text="Hello World"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2. 在页面对应的后置代码中添加事件处理逻辑，分平台修改原生控件边距：

private void ListView_HandlerChanged(object sender, EventArgs e)
{
    if (sender is not ListView listView || listView.Handler?.PlatformView == null) return;
    
#if ANDROID
    var androidList = listView.Handler.PlatformView as AndroidX.RecyclerView.Widget.RecyclerView;
    androidList?.SetPadding(0, 0, 0, 0);
    androidList.ClipToPadding = true;
#elif WINDOWS
    var winList = listView.Handler.PlatformView as Microsoft.UI.Xaml.Controls.ListView;
    if (winList != null)
    {
        winList.ItemContainerStyle = new Microsoft.UI.Xaml.Style(typeof(Microsoft.UI.Xaml.Controls.ListViewItem))
        {
            Setters =
            {
                new Microsoft.UI.Xaml.Setter(Microsoft.UI.Xaml.Controls.ListViewItem.PaddingProperty, new Microsoft.UI.Xaml.Thickness(0))
            }
        };
    }
#elif IOS || MACCATALYST
    var iosList = listView.Handler.PlatformView as UIKit.UITableView;
    if (iosList != null)
    {
        iosList.ContentInset = UIKit.UIEdgeInsets.Zero;
        iosList.SeparatorInset = UIKit.UIEdgeInsets.Zero;
        iosList.LayoutMargins = UIKit.UIEdgeInsets.Zero;
    }
#endif
}

方案3：自定义Item容器模板（兼容性最高，不受版本默认样式变更影响） #

如果需要完全自定义项容器布局，避免后续MAUI版本更新修改默认样式导致边距复现，可以重写ListView的ItemContainerStyle，完全替换默认项模板：

<ListView ItemsSource="{Binding Items}" Background="Red">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <ContentPresenter Content="{TemplateBinding Content}" Margin="0" Padding="0"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
    <!-- 原有ItemTemplate代码不变 -->
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid RowDefinitions="*" ColumnDefinitions="*">
                    <Label Grid.Column="0" Grid.Row="0" BackgroundColor="Blue" HorizontalTextAlignment="Start" HorizontalOptions="Start" Text="Hello World"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

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