Search code examples
xamlwinui-3winuiwindows-app-sdk

How to disable the default visual hint for ListViewItem selection in WinUI3 (Windows 10)


In particular, I want to get rid of the default vertical blue animation that appears to the left of the selected ListViewItem after releasing the mouse button. That's at least the default behavior which I get on my Windows 10 pc.

I have this solution, which is not perfect, as for some reason I loose some of the other default styling like the rounded corners around the highlighted items. Also, as I clearly don't fully understand what's going on behind the scene, I'm afraid this solution might break once I add complexity to the UI.

My current solution:

<ListView.ItemContainerStyle>
    <Style TargetType="ListViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter
                        PressedBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>

Solution

  • You lose some of the default look when you override the ControlTemplate. If you just want to remove the blue line, you can just disable it by setting ListViewItemSelectionIndicatorVisualEnabled to false:

    <Page.Resources>
        <x:Boolean x:Key="ListViewItemSelectionIndicatorVisualEnabled">False</x:Boolean>
    </Page.Resources>
    
    <ListView ItemsSource="{x:Bind Items}" />
    

    or

    <ListView ItemsSource="{x:Bind Items}" >
        <ListView.Resources>
            <x:Boolean x:Key="ListViewItemSelectionIndicatorVisualEnabled">False</x:Boolean>
        </ListView.Resources>
    </ListView>