Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change Highlight color of the selected ListView item in UWP (Windows 10)

I'm working on a Windows 10 app using C# and XAML. I have a ListView and I want to change the default HighLight color of an selected item. I was seeing many code examples (like this) but all are designed for WP8 or Win8, I was trying to implement those but they do not work for me.

In general I'm having troubles modifying the default themes of controls because I don't find useful documentation. It would be great if someone can help me with the highlight color and also recommend me good documentation.

like image 315
alecardv Avatar asked Aug 30 '15 23:08

alecardv


2 Answers

Actually a better way to discover the styling properties is to use Blend.

First, open up your page in Blend. Then right click on your ListView and go

Edit Additional Templates > Edit Generated Item Container (ItemContainerStyle) > Edit a Copy.

Give it a name and hit OK.

Now, you have generated the full built-in style for your ListViewItems and this is where you can find all the information about their appearance, animations and other visual behaviors.

You should be look at this piece of code -

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

See the line SelectedBackground="{ThemeResource SystemControlHighlightListAccentLowBrush}"? That's where you can apply your own color to it. Keep in mind that it should be of type Brush instead of Color.

like image 107
Justin XL Avatar answered Sep 21 '22 21:09

Justin XL


This can be achieved in XAML by overriding the resource.

<ListView ...>     <ListView.Resources>         <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="#FF0000" />         <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="#FF0000" />     </ListView.Resources> </ListView> 
like image 39
Daniel Glick Avatar answered Sep 23 '22 21:09

Daniel Glick