MAUI中CollectionView选中Frame时修改边框颜色无效求助

问题原因 #

1. CollectionView默认的选中高亮灰色条会覆盖自定义样式，需先禁用该默认效果
2. CollectionView的选中状态IsSelected是绑定到ItemTemplate的根元素，即你的代码里的ContentView，而非直接作用于内部的Frame，因此直接给Frame设置CommonStates.Selected视觉状态无法触发

解决方案 #

分两步处理：

• 禁用CollectionView的默认选中背景色
• 将选中状态的样式绑定到根元素的视觉状态，或通过DataTrigger直接绑定IsSelected属性到Frame

修改后的代码示例 #

方式1：使用视觉状态（推荐）

<ContentPage.Resources>
    <!-- 先设置Frame的默认样式 -->
    <Style TargetType="Frame">
        <Setter Property="BorderColor" Value="{StaticResource LighterGreen}" />
        <Setter Property="Padding" Value="8" />
        <Setter Property="Margin" Value="0,0,0,5" />
        <Setter Property="BackgroundColor" Value="Transparent" />
    </Style>
</ContentPage.Resources>

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="auto"/>
        <RowDefinition Height="250"/>
        <RowDefinition Height="250"/>
    </Grid.RowDefinitions> 

    <CollectionView SelectionMode="Multiple"
                    SelectionChanged="collectionview_coll_skills_SelectionChanged"
                    Margin="15,0,0,0"
                    Grid.Row="1"
                    VerticalScrollBarVisibility="Never" 
                    x:Name="collectionview_coll_skills"
                    SelectionBackgroundColor="Transparent"> <!-- 禁用默认选中灰色条 -->
        <CollectionView.ItemsLayout>
            <GridItemsLayout Orientation="Vertical" Span="3" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>                   
                <!-- 根元素ContentView添加视觉状态 -->
                <ContentView>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="Selected">
                                <!-- 选中时修改指定Frame的边框颜色 -->
                                <VisualState.Setters>
                                    <Setter TargetName="SkillFrame" Property="BorderColor" Value="LightSkyBlue" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>    
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="135"/>
                        </Grid.ColumnDefinitions>
                        <Frame x:Name="SkillFrame">
                            <Label FontSize="14" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding DisplayValue}"/>
                        </Frame>
                    </Grid>
                </ContentView>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</Grid>

方式2：使用DataTrigger

如果觉得视觉状态写法繁琐，可直接给Frame添加数据触发器，绑定IsSelected属性：

<CollectionView SelectionMode="Multiple"
                SelectionChanged="collectionview_coll_skills_SelectionChanged"
                Margin="15,0,0,0"
                Grid.Row="1"
                VerticalScrollBarVisibility="Never" 
                x:Name="collectionview_coll_skills"
                SelectionBackgroundColor="Transparent"> <!-- 同样需要禁用默认背景 -->
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" Span="3" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>                   
            <ContentView>
                <Grid>    
                    <Grid.RowDefinitions>
                        <RowDefinition Height="50"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="135"/>
                    </Grid.ColumnDefinitions>
                    <Frame Padding="8" Margin="0,0,0,5" BackgroundColor="Transparent">
                        <Frame.Triggers>
                            <!-- 选中时切换边框色 -->
                            <DataTrigger TargetType="Frame" Binding="{Binding IsSelected}" Value="True">
                                <Setter Property="BorderColor" Value="LightSkyBlue" />
                            </DataTrigger>
                            <!-- 未选中时恢复默认色 -->
                            <DataTrigger TargetType="Frame" Binding="{Binding IsSelected}" Value="False">
                                <Setter Property="BorderColor" Value="{StaticResource LighterGreen}" />
                            </DataTrigger>
                        </Frame.Triggers>
                        <Label FontSize="14" VerticalOptions="Center" HorizontalOptions="Center" Text="{Binding DisplayValue}"/>
                    </Frame>
                </Grid>
            </ContentView>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键说明 #

• SelectionBackgroundColor="Transparent"是必须的，否则默认的灰色选中条会显示在Frame下方，遮挡自定义样式
• ItemTemplate的根元素会自动继承CollectionView的IsSelected属性，因此可以直接绑定或使用视觉状态监听
• 两种方式都能实现需求，视觉状态更符合MAUI的样式管理规范，DataTrigger则更简洁直观

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