LearnNowOnline

Blog

Windows 8 Using XAML: ItemsControl Styles

Excerpt by Ken Getz | June 24, 2013

As with every other control you use in Windows 8 applications, both the ListView and GridView controls (that is, both ItemsControls) are based on control templates that determine the manner in which these controls appear.

For example, Microsoft supplies default styles that affect the way each ItemsControl appears. They supply two different sets of styles, one for the Light theme, and one for the default Dark theme. This concept applies to every XAML control-that is, every XAML control is based on a template that defines all the styles for various parts of the control.

It's crucial to investigate the control styles for ItemsControls, because (for reasons that aren't particularly clear) the default styles for the Light theme simply don't work with ItemsControls! As you'll see, the selected item in an ItemsControl, when you use the Light theme, appears with a dark purple background and black text. This makes any text in the item unreadable. Luckily, it's easy to override the default styles. >/p>

All of the styles that affect the display of every XAML control are documented, including ListView and GridView. Microsoft has provided, as part of its developer documentation, a list of all of the control templates and their default styles, as well as instructions on which styles to override to change the look of each control. All you need to do is override any of the styles in your application's App.xaml file (or in a resource library referenced from App.xaml).

You can find the styles for ListView controls (not the ListView items, but the control itself) here:

http://go.appdev.com/?id=8AFA

You can find the styles for GridView controls (not the GridView items, but the control itself) here:

http://go.appdev.com/?id=8AFB

When you browse to either of these pages, you'll find a list of styles that you can override, and the entire control template. The Figure below shows the available styles you can override for the ListView control. These styles apply only to group headers.

Item styles are more interesting, because you can override them immediately to modify the look of an ItemsControl. ListViewItem styles, pertinent to both the ListView and GridView controls, are documented here:

http://go.appdev.com/?id=8AFC

The documented ListViewItem styles, shown in the Figure below, allow you to override any part of the ListView items in your applications.

There is, unfortunately, no real documentation on how each style affects the display of the ListViewItem, so it's up to you to experiment with the various styles until you find the one that changes the attribute that you care about. In any case, to modify the behavior of a ListView Item, copy the necessary style into App.xaml and modify its value, effectively overriding the default behavior of the style.

Note that the documentation includes separate styles for Light and Dark themes. The items in the documentation describe the default settings. You can override any individual style (or group of styles) to modify the look of the control.

This post is an excerpt from the online courseware for our Windows 8 Using XAML: Views, Resources, and Toasts course written by expert Ken Getz.