.NET Maui中相同代码下VisualStateManager返回不同结果的原因

我正在使用.NET Maui开发页面，页面中有两个使用CollectionView的面板，通过VisualStateManager设置选中项的背景色。两者代码完全一致，仅修改了绑定的数据源，但选中项的颜色却不相同。这是否是一个Bug？

显示效果：左右面板选中项背景色呈现差异

左侧面板代码 #

<!--Left Panel-->
<Grid
    Grid.Row="1"
    Grid.Column="0"
    ColumnDefinitions="2*,*"
    RowDefinitions="*"
    HorizontalOptions="Center"
    Padding="25"
    MaximumHeightRequest="630"
    Margin="10">

    <StackLayout
        Grid.Column="0"
        Grid.Row="0"
        MaximumHeightRequest="520"
        MaximumWidthRequest="600"
        HorizontalOptions="Center"
        VerticalOptions="Start">

        <Frame
            Style="{StaticResource HeaderFrame}">

            <Label
                Style="{StaticResource HeaderLable}"
                Text="Item Defects">
            </Label>
        </Frame>

        <Frame
            VerticalOptions="FillAndExpand"
            BorderColor="Black"
            CornerRadius="0"
            Padding="0">
            
            <CollectionView
                ItemsSource="{Binding ItemDefectsCollection}"
                SelectionMode="Single"
                BackgroundColor="White"
                SelectedItem="{Binding SelectedDefect}">

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>

                            <!--Item State Settings-->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Grey" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackLayout
                                HeightRequest="50">

                                <Label
                                    VerticalOptions="Center"
                                    Margin="15"
                                    Text="{Binding .}"/>
                            </StackLayout>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Frame>
    </StackLayout>

    <VerticalStackLayout
        Grid.Column="1"
        Spacing="10"
        HorizontalOptions="Start"
        Margin="10,50,0,0">
        
        <Button
            Style="{StaticResource StandardButton}"
            Text="Add">
            
        </Button>

        <Button
            Style="{StaticResource StandardButton}"
            Command="{Binding RemoveDefectCommand}"
            Text="Remove">
        </Button>
    </VerticalStackLayout>
</Grid>

右侧面板代码 #

<!--Right Panel-->
<Grid
    Grid.Row="1"
    Grid.Column="1"
    ColumnDefinitions="2*,*"
    RowDefinitions="*"
    HorizontalOptions="Center"
    Padding="25"
    MaximumHeightRequest="630"
    Margin="10">

    <StackLayout
        Grid.Column="0"
        Grid.Row="0"
        MaximumHeightRequest="520"
        MaximumWidthRequest="600"
        HorizontalOptions="Center"
        VerticalOptions="Start">

        <Frame
            Style="{StaticResource HeaderFrame}">

            <Label
                Style="{StaticResource HeaderLable}"
                Text="Missing Components">
            </Label>
        </Frame>

        <Frame
            VerticalOptions="FillAndExpand"
            BorderColor="Black"
            CornerRadius="0"
            Padding="0">

            <CollectionView
                ItemsSource="{Binding ItemMissingComponentsCollection}"
                SelectionMode="Single"
                BackgroundColor="White"
                SelectedItem="{Binding SelectedMissingComp}">

                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>

                            <!--Item State Settings-->
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup Name="CommonStates">
                                    <VisualState Name="Normal" />
                                    <VisualState Name="Selected">
                                        <VisualState.Setters>
                                            <Setter Property="BackgroundColor" Value="Grey" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackLayout
                        HeightRequest="50">

                                <Label
                            VerticalOptions="Center"
                            Margin="15"
                            Text="{Binding .}"/>
                            </StackLayout>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </Frame>
    </StackLayout>

    <VerticalStackLayout
        Grid.Column="1"
        Spacing="10"
        HorizontalOptions="Start"
        Margin="10,50,0,0">
        
        <Button
            Style="{StaticResource StandardButton}"
            Text="Add">
        </Button>

        <Button
            Style="{StaticResource StandardButton}"
            Command="{Binding RemoveMissComponentCommand}"
            Text="Remove">
        </Button>
    </VerticalStackLayout>
</Grid>

补充说明：右侧面板代码直接复制左侧，仅修改了绑定的数据源，代码本身无错误。

问题分析与解决方案 #

这大概率不是.NET Maui的Bug，而是VisualState作用目标或平台样式干扰导致的，以下是具体分析和解决办法：

核心原因 #

你当前把VisualStateManager加在了ItemTemplate内的外层StackLayout上，但CollectionView的选中状态实际是作用于ItemContentView（Maui内部包裹每个Item的容器），而非模板里的自定义布局。这种嵌套结构可能导致背景色被覆盖，或者在部分平台上VisualState未正确触发。

解决方案 #

方案1：改用ContentView作为ItemTemplate根元素

ContentView更适合承载VisualState，能确保选中状态的样式正确作用到Item容器：

<CollectionView.ItemTemplate>
    <DataTemplate>
        <ContentView>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="CommonStates">
                    <VisualState Name="Normal" />
                    <VisualState Name="Selected">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Grey" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <StackLayout HeightRequest="50">
                <Label VerticalOptions="Center" Margin="15" Text="{Binding .}"/>
            </StackLayout>
        </ContentView>
    </DataTemplate>
</CollectionView.ItemTemplate>

方案2：通过ItemStyle统一设置选中样式

直接给CollectionView的ItemStyle配置VisualState，避免模板嵌套的问题：

<CollectionView
    ItemsSource="{Binding YourCollection}"
    SelectionMode="Single"
    BackgroundColor="White"
    SelectedItem="{Binding YourSelectedItem}">
    <CollectionView.ItemStyle>
        <Style TargetType="Microsoft.Maui.Controls.VisualElement">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup Name="CommonStates">
                        <VisualState Name="Selected">
                            <VisualState.Setters>
                                <Setter Property="BackgroundColor" Value="Grey" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateGroupList>
            </Setter>
        </Style>
    </CollectionView.ItemStyle>
    <!-- 其他配置 -->
</CollectionView>

方案3：检查数据源的Equals实现

如果你的数据源是自定义类型，确保Equals方法正确实现了值比较。若两个集合的元素类型不同，或Equals逻辑不一致，可能导致选中状态的判定异常，进而影响VisualState触发。

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