Windows平台MAUI中CollectionView多选模式下自定义选择器或隐藏方法

一、隐藏默认选择图标及占位区域 #

当CollectionView设置SelectionMode="Multiple"时，Windows平台会默认显示复选框及占位区域。要隐藏它，需要自定义CollectionViewItem的控件模板，移除默认的复选框元素：

在ContentPage.Resources中添加如下样式：

<Style TargetType="CollectionViewItem">
    <Setter Property="ControlTemplate">
        <ControlTemplate>
            <!-- 自定义容器模板，仅保留内容展示区域，移除默认复选框 -->
            <ContentView>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <!-- 保留你已实现的选中背景色逻辑 -->
                                    <Setter Property="BackgroundColor" Value="LightSkyBlue" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <!-- 绑定到原内容 -->
                <ContentPresenter />
            </ContentView>
        </ControlTemplate>
    </Setter>
</Style>

这个样式会替换默认的CollectionViewItem模板，只保留内容展示部分，彻底移除默认复选框的占位和图标。

二、配置自定义选择器 #

如果需要替换成自定义的选择控件（比如自定义图标、CheckBox等），可以按以下步骤操作：

1. 为数据模型添加选中状态属性 #

在你的Student模型中新增IsSelected属性（需实现INotifyPropertyChanged）：

public class Student : INotifyPropertyChanged
{
    public string Name { get; set; }
    
    private bool _isSelected;
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改ItemTemplate添加自定义选择控件 #

在原有的Grid中添加自定义选择控件，绑定到IsSelected属性：

<CollectionView x:Name="StagiaireCollectionView"
                SelectionMode="Multiple"
                ItemsSource="{Binding students}" >
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <!-- 新增选择控件列 -->
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/> <!-- 自定义选择控件列 -->
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <!-- 自定义选择控件，这里用CheckBox示例，你可以替换成图标等 -->
                <CheckBox Grid.Column="0"
                          IsChecked="{Binding IsSelected, Mode=TwoWay}"
                          VerticalOptions="Center"
                          Margin="5"/>

                <!-- 原有的内容控件 -->
                <Label Grid.Column="1"
                       Text="{Binding Name}" 
                       FontSize="12" 
                       VerticalOptions="Center"/>
                <!-- 剩下的ImageButton控件依次修改Column索引为2、3、4 -->
                <ImageButton Grid.Column="2" x:Name="ImgLicence" VerticalOptions="Center" BackgroundColor="Transparent">
                    <ImageButton.Source>
                        <FontImageSource
                            FontFamily="IconsInscriptionStagiaires"
                            Glyph="&#xE800;"
                            Size="10"
                            Color="Gray"/>
                    </ImageButton.Source>
                </ImageButton>
                <ImageButton Grid.Column="3" x:Name="ImgOnedrive" BackgroundColor="Transparent">
                    <ImageButton.Source>
                        <FontImageSource
                                    FontFamily="IconsInscriptionStagiaires"
                                    Glyph="&#xE800;"
                                    Size="20"
                                    Color="Gray"/>
                    </ImageButton.Source>
                </ImageButton>
                <ImageButton Grid.Column="4" x:Name="ImgFolder" BackgroundColor="Transparent">
                    <ImageButton.Source>
                        <FontImageSource
                            FontFamily="IconsInscriptionStagiaires"
                            Glyph="&#xE800;"
                            Size="20"
                            Color="Gray"/>
                    </ImageButton.Source>
                </ImageButton>
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

3. 维护选中集合（可选） #

如果你需要获取所有选中项，可以在ViewModel中直接筛选students集合中IsSelected=true的项：

public IEnumerable<Student> SelectedStudents => students.Where(s => s.IsSelected);

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