I find that I often run into the need of separating a collection of items into several collections just so I can bind them to multiple listboxes, for example a list of sessions spanning several tracks and each track is shown in his own listbox in a pivotitem. To get this done you can start by adding multiple collections to your viewmodel and divide the items there. However this makes your viewmodel very big in a very short time. A better way to do this is using CollectionViewSource items in XAML. Let me show you how.

First thing I did was building a demo class existing out of a title and a description, these two properties will be shown in the listbox later on. A third property is the one we’ll use to filter the data, here’s the completed class.

public class DemoClass
{
    public string Title { get; set; }
    public string Description { get; set; }
    public Pivot PivotToAppearIn { get; set; }
}

Nothing special here. Notice the Pivot instance, this is just an Enum that will be the way to filter later on.

public enum Pivot
{
    First,
    Second,
    All
}

For the demo’s purpose I’ll be creating a bunch of dummy data in the viewmodel. The project template I’ve used here is the default pivot app template in the Windows Phone 7.1.1 SDK. It comes with a bunch of dummy data, I’ve used the same data but put them in instances of the DemoClass. Those instances are put inside an ObservableCollection.

This is the viewmodel

public class MainViewModel : INotifyPropertyChanged
{
    public const string ItemsPropertyName = "Items";
    private ObservableCollection<DemoClass> items;
    public ObservableCollection<DemoClass> Items
    {
        get
        {
            return items;
        }

        set
        {
            if (items == value)
            {
                return;
            }

            items = value;
            NotifyPropertyChanged(ItemsPropertyName);
        }
    }

    public MainViewModel()
    {
        this.Items = new ObservableCollection<DemoClass>();
        LoadData();
    }

    public void LoadData()
    {
        Items.Add(new DemoClass 
        { 
            Title = "runtime one", 
            Description = "Maecenas praesent accumsan bibendum", 
            PivotToAppearIn = Pivot.First 
        });
    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(String propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (null != handler)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

So we’ve got our basic bindable property here and a method that loads in the dummy data. In the demo project there’s obviously more then one item in the collection, there’s about 16 to be precise.

In the design I didn’t change a lot from the default template. I’ve just copied the ItemTemplate from the listbox to the pageresources so that it can be reused in the second listbox.

This is the template.

<phone:PhoneApplicationPage.Resources>
    <!-- template for the listboxes -->
    <DataTemplate x:Name="ListBoxTemplate">
            <StackPanel Margin="0,0,0,17" Width="432" Height="78">
                <TextBlock Text="{Binding Title}" TextWrapping="Wrap" 
                           Style="{StaticResource PhoneTextExtraLargeStyle}"/>
                <TextBlock Text="{Binding Description}" TextWrapping="Wrap" 
                           Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>
            </StackPanel>
        </DataTemplate>
</phone:PhoneApplicationPage.Resources>

All right now that the preparations are set, time to get into the filtering. First step is to add a CollectionViewSource for each listbox. These are set on the same place as I’ve put the listbox ItemTemplate, in the pageresources. For this demo I need two CollectionViewSources.

<CollectionViewSource x:Name="FirstPivot" Filter="FirstPivot_Filter" Source="{Binding Items}" />
<CollectionViewSource x:Name="SecondPivot" Filter="SecondPivot_Filter" Source="{Binding Items}" />

So what’s all this? x:Name is like in any other XAML object, it’s just the name that can be used to reference the object. The source is the ObservableCollection that was created in the viewmodel. And last but definitely not least is the Filter event. This event will fire for every item in the collection that is bound to the Source property.

Now for the event handler, I’ll just post the event handler FirstPivot_Filter here because they are basically the same.

private void FirstPivot_Filter(object sender, System.Windows.Data.FilterEventArgs e)
{
    e.Accepted = (e.Item as DemoClass).PivotToAppearIn == Model.Pivot.First || 
        (e.Item as DemoClass).PivotToAppearIn == Model.Pivot.All;
}

FilterEventArgs has two properties, Accepted is a boolean that when true shows the item in the listbox that is bound to the CollectionViewSource. Item is the current item in the collection. Remember that this event is triggered for each item in the collection. So what we do here is casting the Item property to an instance of DemoClass then check if the PivotToAppearIn property, that was an instance of the enum, is either First or All.

Now that we have the CollectionViewSources and the event handlers in place it’s time to bind the ViewSource to the listbox.

<controls:PivotItem Header="first">
    <ListBox x:Name="FirstListBox" Margin="0,0,-12,0" 
             ItemsSource="{Binding Source={StaticResource FirstPivot}}"
             ItemTemplate="{StaticResource ListBoxTemplate}" />
</controls:PivotItem>

The bindingsource of ItemsSource is bound to the CollectionViewSource that filters for this listbox. And that’s it!

In this article I’ve shown how you can filter a collection using a CollectionViewSource in XAML. This is an easy and fast way to visually filter data while keeping a clean ViewModel.

Download the Demo project here.

I’m currently working on a Windows Phone 7 application that needs a dynamic Pivot. For every item in a list there should be a pivot item. Besides that, every dynamic pivot item should have a listbox that is bound to another list. I found very little information on these topics so I decided to write it down myself.

Both the header binding and the listbox binding are done from the same class. The class is called DemoClass and contains a string Name that will be bound to the header of the pivot item and a list of strings called Result that will be bound to the pivot item’s body. Here’s the code for the class:

I used ObservableCollection here instead of List because ObservableCollection already implements INotifyPropertyChanged and takes care of notifying all it’s subscribers when it changes. It’s perfectly possible to use a IList<string> instead of the ObservableCollection but then the DemoClass needs to implement INotifyPropertyChanged. In the constructor of the class the collection gets initialized.

Next thing I needed was a viewmodel to bind to my xaml page. The viewmodel declares a collection of DemoClass instances and fills those instances with dummy data.

I am again using an ObservableCollection for the same reason as I did in the DemoClass. LoadData() creates 10 instances of DemoClass and adds them to the PivotItems collection. FillLists() will fill the Result collection of every DemoClass instance with random dummy data.

Next step is to let the view know where it needs to look for its data. This can be done from xaml or from code behind. MVVM Light takes the xaml approach while the default Visual Studio projects do it from code behind, since this is a default project I followed the code behind approach. This is how my MainPage.xaml.cs looks liks.

Instantiation of the ViewModel occurs in App.xaml.cs and is auto-generated code. The Button_Click method is an event handler for a button, obviously. It will call a method on the ViewModel that regenerates new random dummy data for the pivot body. This shows how an ObservableCollection gives a powerful auto-updating binding while keeping the DemoClass nice and clean.

Now let’s take a look at the xaml and specifically at the bindings. This is the MainPage.xaml.

I only pasted the layoutRoot grid here because all the xml namespaces are the default ones from a WP7 project. So for starters I’ve bound the Pivot’s ItemsSource to the PivotItems collection. Then I declare two templates, the header template is the title of the pivot item, by binding it to name it will use the Name property from the DemoClass. Since the Pivot’s ItemsSource is bound to PivotItems, the textblock in the header template is now bound to PivotItems.Name. The itemtemplate is what makes up the pivot’s body, it contains a listbox that is bound to PivotItems.Result. Underneath the pivot is a button that triggers the event handler in MainPage.xaml.cs.

When this is executed you’ll see an automatically generated pivot bound to dummy data, every time the button is clicked new data will be generated and shown in the pivot immediately thanks to the ObservableCollection.

The source of this project can be found here.

Conclusion

In this small article I explained how you can databind a pivot so that it’s items are automatically generated and bound to other properties. It’s not hard to do but it took me some time to figure out so I hope I’ve helped someone by writing down my findings.

The Belgian Microsoft Techdays 2011 will take place 26-27-28 April at Metropolis Antwerp.

I'll be attending, hope it will be as good as last year.
Things I look forward to:

• Silverlight 5
• C# 5 (asynchrony in particular)
• HTML5 and CSS3
• Windows Phone 7 development
• Hopefully some XNA session

Info on the techdays can be found here