Windows 8, Windows Phone, Silverlight: 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:

<courses>
  <course>
    <title>Windows Phone 7 Hands-On</title>
    <description>This course covers many real-world issues developers face when building Windows Phone applications</description>
    <author>Yacine Khammal</author>
    <level>Intermediate</level>
    <duration>03:04:56</duration>
    <published>04/18/2011</published>
    <track>WP7</track>
    <image>Data/Images/wphandson.png</image>
    <modules>
      <module>
        <title>WP application architecture</title>
        <description>A look at building an MVVM application for Windows Phone 7 application. We examine phone-specific choices and constraints faced when structuring a data backed business app for the phone.</description>
        <image>Data/Images/wcfriaservices.png</image>
        <clips>
          <clip title="Intro" videouri="section1.wmv" />
          <clip title="Overview of MVVM" videouri="section3.wmv" />
          <clip title="Windows Phone 7 considerations" videouri="section4.wmv" />
          <clip title="Sample requirements" videouri="section2.wmv" />
          <clip title="Hands-on : application structure" videouri="section6.wmv" />
          <clip title="Hands-on : viewmodel classes" videouri="section7.wmv" />
          <clip title="Hands-on : the main view" videouri="section8.wmv" />
          <clip title="Hands-on : view hierarchy" videouri="section9.wmv" />
          <clip title="Navigation topics" videouri="section10-0.wmv" />
          <clip title="Hands-on : navigation" videouri="section10.wmv" />
          <clip title="Commanding" videouri="section11-0.wmv" />
          <clip title="Hands-on : adding commands - 1" videouri="section11.wmv" />
          <clip title="Hands-on : adding commands - 2" videouri="section12.wmv" />
          <clip title="Takeaways" videouri="section13.wmv" />
        </clips>
      </module>
      <module> ... </module>
    </course>
    <course> ... </course>
</courses>

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 :

private async Task GetCoursesAsync()
{
    try
    {
        var storageFolder = await Package.Current.InstalledLocation.GetFolderAsync("Data");
        var xmlFile = await storageFolder.GetFileAsync("CourseData.xml");
        var stream = await xmlFile.OpenAsync(FileAccessMode.Read);
  
        XmlDocument xmlDoc = await XmlDocument.LoadFromFileAsync(xmlFile);
        XDocument doc = XDocument.Parse(xmlDoc.GetXml());
  
        courseList = (from course in doc.Descendants("course")
                      select new Course
                      {
                          Title = course.Element("title").Value,
                          Description = course.Element("description").Value,
                          Author = course.Element("author").Value,
                          Level = course.Element("level").Value,
                          Duration = TimeSpan.Parse(course.Element("duration").Value),
                          Published = DateTime.Parse(course.Element("published").Value),
                          Track = course.Element("track").Value,
                          Image = new BitmapImage(new Uri(projectBaseUri, course.Element("image").Value)),
                          Modules = (from module in course.Element("modules").Descendants("module")
                                     select new Module
                                     {
                                         Title = module.Element("title").Value,
                                         Description = module.Element("description").Value,
                                         Image = new BitmapImage(new Uri(projectBaseUri, module.Element("image").Value)),
                                         Clips = (from clip in module.Element("clips").Descendants("clip")
                                                  select new Clip
                                                  {
                                                      Title = clip.Attribute("title").Value,
                                                      VideoUri = new Uri(projectBaseUri, "Data/Video/" + clip.Attribute("videouri").Value),
                                                      Transcript = clip.HasElements ? clip.Element("transcript").Value : ""
                                                  }).ToList()
                                     }).ToList()
                      }).ToList();
  
...
}

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 :

public class CourseTrack
{
    public CourseTrack()
    {
        Courses = new ObservableCollection<Course>();
    }
  
    public string TrackName { get; set; }
    public ObservableCollection<Course> Courses { get; set; }
}

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 :

public class CourseTrack : List<Course>
{
    public string TrackName { get; set; }
    public new IEnumerator<object> GetEnumerator()
    {
        return (IEnumerator<object>)base.GetEnumerator();
    }
  
    public CourseTrack(string trackName, IEnumerable<Course> courses)
    {
        TrackName = trackName;
        base.AddRange(courses);
    }
}

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 :

internal void GroupCoursesByTrack()
{
    CoursesByTrack = new List<CourseTrack>();
  
    var query = from course in courseList
                orderby course.Track
                group course by course.Track into g
                select new CourseTrack(g.Key, g);
  
    CoursesByTrack = query.ToList();
  
}

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 :

<CollectionViewSource
    x:Name="tracksViewSource"
    Source="{Binding CourseTracks}"
    IsSourceGrouped="true" />

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 :

<GridView ItemsSource="{Binding Source={StaticResource tracksViewSource}}"
          ItemTemplate="{StaticResource TrackListItemTemplate}">
    ...
    <GridView.GroupStyle>
        <GroupStyle>
            <GroupStyle.HeaderTemplate>
                <DataTemplate>
                    ...
                </DataTemplate>
            </GroupStyle.HeaderTemplate>
            <GroupStyle.Panel>
                ...
            </GroupStyle.Panel>
        </GroupStyle>
    </GridView.GroupStyle>
</GridView>

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 :

<CollectionViewSource
    x:Name="tracksViewSource"
    Source="{Binding CourseTracks}"
    IsSourceGrouped="true"
    ItemsPath="Courses"/>

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 !

Windows 8, Windows Phone, Silverlight

Saturday, March 10, 2012

Win8 Metro controls and data grouping

1 comment: