Tag Archives: GridView

Windows 8 Using XAML: ItemsControl Styles

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.

ListViewItem styles

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.

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

Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Overriding Styles for ListView and GridView in XAML Applications

ldn-expertkgetz

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:

By overriding the behavior of these specific resources, you can easily change the look of the selected item in a ListView or GridView control.


 

(function(){
var s=’hubspotutk’,r,c=((r=new RegExp(‘(^|; )’+s+’=([^;]*)’).exec(document.cookie))?r[2]:”),w=window;w[s]=w[s]||c,
hsjs=document.createElement(“script”),el=document.getElementById(“hs-cta-c6aa8857-3e7e-4761-a672-02016ac3851d”);
hsjs.type = “text/javascript”;hsjs.async = true;
hsjs.src = “//cta-service-cms2.hubspot.com/cs/loader.js?pg=c6aa8857-3e7e-4761-a672-02016ac3851d&pid=153597&hsutk=” + encodeURIComponent(c);
(document.getElementsByTagName(“head”)[0]||document.getElementsByTagName(“body”)[0]).appendChild(hsjs);
try{el.style.visibility=”hidden”;}catch(err){}
setTimeout(function() {try{el.style.visibility=”visible”;}catch(err){}}, 2500);
})();

 

ldn-expertkgetzKen Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Using Standard Templates for ListView and GridView

Thumbnail for 559

When creating XAML applications using ListView and GridView controls for Windows 8, you probably want your applications to look like “standard” applications. You can reverse-engineer existing applications, but Microsoft makes it a little easier than that. In the documentation, if you search a bit, you’ll find two pages that list some sample, standard DataTemplate examples you can use for your own applications.

For the ListView control, look here: http://bit.ly/R8WUHy

For the GridView control, look here: http://bit.ly/Tc5JQG

You’ll find two problems with these templates. First, they include hard-coded text, and it’s up to you to replace the hard-coded text with binding expressions that work with your own data source. In addition, some of the templates don’t work well with “real” data, and you may need to modify them slightly to work with your bound data. In general, however, these templates can save you a lot of time. Review them all to see what Microsoft has provided. If there’s not an exact match for your application, you can at least use one of these as a starting place.

Thumbnail for 559Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.