如何消除Windows平台.NET MAUI中CollectionView组头与项的间距

问题描述 #

开发.NET MAUI联系人列表时，发现Windows平台下CollectionView的GroupHeaderTemplate与ItemTemplate之间存在额外间距，但Android平台无此问题。常规调整无效，需针对Windows平台做特定处理。

Android端效果：

Windows端效果：

相关代码：

<CollectionView Grid.Row="2"
                ItemsSource="{Binding Contacts}"
                SelectionMode="None"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand"
                VerticalScrollBarVisibility="Always"    
                IsGrouped="True">
    
    <!-- 组头模板 -->
    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Text="{Binding Name}" 
                   FontSize="12" HeightRequest="20"
                   FontFamily="{x:Static constants:FontFamilies.TEXT_BOLD}"
                   BackgroundColor="{StaticResource HeaderGrey}"
                   Padding="20,0,0,4" VerticalTextAlignment="Center"
                   HorizontalOptions="FillAndExpand"/>
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>

    <!-- 列表项模板 -->
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="models:Contact">
            <VerticalStackLayout>
   
                <Label HeightRequest="39"
                       VerticalTextAlignment="Center"
                       Padding="20,0,0,0">

                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="{Binding Firstname}"/>
                            <Span Text=" "/>
                            <Span Text="{Binding Name}"
                                  FontFamily="{x:Static constants:FontFamilies.TEXT_BOLD}"/>
                        </FormattedString>
                    </Label.FormattedText>

                    <Label.GestureRecognizers>
                        <TapGestureRecognizer Tapped="ContactSelected" 
                                              Command="{Binding Source=
                                                            {RelativeSource AncestorType={x:Type local:ContactViewModel}}, 
                                                            Path=DisplayContactCommand}"
                                              CommandParameter="{Binding Id}"/>
                    </Label.GestureRecognizers>
                </Label>

                <BoxView HeightRequest="1" BackgroundColor="{StaticResource SeparatorCellGrey}"/>

            </VerticalStackLayout>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

解决方案 #

方法1：自定义Windows平台渲染器 #

通过自定义渲染器直接修改Windows平台上CollectionView的布局参数：

1. 在Windows项目中添加渲染器类：

using Microsoft.Maui.Controls.Platform;
using Microsoft.Maui.Controls.Platform.Windows;
using Microsoft.UI.Xaml.Controls;

namespace YourAppNamespace.WinUI;

public class CustomCollectionViewRenderer : CollectionViewRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<CollectionView> e)
    {
        base.OnElementChanged(e);
        
        if (Control is ItemsRepeater itemsRepeater)
        {
            if (itemsRepeater.Layout is ItemsStackLayout stackLayout)
            {
                stackLayout.Spacing = 0; // 清除组头与列表项之间的默认间距
            }
        }
    }
}

2. 在MauiProgram.cs中注册渲染器：

builder.ConfigureMauiHandlers(handlers =>
{
#if WINDOWS
    handlers.AddHandler(typeof(CollectionView), typeof(CustomCollectionViewRenderer));
#endif
});

方法2：平台特定负边距调整 #

在XAML中针对Windows平台给组头设置负边距，抵消默认间距：

<CollectionView ...>
    <CollectionView.Resources>
        <!-- Windows平台专属样式 -->
        <OnPlatform x:Key="GroupHeaderMargin" x:TypeArguments="Thickness">
            <On Platform="Windows" Value="0,0,0,-4"/>
            <On Platform="Android" Value="0"/>
        </OnPlatform>
    </CollectionView.Resources>

    <CollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <Label Margin="{StaticResource GroupHeaderMargin}"
                   Text="{Binding Name}" 
                   FontSize="12" HeightRequest="20"
                   FontFamily="{x:Static constants:FontFamilies.TEXT_BOLD}"
                   BackgroundColor="{StaticResource HeaderGrey}"
                   Padding="20,0,0,4" VerticalTextAlignment="Center"
                   HorizontalOptions="FillAndExpand"/>
        </DataTemplate>
    </CollectionView.GroupHeaderTemplate>

    <!-- 原有ItemTemplate代码 -->
</CollectionView>

方法3：使用CommunityToolkit.Maui的AdvancedCollectionView #

微软官方工具包的AdvancedCollectionView对跨平台布局一致性做了优化，可直接替换原生CollectionView：

1. 安装NuGet包：CommunityToolkit.Maui
2. 在XAML中替换控件：

<toolkit:AdvancedCollectionView Grid.Row="2"
                                ItemsSource="{Binding Contacts}"
                                SelectionMode="None"
                                HorizontalOptions="FillAndExpand"
                                VerticalOptions="FillAndExpand"
                                VerticalScrollBarVisibility="Always"    
                                IsGrouped="True">
    <!-- 保留原有GroupHeaderTemplate和ItemTemplate代码 -->
</toolkit:AdvancedCollectionView>

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