MAUI CollectionView预选中项背景颜色修改问题

问题分析 #

你的代码已实现CollectionView项的预选，但选中项背景色不生效，核心原因有两点：

1. 页面未实现INotifyPropertyChanged接口，SelectedItem的属性变更通知无法正确传递到UI
2. VisualStateManager的作用目标错误，且Windows平台默认选中样式可能覆盖自定义设置

解决方案 #

1. 实现INotifyPropertyChanged接口 #

修改页面代码，将SelectedItem改为带变更通知的属性，并让页面实现接口：

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace iOSCollectionViewPreselectedTEST;

public partial class DetailsPage : ContentPage, INotifyPropertyChanged
{
    public ObservableCollection<string> Items { get; } = new ObservableCollection<string>(new List<string> {
        "Employee1", "Employee2", "Employee3", "Employee4"
    });

    private string _selectedItem;
    public string SelectedItem
    {
        get => _selectedItem;
        set
        {
            if (_selectedItem != value)
            {
                _selectedItem = value;
                OnPropertyChanged();
            }
        }
    }

    public DetailsPage()
    {
        InitializeComponent();
        BindingContext = this;
        SelectedItem = Items[1];
    }

    private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var preSelectedItem = e.CurrentSelection;
    }

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

2. 调整VisualStateManager的应用方式 #

修改XAML，将VisualStateManager作用在项的根容器（ContentView）上，确保选中状态正确触发：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="iOSCollectionViewPreselectedTEST.NewPage1"
             Title="DetailsPage">
    <CollectionView ItemSizingStrategy="MeasureAllItems" x:Name="collView"
                    ItemsSource="{Binding Items}"
                    SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                    SelectionMode="Single" 
                    SelectionChanged="CollectionView_SelectionChanged">
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="2"/>
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <ContentView>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Transparent" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Blue" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <VerticalStackLayout Padding="8">
                        <Label Text="{Binding .}" VerticalOptions="Center" />
                    </VerticalStackLayout>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

3. Windows平台额外适配（可选） #

若上述修改后仍不生效，可通过自定义项容器样式覆盖Windows默认选中背景：

在CollectionView内添加资源样式：

<CollectionView.Resources>
    <Style TargetType="ContentView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup Name="CommonStates">
                    <VisualState Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Transparent" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Blue" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</CollectionView.Resources>

关键说明 #

• 用ContentView作为项的根容器，是因为MAUI CollectionView的默认项容器为ContentView，直接在其上设置VisualState能确保选中状态被正确触发
• 实现INotifyPropertyChanged是为了让SelectedItem的变更及时同步到UI，保证预选项被正确标记
• Windows平台默认会给选中项添加灰色背景，自定义VisualState可完全覆盖该默认样式

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