时间戳

首页 > 解决方案 > UWP-CPP/Winrt 设置 ListViewItem 悬停/选中时的圆角半径

xaml - 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,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>

如下图所示，选中/悬停的项目的角不是圆角的

如图所示，所选/悬停项目的角不是圆角的。你能帮助如何实现这一目标吗？TIA

标签： xamllistviewuwplistviewitemc++-winrt

解决方案

您需要更改样式中的VisualStateto 集。CornerRadiusListViewItemListViewItem

请检查以下步骤：

  1. 打开generic.xaml文件，找到一个Stylewho TargetTypeisListViewItem和Keyis 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,的s，分别PointerOverPressed添加以下代码：
<Setter Target="Root.CornerRadius" Value="10" />  <!--Add this code-->
  1. 删除与样式ListView.ItemContainerStyle冲突的语句。ListViewItem’s

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

推荐阅读