Uwp win10 Listview SelectedItem Style

Question

Is there a way to change ListviewItem properties when this one is selected?

As an example, I want the rectangle inside the ListviewItem to be red if selected, and blue by default.

How to achieve this in an elegant way?

Answer 1

You can set ListView.ItemContainerStyle to customize the ListViewItems style used in ListView .

This page shows the default style: https://msdn.microsoft.com/en-us/library/windows/apps/mt299136.aspx

In the case of your example, you will change the Selected~Background properties in code similar to the one below:

 <ListView ...> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListViewItem"> <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}" SelectionCheckMarkVisualEnabled="True" CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}" DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}" FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}" FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}" PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}" PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}" SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}" SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}" PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}" SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}" DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" ContentMargin="{TemplateBinding Padding}" CheckMode="Inline"/> </ControlTemplate> 

Answer 2

For those who find this later, I solved this problem using the library in Nuget: https://github.com/JerryNixon/Template10.ListHelpers

This behavior uses separate styles for each state.

 <Style x:Key="ItemNormalStyle" TargetType="Grid"> <Setter Property="RequestedTheme" Value="Dark" /> <Setter Property="Background" Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" /> </Style> <Style x:Key="ItemSelectedStyle" TargetType="Grid"> <Setter Property="RequestedTheme" Value="Light" /> <Setter Property="Background" Value="{ThemeResource ButtonBackgroundThemeBrush}" /> </Style> 

Using it is also quite simple. This is an attached property.

 <ListView helpers:ListViewHelper.SelectedItemStyle="{StaticResource MySelectorInfo}" ItemTemplate="{StaticResource ListViewItemTemplate}" > <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch" /> <Setter Property="Padding" Value="0" /> </Style> </ListView.ItemContainerStyle> </ListView> 

// good luck

Answer 3

I already answered this question elsewhere, please check this out! UWP grid item selection style