Saturday, March 10, 2012
Win8 Metro controls and data grouping
In Windows 8, the primary collection controls are ListView and GridView, which are items controls that derive from a common ListViewBase class. There’s also the FlipView, which binds to data collections as well but displays one item at a time. ListView and GridView have built-in support for data grouping, which makes a lot of very common scenarios a breeze to implement. In this post I’ll zoom in on the grouping feature in Metro list controls.
Suppose you have an app that displays a list of courses. You can use the Grid Application project template in Visual Studio to generate the skeleton for you. Then you need to create your own data source in place of the SampleDataSource provided in the project. In my example, I read course data from an XML file that I add to the project:
Oh and by the way, in case you’re interested, for lack of better ideas, here’s the approach I’ve used to read the data from the xml :
So now I have a data source. Of course I’ve previously defined a Course class, a Module class, a Clip class, each with appropriate data properties. If your app also needs to update data as well as display it, then you should have your data classes extend the BindableBase class included in the Common directory of the VS project templates, and have your property setters call SetProperty() to raise UI-bound change notifications.
We could just go ahead and bind a list control to our data source, just like we’ve done in my previous post. However we want to first group the data, so the first level of listing is groups. So first, we define a grouping construct, which IS a list of items or EXPOSES a list of items. For example :
There we have it, a CourseTrack grouped concept that exposes a list of courses as well as a group name called TrackName. Here’s an alternative approach :
Here the CourseTrack IS a list of courses since it extends a collection. This approach is actually required if you want to use semantic zoom. And here’s an example of how you actually group the data :
You got it, CoursesByTrack is a list of groups, that is a list of CourseTracks each representing a list of groups.
Then you bind a CollectionViewSource to the list :
Your sharp eye probably didn’t miss the IsSourceGroup property, which as the name suggests indicates the data source is grouped, i.e. the elements in the list are groups. As a result, any ListViewBase control that binds to the CollectionViewSource will display the root elements as groups using the group-related templates you specify :
Within the GroupStyle property you can specify the group header through the HeaderTemplate, and the panel to use for displaying the list of groups using the Panel template.
Note that if you used approach 1 above, that is you define your group class, CourseTrack, as EXPOSING a collection of courses as a property as opposed to deriving from a collection type, then in your CollectionViewSource, in addition to setting IsGroupedSource to true, you need to indicate the path to the actual groups within the data source using the ItemsPath property :
If you’ve worked with the Developer Preview, you probably remember you had to have your group classes implement an IGroupInfo interface for this to work. Now all you need to do is extend or expose a collection property. So much simpler and more intuitive! Grouping your data source has really become a breeze.
Happy grouping !