How to customize XAML ListView colors?

youki 996

Hi,
how can i customize the following:

Selection color
Hovering color
Items color and corner radius

Whenever I try something, one works but not the other by
ListView.Resources or
ListView.ItemTemplate or
ListView.ItemContainerStyle.

Should look something like this:

3 answers

Castorix31 81,721 Reputation points

2022-06-05T21:16:15.933+00:00

You can copy all the block
"<Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle">
from generic.xaml
into
App.xaml

and you can add CornerRadius in each VisualState, like :

<Setter Target="Root.CornerRadius" Value="20" />

Then you set ItemContainerStyle in your ListView :

<ListView ItemContainerStyle ="{StaticResource ListViewItemRevealStyle}" >

A test with random colors and the new CornerRadius :
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

youki 996

Am I missing a reference or something for "Root.(RevealBrush.State)" in the setters?

Output:
onecoreuap\windows\frameworkudk\dxprivatescommon.cpp(53)\Microsoft.Internal.FrameworkUdk.System.dll!00007FF9055E4989: (caller: 00007FF8BA59966D) ReturnHr(4) tid(7fe0) 80004002 No such interface supported
'App1.exe' (Win32): Loaded 'C:\Windows\System32\cabinet.dll'.
'App1.exe' (Win32): Loaded 'C:\Windows\System32\TextInputFramework.dll'.
Exception thrown at 0x00007FF93376474C (KernelBase.dll) in App1.exe: WinRT originate error - 0x800F1000 : 'The property path 'RevealBrush.State' could not be resolved for a Setter.'.
App1.exe has triggered a breakpoint.

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

            <Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
                <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="12,0,12,0" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="FocusVisualMargin" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource ListViewItemCheckMode}"
                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">

                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Selected" />

                                        <VisualState x:Name="PointerOver">
                                            <VisualState.Setters>

                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                                <Setter Target="Root.CornerRadius" Value="20" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PointerOverSelected">
                                            <VisualState.Setters>

                                                <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                                <Setter Target="Root.CornerRadius" Value="20" />
                                            </VisualState.Setters>
                                        </VisualState>
                                        <VisualState x:Name="PointerOverPressed">
                                            <VisualState.Setters>

                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                                <Setter Target="Root.CornerRadius" Value="20" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="Pressed">
                                            <VisualState.Setters>
                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                                <Setter Target="Root.CornerRadius" Value="20" />
                                            </VisualState.Setters>
                                        </VisualState>

                                        <VisualState x:Name="PressedSelected">
                                            <VisualState.Setters>

                                                <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                                <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                                <Setter Target="Root.CornerRadius" Value="20" />
                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                    <VisualStateGroup x:Name="DisabledStates">
                                        <VisualState x:Name="Enabled" />

                                        <VisualState x:Name="Disabled">
                                            <VisualState.Setters>
                                                <Setter Target="Root.RevealBorderThickness" Value="0" />
                                                <Setter Target="Root.CornerRadius" Value="20" />
                                            </VisualState.Setters>
                                        </VisualState>

                                    </VisualStateGroup>

                                </VisualStateManager.VisualStateGroups>
                            </ListViewItemPresenter>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <!-- Other merged dictionaries here -->
            </ResourceDictionary.MergedDictionaries>
            <!-- Other app resources here -->


        </ResourceDictionary>
    </Application.Resources>
</Application>

Castorix31 81,721 Reputation points

2022-06-06T11:01:07.107+00:00

You don't seem to have copied the right generic.xaml
For example, for version 1.1.0 preview 3, I get it in :
%USERPROFILE%\.nuget\packages\microsoft.windowsappsdk\1.1.0-preview3\lib\uap10.0\Microsoft.UI\Themes

And I have for example for PointerOver : 107142
youki 996 Reputation points

2022-06-06T12:46:27.927+00:00

Hm,
I've never installed a nuget package as far as i can remember.

I've followed the instruction by MS: https://learn.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app

That was only the Windows SDK and the VCRedist, i think.

(Searched on my computer and this is the only location:
C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.22000.0\Generic)
youki 996 Reputation points

2022-06-06T15:44:07.657+00:00
Is it because of the version? (I have the stable version from the tutorial.)

Could it be problematic to use the preview 3 version? (I mean it's officially not a stable version, right?!)

I've added your code and it works with it. I don't have to worry about it?
Castorix31 81,721 Reputation points

2022-06-06T15:57:33.773+00:00

I just downloaded the 1.1.0 version and the generic.xaml seems the same as with 1.1.0 preview 3 for ListViewItemRevealStyle
(btw, even the 1.1.0 "stable version" is not really stable, from the bugs reported on MS forums...)
youki 996 Reputation points

2022-06-06T21:58:44.57+00:00

(Maybe i should reinstall it?! I've installed the 1.1 c++)

Is there a border, how can i remove it (the selected item is smaller and i only changed the color and the corner radius)?
youki 996 Reputation points

2022-06-08T14:35:51.237+00:00

OMG, which property is it or is it a bug?
Castorix31 81,721 Reputation points

2022-06-08T15:13:54.477+00:00

I cannot reproduce that
I don't see any border in default ListView...

youki 996

Could you check it?

<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>  
        <ResourceDictionary>  
            <Color x:Key="test234">#404040</Color>  
            <Color x:Key="test2345">#505050</Color>  
            <Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle">  
	            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />  
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />  
	            <Setter Property="Foreground" Value="White" />  
                <Setter Property="TabNavigation" Value="Local" />  
                <Setter Property="IsHoldingEnabled" Value="True" />  
                <Setter Property="Padding" Value="12,0,12,0" />  
                <Setter Property="HorizontalContentAlignment" Value="Left" />  
                <Setter Property="VerticalContentAlignment" Value="Center" />  
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />  
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />  
                <Setter Property="AllowDrop" Value="False" />  
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />  
                <Setter Property="FocusVisualMargin" Value="0" />  
                  
                <Setter Property="Template">  
                    <Setter.Value>  
                        <ControlTemplate TargetType="ListViewItem">  
                            <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"  
                        x:Name="Root"  
                        Control.IsTemplateFocusTarget="True"  
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"  
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"  
                        CheckBrush="Red"  
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"  
                        DragBackground="Yellow"  
                        DragForeground="White"  
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"  
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"  
                        PlaceholderBackground="Green"  
                        PointerOverBackground="{StaticResource test2345}"  
                        PointerOverForeground="White"  
                        SelectedBackground="{StaticResource test2345}"  
                        SelectedForeground="White"  
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"  
                        PressedBackground="{StaticResource test2345}"  
                        SelectedPressedBackground="{StaticResource test2345}"  
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"  
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"  
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"  
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"  
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"  
                        ContentMargin="{TemplateBinding Padding}"  
                        CheckMode="{ThemeResource ListViewItemCheckMode}"  
                        RevealBackground="{StaticResource test234}"  
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"  
                        RevealBorderBrush="Purple"  
                        CornerRadius="8"  
                        Width="225"  
                        BorderThickness="50">  
  
	                            <VisualStateManager.VisualStateGroups>  
                                    <VisualStateGroup x:Name="CommonStates">  
                                        <VisualState x:Name="Normal" />  
                                          
                                        <VisualState x:Name="Selected">  
                                            <VisualState.Setters>  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
                                            </VisualState.Setters>  
                                        </VisualState>  
  
                                        <VisualState x:Name="PointerOver">  
                                            <VisualState.Setters>  
  
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="PointerOver" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
                                            </VisualState.Setters>  
                                        </VisualState>  
  
                                        <VisualState x:Name="PointerOverSelected">  
                                            <VisualState.Setters>  
  
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)"  Value="PointerOver" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
  
                                            </VisualState.Setters>  
                                        </VisualState>  
                                        <VisualState x:Name="PointerOverPressed">  
                                            <VisualState.Setters>  
  
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="Pressed" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
                                            </VisualState.Setters>  
                                        </VisualState>  
  
                                        <VisualState x:Name="Pressed">  
                                            <VisualState.Setters>  
                                                <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="Pressed" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
                                            </VisualState.Setters>  
                                        </VisualState>  
  
                                        <VisualState x:Name="PressedSelected">  
                                            <VisualState.Setters>  
	                                            <revealBrushPresent:Setter Target="Root.(media:RevealBrush.State)" Value="Pressed" xmlns:revealBrushPresent="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsTypePresent(Microsoft.UI.Xaml.Media.RevealBrush)" />  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
                                            </VisualState.Setters>  
                                        </VisualState>  
  
                                    </VisualStateGroup>  
  
                                    <VisualStateGroup x:Name="DisabledStates">  
                                        <VisualState x:Name="Enabled" />  
  
                                        <VisualState x:Name="Disabled">  
                                            <VisualState.Setters>  
                                                <Setter Target="Root.RevealBorderThickness" Value="8" />  
                                                <Setter Target="Root.CornerRadius" Value="8" />  
                                            </VisualState.Setters>  
                                        </VisualState>  
  
                                    </VisualStateGroup>  
  
                                </VisualStateManager.VisualStateGroups>  
                            </ListViewItemPresenter>  
  
                        </ControlTemplate>  
                    </Setter.Value>  
                </Setter>  
            </Style>  
  
            <ResourceDictionary.MergedDictionaries>  
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />  
                <!-- Other merged dictionaries here -->  
            </ResourceDictionary.MergedDictionaries>  
            <!-- Other app resources here -->  
              
  
        </ResourceDictionary>  
    </Application.Resources>  
</Application>

Castorix31 81,721 Reputation points

2022-06-09T06:38:42.733+00:00
Because you changed RevealBackground

Let it with

RevealBackground="{ThemeResource ListViewItemRevealBackground}"
youki 996 Reputation points

2022-06-09T09:08:21.187+00:00

Cool, will test it later.
I'm downloading the SDK version vor c#. I've looked on my Test Windows 10 Laptop and there is also only the generic.xaml that i've mentioned.
youki 996 Reputation points

2022-06-14T20:45:58.997+00:00

Can i also customize the Scrollbar colors?

(If you hover over the scrollbar, it expands but it still has the theme color)

PS: I've downloaded the c# version and also the preview 3 version and neither of them has the generic.xaml version that you have. :(
Castorix31 81,721 Reputation points

2022-06-14T22:24:17.393+00:00

It can be done by copying/modifying the ScrollBar style, like the sample in this thread