UWP-CPP/Winrt hovered/selected 时设置 ListViewItem 的圆角半径

Question

我打算使用 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,0,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>

如图所示，selected/hovered 项的边角未圆化。您能否帮助实现这一目标。 TIA

Answer 1

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

请检查以下步骤：

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

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

找到名字为PointerOver、PointerOverSelected、PointerOverPressed、PointerOverPressed的VisualState，分别添加如下代码：

<Setter Target="Root.CornerRadius" Value="10" />  <!--Add this code-->

删除与ListViewItem’s样式冲突的ListView.ItemContainerStyle语句。

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

UWP-CPP/Winrt hovered/selected 时设置 ListViewItem 的圆角半径

UWP-CPP/Winrt Set Corner radius of the ListViewItem when hovered/selected

xaml

listview

listviewitem

uwp

c++-winrt