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

编程问答 2022-05-22

问题描述

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

As shown in the below picture the corners of the selected/hovered items is not rounded

如图所示，选中/悬停的项目的角没有圆角。你能帮助我如何做到这一点。 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>
  1. 查找名称为VisualState、PointerOver、PointerOverSelected、PointerOverPressed的{​​{1}}，分别添加如下代码：
PointerOverPressed
  1. 删除与 <Setter Target="Root.CornerRadius" Value="10" /> <!--Add this code--> 样式冲突的 ListView.ItemContainerStyle 语句。

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

c++-winrtlistviewlistviewlistviewitemuwpxaml