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:
Code Snippet
- using System.Collections.ObjectModel;
-
- namespace BindingDynamicPivotDemo
- {
- public class DemoClass
- {
- public string Name { get; set; }
- public ObservableCollection<string> Result { get; set; }
-
- public DemoClass()
- {
- Result = new ObservableCollection<string>();
- }
- }
- }
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.
Code Snippet
- using System;
- using System.Collections.ObjectModel;
-
- namespace BindingDynamicPivotDemo
- {
- public class MainViewModel
- {
- public ObservableCollection<DemoClass> PivotItems { get; set; }
-
- public MainViewModel()
- {
- PivotItems = new ObservableCollection<DemoClass>();
-
- //load pivot headers
- LoadData();
-
- //load random dummy data for the pivot body
- FillLists();
- }
-
- public void LoadData()
- {
- //pivot headers
- for (int i = 1; i <= 10; i++)
- {
- DemoClass newClass = new DemoClass {Name = "pivotItem " + i};
-
- PivotItems.Add(newClass);
- }
- }
-
- public void FillLists()
- {
- Random rnd = new Random();
-
- //fill each list with dummy data, this will be shown in the pivot body
- foreach (DemoClass pivotItem in PivotItems)
- {
- pivotItem.Result.Clear();
-
- for (int j = 0; j < 10; j++)
- {
- pivotItem.Result.Add("item " + rnd.Next(0, 1000));
- }
- }
- }
- }
- }
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.
Code Snippet
- using System.Windows;
- using Microsoft.Phone.Controls;
-
- namespace BindingDynamicPivotDemo
- {
- public partial class MainPage : PhoneApplicationPage
- {
- // Constructor
- public MainPage()
- {
- InitializeComponent();
-
- // Set the data context of the listbox control to the sample data
- DataContext = App.ViewModel;
- }
-
- private void Button_Click(object sender, RoutedEventArgs e)
- {
- App.ViewModel.FillLists();
- }
- }
- }
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.
Code Snippet
- <Grid x:Name="LayoutRoot" Background="Transparent">
- <!--Pivot Control-->
- <controls:Pivot x:Name="PivotPlatform" Margin="0,0,8,77" Title="BindingDynamicPivotDemo" ItemsSource="{Binding PivotItems}" >
- <controls:Pivot.HeaderTemplate>
- <DataTemplate>
- <TextBlock Text="{Binding Name}"/>
- </DataTemplate>
- </controls:Pivot.HeaderTemplate>
- <controls:Pivot.ItemTemplate>
- <DataTemplate>
- <ListBox ItemsSource="{Binding Result}">
- <ListBox.ItemTemplate>
- <DataTemplate>
- <TextBlock TextWrapping="Wrap" Text="{Binding}" />
- </DataTemplate>
- </ListBox.ItemTemplate>
- </ListBox>
- </DataTemplate>
- </controls:Pivot.ItemTemplate>
- </controls:Pivot>
- <Button Content="Randomize" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="0,0,0,4" Click="Button_Click"/>
- </Grid>
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.
Subscribe