Skip to content

Using Several CollectionViewSources with the Pivot Control

September 25, 2010
One of the new (and shiny) controls in Windows Phone 7 is the Pivot.  You can have up to 7 PivotItems i.e. lists that user can navigate with a swipe gesture. Here’s a quick video demonstrating a Pivot in action :
Vodpod videos no longer available.
The other example is the built-in email application from Microsoft where the Pivot is used to see Unread, Urgent, and Flagged messages. This is a perfect fit for the CollectionViewSource object which is very handy to expose a collection through a View. This view can be sorted, grouped and filtered without altering the source (your collection). So going back to the Wines page in the video, there’s just one source : an ObservableCollection<Wine> and 3 CollectionViewSources , each one with a filter.
the diagram of classes
The source code (the filter is only a Predicate method):
private ObservableCollection<Wine> wines;

//ctor(..)

protected override void OnNavigatedTo(NavigationEventArgs e)
{
	FavoriteWines = new CollectionViewSource{ Source = wines };
	FavoriteWines.View.MoveCurrentTo(-1);

	WishWines = new CollectionViewSource{ Source = wines };
	WishWines.View.MoveCurrentTo(-1);

	LocateWines = new CollectionViewSource{ Source = wines };
	LocateWines.View.MoveCurrentTo(-1);

	FavoriteWines.View.Filter = (x) => FilterWine(x, ListType.MyWines);
    WishWines.View.Filter = (x) => FilterWine(x, ListType.WishList);
    LocateWines.View.Filter = (x) => FilterWine(x, ListType.Locate);
}
In the XAML :
<Controls:Pivot Style="{StaticResource PivotStyle}">
<Controls:PivotItem Header="My Wines">
	<ListBox x:Name="MyWinesListBox" ItemsSource="{Binding FavoriteWines.View}">
		<ListBox.ItemTemplate>
			<DataTemplate>
				<userControls:WineSummary DataContext="{Binding}" />
			</DataTemplate>
		</ListBox.ItemTemplate>
	</ListBox>
</Controls:PivotItem>
<Controls:PivotItem Header="WishList">
	<ListBox x:Name="MyWishListBox" ItemsSource="{Binding WishWines.View}">
		<ListBox.ItemTemplate>
			<DataTemplate>
				<userControls:WineSummary DataContext="{Binding}" />
			</DataTemplate>
		</ListBox.ItemTemplate>
	</ListBox>
</Controls:PivotItem>
<Controls:PivotItem Header="Locate">
	<ListBox x:Name="MyLocateWines" ItemsSource="{Binding LocateWines.View}">
		<ListBox.ItemTemplate>
			<DataTemplate>
				<userControls:WineSummary DataContext="{Binding}" />
			</DataTemplate>
		</ListBox.ItemTemplate>
	</ListBox>
</Controls:PivotItem>
</Controls:Pivot>

And that’s it for an old concept of WPF/Silverlight that can be easily applied in Windows Phone 7 to manage the Pivot control.

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: