UWP-CPP/Winrt 设置 ListViewItem 悬停/选中时的角半径

如何解决UWP-CPP/Winrt 设置 ListViewItem 悬停/选中时的角半径

我打算使用 ListView 显示对象列表。根据设计，ListViewItem 周围的矩形的角应为圆角。尝试了多种方法来实现相同但找不到​​解决方案。

                    <ListView
                    x:Name="ObjectList"
                    ItemsSource="{x:Bind ObjectViewModel.Objects}"
                    SelectionChanged="ListViewButtonClick"
                    MaxWidth ="{StaticResource ColumnMaximumWidth}"
                    VerticalAlignment = "Center"
                    HorizontalContentAlignment = "Stretch"
                    ScrollViewer.HorizontalScrollBarVisibility ="Disabled"
                    SelectionMode ="Single" />

                    <ListView.Resources>
                        <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Green" />
                        <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Green" />
                    </ListView.Resources>

                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Margin" Value="0,30" />
                        </Style>
                    </ListView.ItemContainerStyle>

                    <ItemsControl.ItemTemplate>
                        <DataTemplate x:DataType="local:ObjectModel">
                            <Border
                                BorderBrush="Red"
                                BorderThickness="3"
                                CornerRadius="5">
                                <Grid MinHeight="66" CornerRadius="8">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto" />
                                        <ColumnDefinition />
                                    </Grid.ColumnDefinitions>
                                    <FontIcon
                                        FontSize="17"
                                        Glyph="&#xE720;"
                                        Style="{StaticResource FontIconStyle1}" />
                                    <TextBlock
                                        Grid.Column="1"
                                        Style="{StaticResource AddBluetoothLabelTextStyle}"
                                        Text="{x:Bind ObjectName,Mode=OneWay}" />
                                </Grid>
                            </Border>
                    </ItemsControl.ItemTemplate>
                </ListView>

如图所示，选中/悬停的项目的角没有圆角。你能帮助我如何做到这一点。 TIA

解决方法

您需要更改 VisualState 以将 CornerRadius 的 ListViewItem 设置为 ListViewItem 的样式。

请检查以下步骤：

1. 打开 generic.xaml 文件，找到一个 Style，其 TargetType 为 ListViewItem，Key 为 ListViewItemRevealStyle。将样式复制到您的 Page.Resources 中。
2. 删除样式的 x:Key 属性，使该样式可以在当前页面的所有 ListViewItem 中使用。
3. 找到一个名为 VisualState 的 Selected，添加以下代码：

<VisualState x:Name="Selected">  
    <VisualState.Setters>
        <Setter Target="Root.CornerRadius" Value="10" />
    </VisualState.Setters>
</VisualState>

4. 查找名称为VisualState、PointerOver、PointerOverSelected、PointerOverPressed的{​​{1}}，分别添加如下代码：

PointerOverPressed

5. 删除与 <Setter Target="Root.CornerRadius" Value="10" /> <!--Add this code--> 样式冲突的 ListView.ItemContainerStyle 语句。

注意，最好先按照上面的步骤在ListViewItem’s的样式中设置圆角半径，然后再添加其他样式或设置，这样可以保证ListViewItem样式的设置工作。