MAUI CollectionView选中样式仅对首个条目生效问题求助

问题场景 #

参考微软文档《Configure CollectionView item selection》实现选中样式，将视觉状态定义在全局Style.xaml中供多个CollectionView复用，但出现以下异常：

• 仅选中ObservableCollection的首个条目时，Grid背景色变为蓝色
• 选中其他条目时无任何视觉变化

效果对比：

• 选中首个条目：
• 选中其他条目：

相关代码 #

全局样式文件（Style.xaml）

<Style TargetType="Grid">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Blue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

页面CollectionView代码

<CollectionView Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="6" Grid.RowSpan="5" 
                ItemsSource="{Binding Items}" Margin="40" SelectionMode="Single" 
                SelectionChanged="CollectionView_SelectionChanged">
    <CollectionView.ItemTemplate>
        <DataTemplate x:DataType="model:ItemsModel">
            <Grid ColumnDefinitions="40, 80, 40, *">
                <Label Grid.Column="0" Text="{Binding PlanOrder, StringFormat='{0:00}'}" TextColor="{StaticResource Cyan}" />
                <Label Grid.Column="1" Text="Item" TextColor="{StaticResource Cyan}" />
                <Label Grid.Column="2" Text="{Binding DestNumber, StringFormat='{0:00}'}" TextColor="{StaticResource Cyan}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

问题原因 #

全局Style直接作用于所有Grid控件，但CollectionView的Selected视觉状态实际是绑定在**条目容器（默认是ContentView）**上，而非ItemTemplate内的Grid。首个条目出现异常生效属于初始绑定的巧合，其他条目无法触发Grid的状态切换。

解决方法 #

方法1：修改全局样式的目标类型

将Style的TargetType改为CollectionView的条目容器类型（ContentView），让视觉状态作用在正确的对象上：

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

方法2：限定样式仅作用于CollectionView条目

如果不想影响全局其他ContentView，可给Style添加x:Key，再通过CollectionView的ItemContainerStyle引用：

• Style.xaml中定义带Key的样式：

<Style x:Key="CollectionViewItemStyle" TargetType="ContentView">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="BackgroundColor" Value="Blue" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

• 页面中CollectionView绑定样式：

<CollectionView ... ItemContainerStyle="{StaticResource CollectionViewItemStyle}">
    <!-- 其他代码不变 -->
</CollectionView>

方法3：通过绑定控制ItemTemplate内的Grid样式

若需要精确控制ItemTemplate内Grid的样式，可给数据模型添加IsSelected属性，通过绑定切换背景色：

<DataTemplate x:DataType="model:ItemsModel">
    <Grid ColumnDefinitions="40, 80, 40, *"
          BackgroundColor="{Binding IsSelected, Converter={StaticResource BoolToColorConverter}, ConverterParameter='Blue,Transparent'}">
        <!-- Label内容不变 -->
    </Grid>
</DataTemplate>

需在SelectionChanged事件中更新选中项的IsSelected状态，或使用MVVM框架绑定选中项实现自动更新。

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