.NET Maui中CollectionView内Frame选中颜色无法修改的问题

问题根源 #

1. 本地属性优先级过高：直接在Frame上设置的BackgroundColor="LightGray"属于本地属性值，优先级高于Style中的VisualState Setter，导致选中状态的颜色无法覆盖默认值。
2. VisualState组错误：CollectionView项的选中状态属于SelectionStates组，而非你使用的CommonStates组，状态组不匹配触发逻辑失效。

修复方案 #

方案一：通过Style统一控制Frame状态

修改ContentPage资源中的Frame样式，将默认背景色移入Style，并使用正确的SelectionStates组：

<ContentPage.Resources>
    <Style TargetType="Frame">
        <!-- 设置默认背景色和边距 -->
        <Setter Property="BackgroundColor" Value="LightGray"/>
        <Setter Property="Margin" Value="0, 5, 0, 5"/>
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <!-- 使用SelectionStates组匹配CollectionView选中状态 -->
                <VisualStateGroup x:Name="SelectionStates">
                    <VisualState x:Name="Unselected"/>
                    <VisualState x:Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="LightSkyBlue"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>
</ContentPage.Resources>

同时移除ItemTemplate中Frame的本地属性设置：

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="m:Teacher">
        <StackLayout>
            <Frame>
                <StackLayout Orientation="Horizontal" Spacing="5">
                    <Label Text="{Binding Firstname}"/>
                    <Label Text="{Binding Lastname}"/>
                </StackLayout>
            </Frame>
        </StackLayout>
    </DataTemplate>
</CollectionView.ItemTemplate>

方案二：在ItemTemplate根元素中直接绑定选中状态

如果需要保留Frame的本地属性，可在ItemTemplate的根布局上设置VisualState，并通过TargetName指定Frame修改其背景色：

<CollectionView.ItemTemplate>
    <DataTemplate x:DataType="m:Teacher">
        <StackLayout>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroupList>
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected">
                            <VisualState.Setters>
                                <!-- 通过TargetName定位到Frame修改属性 -->
                                <Setter TargetName="TeacherFrame" Property="BackgroundColor" Value="LightSkyBlue"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </VisualStateManager.VisualStateGroups>
            <Frame x:Name="TeacherFrame" Margin="0, 5, 0, 5" BackgroundColor="LightGray">
                <StackLayout Orientation="Horizontal" Spacing="5">
                    <Label Text="{Binding Firstname}"/>
                    <Label Text="{Binding Lastname}"/>
                </StackLayout>
            </Frame>
        </StackLayout>
    </DataTemplate>
</CollectionView.ItemTemplate>

关键说明 #

• .NET Maui中属性优先级：本地属性 > Style Setter > VisualState Setter，因此要确保VisualState能生效，需避免在元素上直接设置会被覆盖的属性，或通过TargetName精准修改。
• CollectionView的项选中状态仅会触发SelectionStates组下的Selected状态，必须使用对应组才能正确响应选中事件。

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