UWP ListView selected item highlight disappears if ItemContainerStyle is set

Question

I am using a ListView to display a list of items. But when I set the font of the items using ItemContainerStyle and now an item is selected, the ListView highlight (blue line on the left) is no longer visible. On this screenshot here is a comparison. The problem has come with the installation of the Microsoft.UI.Xaml package, because here the design of ListView has been changed. Is there any way to fix this without having to remove ItemContainerStyle or the Microsoft.UI.Xaml package?

MainPage.xaml

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
      
      <ListView HorizontalAlignment="Left">
        <ListViewItem Content="ABCD"/>
        <ListViewItem Content="abcd"/>
        <ListViewItem Content="1234"/>
      </ListView>

      <ListView HorizontalAlignment="Right">
        <ListViewItem Content="ABCD"/>
        <ListViewItem Content="abcd"/>
        <ListViewItem Content="1234"/>
        <ListView.ItemContainerStyle>
          <Style TargetType="ListViewItem">
            <Setter Property="FontSize" Value="16"></Setter>
          </Style>
        </ListView.ItemContainerStyle>
      </ListView>
      
    </Grid>
</Page>

App.xaml

<Application
    x:Class="App1.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">
    <Application.Resources>
      <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
    </Application.Resources>
</Application>

After testing the code in Windows 10 and Windows 11 in a blank UWP application, I have to say that the code you are sharing is not enough to reproduce the behavior you got. Could you please reproduce this in a blank UWP app and share the code that could reproduce this issue? — Roy Li - MSFT, Aug 01 '22 at 02:10
Thanks for your reply, I created a new Blank App and pasted all the code into my question. — Adrian, Aug 01 '22 at 10:58
If you just want to change properties like `FontSize` or `Background` for one of the items, you could directly set it. That's a workaround for such a scenario because these properties are built-in properties that you could directly modify without giving a style. — Roy Li - MSFT, Aug 02 '22 at 02:22
Yes I know that, but in my main application the list is initially empty and the items are then inserted there programmatically according to the user's settings. — Adrian, Aug 02 '22 at 06:25

score 0 · Accepted Answer · answered Aug 02 '22 at 09:17

The reason for this behavior is that when you set a new ItemContainerStyle for the listview, it overrides the default item style that is used from the WinUI library.

The solution to this is that you need to give the item a style based on the style that the item is currently using. I find the default style of the ListViewItem in WinUI GitHub: ListViewItem_themeresources. So you just need to create a style that is based on the DefaultListViewItemStyle.

You will need to change a little bit of your code like this:

 <ListView>
        <ListViewItem Content="ABCD"/>
        <ListViewItem Content="abcd"/>
        <ListViewItem Content="1234" />
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem" BasedOn="{StaticResource DefaultListViewItemStyle}">
                <Setter Property="FontSize" Value="25"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

UWP ListView selected item highlight disappears if ItemContainerStyle is set

1 Answers1