LearnNowOnline

Blog

Windows 8 Using XAML: Choosing a ListView or GridView Control

Excerpt by Ken Getz | June 13, 2013

Windows 8 ListView and GridView controls both allow you to display data, but they display their collections of data differently. The following article takes a look at both controls and how they are used.

Choosing a ListView or GridView

In order to display multiple data items, you can select the ListView or GridView control. Both controls display collections of data, making it easy to present items from a list, or any other bound data source. Both controls provide similar functionality, although they display their data slightly differently. Both controls derive from the base ItemsControl parent class, and both inherit the functionality of the base control. Because both controls inherit from the same base class, they share a large number of properties. As a matter of fact, the controls are so similar, they're often both referred to using the name ItemsControl (the base class), rather than saying "ListView and GridView controls".

TIP: To be honest, the ListView and GridView controls are so similar, you can think of them as a single control. The major difference between the two is the manner in which they lay out their items, and it's easy to change the layout so each control emulates the other.

The ListView control displays its data stacked vertically, much like a standard list box. Use this control to display an ordered list of data, like a list of email messages, a list of contacts, or search results. It's also useful in master-detail layout scenarios-you can display the list of master items in a ListView control, and the details in some other kind of control. You can control every aspect of the layout of data in this control, including how each data item appears in the list, using templates.

The GridView control displays its data stacked horizontally in rows (although you can alter this behavior and have it displayed in columns first, as well). You use this control when you need more space for rich visualization of each item to be displayed. As with the ListView control, you can use templates to control the layout of each item, displaying the data in any manner you need.

There are several ways to display data in an ItemsControl. You can:

• Add items directly to the Items collection property, in XAML or in code.
• Bind the ItemsSource property to a data source.

Applications often use both a ListView and a GridView control bound to the same set of data, so you can alter the view based on the current screen layout. For example, you might use a GridView control in full-screen layout, but a ListView when in Snapped layout. The first Figure below shows a sample application using the GridView control, and the second Figure below shows the same application, in Snapped view. The trick here is to show and hide the two controls, based on the current layout.

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.