Sep 102012
 September 10, 2012  Posted by at 11:29 pm Telerik, WinRT Tagged with: ,  Add comments

To read the other steps in the step by step guide for creating a Metr/ WInRT application go here
Welcome back! As promised we will be working more on the presentation of data today! I’m not sure if you noticed, but the items in the list were not grouped, and we would of course love to have them grouped by category, it makes more sense that way. And we would also love to have the list sorted by Titles and Category. We will do the grouping by using CollectionViewSource and IGrouping, and if you have used CollectionViewSource before I will have to warn you that we are a bit more limited in the XAML in WinRT,- and that it is done differently here. This is how it can be done:

The end result, after using CollectionViewSource in WinRT

Add a CollectionViewSource to the Page resources, give it a name and set IsSourceGrouped to true. Yes the source will be grouped once it gets it.

[sourcecode language=”XML”]
<CollectionViewSource x:Name="activityCollection" IsSourceGrouped="true" />

Now we set the Listview ItemsSource to the resource, and we add a Listview.GroupStyle and declare a header template inside of it, bind the title of this header to the Key. Notice that we are binding the width of the element inside the datatemplate to a column, this is so it will stretch and fill up the whole space. To do this we must assign an x:name to the column we are binding against.

[sourcecode language=”XML”]
<ColumnDefinition x:Name="column" Width="2*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="3*"/>
<ListView Background="Olive" x:Name="itemListView" ItemsSource="{Binding Source={StaticResource activitiesCollection}}" >
<Border Background="Black" Width="{Binding ElementName=column, Path=ActualWidth}" HorizontalAlignment="Stretch">
<TextBlock Text='{Binding Key}’ Foreground="White" Margin="5" FontSize="22" FontFamily="Segoe UI Light" />

We are not done! We need to sort and group our items, so let’s add a new method in the repository:

[sourcecode language=”csharp”]
public IEnumerable<IGrouping<string, StudyActivity>> GetAllGrouped()
return _studyActivities.OrderBy(x => x.Title).GroupBy(x => x.CategoryName);

And finally we need to create an instance of the items (grouped and sorted) and add it to our CollectionViewSource. We’ll do this by changing the SetListViewSource to SetCollectionViewSource and setting the collection source instead of the ListView itemsSource.

[sourcecode language=”csharp”]
void SetCollectionViewSource()
activityCollection.Source = new StudyActivityRepository(CreateActivities()).GetAllGrouped();

Hit F5 and have a look at our beautiful app!

Next blogpost we’ll have a look at design briefly and talk about some of the design requirements, and start implementing them.

  4 Responses to “WinRT app guide: Step 7: Using CollectionViewSource in WinRT”

  1. […] group headers. I’ve taken his method and extended it to include semantic zoom…”WinRT app guide: Step 7: Using CollectionViewSource in WinRT (Iris Classon)“Welcome back! As promised we will be working more on the presentation of data […]

  2. […] WinRT app guide: Step 7: Using CollectionViewSource in WinRT (Iris Classon) […]

  3. I have been struggling with design time data using the CollectionViewSource. It works fine in run time but no matter what I have tried I cannot seem to get design time data to display.

    I’ve read several posts on setting the d:DesignSource property but I have had zero luck. Have you run into any issues with this?

  4. Hi,
    Can you show how to use filter with ObservableCollection (applying to WinRT), if we need, for example, show only specific elements in the ListView or GridView and hide others?
    Thanks advance.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



What is 13 + 8 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)