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>

Как показано на рисунке ниже, углы выбранных/наведенных элементов не закруглены

Как показано на рисунке, углы выбранных/наведенных элементов не закруглены. Не могли бы вы помочь, как это может быть достигнуто. ТИА


listview xaml uwp listviewitem c++-winrt
person Sudheer Kumar    schedule 04.03.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно изменить 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, PointerOverPressed, добавьте следующий код отдельно:
<Setter Target="Root.CornerRadius" Value="10" />  <!--Add this code-->
  1. Удалите оператор ListView.ItemContainerStyle, который конфликтует со стилем ListViewItem’s.

Обратите внимание: лучше сначала выполнить описанные выше шаги, чтобы установить радиус угла в стиле ListViewItem, а затем добавить другой стиль или настройки позже, что может обеспечить работу настроек в стиле ListViewItem.

person YanGu    schedule 04.03.2021
comment
Большое спасибо за ответ. Это действительно очень помогло, могу ли я узнать, как подходить к таким ситуациям, или вы можете указать мне какие-либо ресурсы, которые объясняют, как выполнять расширенные стили в XAML. - person Sudheer Kumar; 04.03.2021
comment
Вы можете попробовать изучить документ < /a> о стиле < /a>, документ об управлении шаблон и Визуальное состояние. - person YanGu; 05.03.2021
comment
И документ о контейнерах элементов и шаблонах. - person YanGu; 05.03.2021