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

Question

I am planning to show a list of objects using ListView. According to the design the rectangle around the ListViewItem should be rounded at the corners. Have tried multiple ways to achieve the same but couldn't find a solution.

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

As shown in the picture the corners of the selected/hovered items is not rounded. Can you please help how this can be achieved. TIA

Answer 1

You need to change the VisualState to set CornerRadius of ListViewItem in style of ListViewItem.

Please check the following steps:

1. Open generic.xaml file, find a Style whose TargetType is ListViewItem and Key is ListViewItemRevealStyle. Copy the style into your Page.Resources.
2. Delete the x:Key property of the style so that the style could be used in all ListViewItem in the current Page.
3. Find a VisualState whose name is Selected, add the following code:

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

4. Find VisualStates whose names are PointerOver, PointerOverSelected, PointerOverPressed, PointerOverPressed, add the following code seperately:

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

5. Delete the ListView.ItemContainerStyle statement, which conflicts with the ListViewItem’s style.

Note, it is better if you could follow the above steps first to set corner radius in the style of ListViewItem then add other style or settings later, which could ensure settings in the style of ListViewItem work.