CollectionViewSource and design time data in Blend

The CollectionViewSource is nothing new - it exists both in WPF and Silverlight and in Windows Store applications. This sample will be based on using it in a Windows Store app, but the basic principles applies to all platforms.

The CollectionViewSource works as a Proxy over a collection classes and enables grouping. This is extremely powerful if we are working with a GridView and we want to display groups of collections.

Example on group of collections:

WorkshopViewModel that contains a list of groups - List<Group> Groups - and each group contains a list of members - List<GroupMembers> Members

And instead of having a ItemsControl that first creates all the groups for us, and then inside each item, having a new items control that then displays all the members, we can use the CollectionViewSource and a GridView and voilà – job now done.

 

Creating a CollectionViewSource with designtime data in Blend

Sorry, too good to be true - it can’t be done. At least not by using the UI, as far as I know. But what we can do instead is typing in the XAML we need for it, and placing it inside the resource dictionary of the page.

<common:LayoutAwarePage.Resources>

<CollectionViewSource
x:Name="csv"
Source="{Binding Groups}"
ItemsPath="Members" 
IsSourceGrouped="true"
d:Source="{BindingGroups,Source="{d:DesignInstance Type=viewmodel:WorkshopViewModel, IsDesignTimeCreatable=True}}" />
 </common:LayoutAwarePage.Resources>

Here’s works:

x:Name: This is the name of the collection, we’ll use this when we are referencing it from our GridView

Source: This is where we create the binding to the parent groups in the ViewModel.

ItemsPath: This is the name of the collection inside the parent. So we have a group, and this contains a collection of members called Members.

IsSourceGrouped: Indicates whether our source, is already grouped, which it is, since it is a collection containing items, where each item has its own collection.

If you just put in the following XAML:

<CollectionViewSource x:Name="csv" />

You can see the the CollectionViewSource is available through the resource tab inside Blend.

Here we can set our bindings, and put in the ItemsPath, and IsSourceGrouped.

 

One last line that’s VERY VERY important, is this one:

d:Source="{Binding Groups, Source={d:DesignInstance Type=viewmodel:WorkshopViewModel, IsDesignTimeCreatable=True}}"

Because the CollectionViewSource works as a proxy and is referenced as a StaticResource is does not get the your design time data even if you’ve set the d:DataContext on the Page.

Therefore you’ll need to set your design time data explicitly on the CollectionViewSource itself too.

And voilà – you got design time data.
 

Making it work with a GridView.

I’ve used the CollectionViewSource on a GridView

One thing here you should note is, when you are creating your binding for the GridView. Do NOT drag the resource onto the GridView, from the Resource tab in Blend. This will create an incorrect binding!

Make sure your binding looks like this:

<GridView ItemsSource="{Binding Source={StaticResource csv}}" />

With the Binding source being a StaticResource.

You can download my complete sample with the CollectionViewSource, Design time data and everything, right here.

Feel free to reach out to me if using a CollectionViewSource gives you any problems.

P.S Make sure you follow me on twitter @deanihansen for more news, design tips, articles and how-to's.