Blog
Overriding Styles for ListView and GridView in XAML Applications
By Ken Getz | January 03, 2013
Whether or not you're aware of it, every control that you use in a XAML application is based on a control template that's well defined and available for you to study and modify. In its documentation, Microsoft has provided information about each of these templates. The biggest reason you might care about the control templates is if you want to override some of the behavior of one of the controls. For example, both the ListView and GridView controls behave poorly when you use the Light theme in a XAML app. In this case, the selected item in the control appears with black text on a dark purple background, making it nearly impossible to read the text on the selected item. You might find it useful to modify this behavior, and it's easy.
To get started, find the documentation that describes the control template for the control you'd like to modify. For the ListView and GridView controls, it's the ListViewItem control that you should modify, and you can find the documentation for this control here: bit.ly/12Y87P8
Given this information, you can copy/paste the styles for the four items that might need changing into your own App.xaml file (or into a resource library referenced by App.xaml). For example, you could use code like the following to change the look of the selected item:
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#00abdc"></SolidColorBrush><SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="#1100abdc"></SolidColorBrush><SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Color="#de00abdc"></SolidColorBrush><SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="#ab00abdc"></SolidColorBrush>By overriding the behavior of these specific resources, you can easily change the look of the selected item in a ListView or GridView control.
