如何为CollectionView选中项设置圆角背景高亮样式？

你当前的代码是直接给Grid设置选中状态的背景色，但Grid本身不支持圆角，所以高亮区域是直角。要实现圆角高亮，需要用Border控件来承载背景，通过VisualState控制它的背景色和圆角属性。

修改后的完整代码如下：

<CollectionView x:Name="collectionView" ItemsLayout="VerticalGrid, 4" SelectionMode="Single" SelectionChanged="collectionView_SelectionChanged" Margin="20,0,20,0">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <!-- 用Border替代外层Grid，实现圆角背景 -->
            <Border Margin="0,20,0,10" CornerRadius="8">
                <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="{Binding Color}"/>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <!-- 内部原有布局保持不变，添加padding避免内容贴边 -->
                <VerticalStackLayout Padding="10">
                    <Grid>
                        <Border Stroke="{Binding Color}" BackgroundColor="{Binding Color}" HeightRequest="51" WidthRequest="51">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="5"/>
                            </Border.StrokeShape>
                            <Image Source="{Binding Icon}" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="30" HeightRequest="30"/>
                        </Border>
                    </Grid>
                    <Label Text="{Binding Name}" TextColor="Black" HorizontalOptions="Center"/>
                </VerticalStackLayout>
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

关键修改说明： #

• 将外层的Grid替换为Border，通过CornerRadius属性设置圆角大小（示例设为8，可按需调整）
• 在Normal状态下显式设置背景为透明，避免默认样式干扰
• 给内部VerticalStackLayout添加Padding，让内容和圆角边框之间留有合适间距

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