Add, Remove & Change Cxml Items in PivotViewer

The first thing that most people will do with PivotViewer v2 in SL5RC is look at an existing static collection that they’ve made. The mechanism for loading an existing cxml file in Silverlight 5 has changed since the EAP releases, but is still very straight forward. Assuming that you already have a PivotViewer control called pv in your xaml, this is all you need (I’m using one of Tony Champion‘s test collections)…

var collection = new CxmlCollectionSource(new Uri("http://labs.championds.com/MIX10/MIX10Collection.cxml"));
collection.StateChanged += (sender, e) =>
{
  if (e.NewState == Loaded)
  {
    pv.PivotProperties = (IList)collection.ItemProperties;
    pv.ItemTemplates = collection.ItemTemplates;
    pv.ItemsSource = collection.Items;
  }
}

Now, Silverlight 5 promised some dynamic control over these collections, but we need to do a little work first. Firstly, the Items property of CxmlCollectionSource is of type ReadOnlyObservableCollection<PivotViewerItem>. This stops us adding and removing any items. What we need to do is construct an ObservableCollection<PivotViewerItem> for our items and then bind that to the control. We’ll keep a reference to this new collection so that we don’t have to keep casting the ItemsSource. This changes our code to:

public partial class MainPage : UserControl
{
  private ObservableCollection<PivotViewerItem> _items;

  public MainPage()
  {
    InitialiseComponent();

    Loaded += LoadCollection();
  }

  private void LoadCollection()
  {
    var collection = new CxmlCollectionSource(new Uri("http://labs.championds.com/MIX10/MIX10Collection.cxml"));

    collection.StateChanged += (sender, e) =>
    {
      if (e.NewState == Loaded)
      {
        _items = new ObservableCollection<PivotViewerItem>(collection.Items);

        pv.PivotProperties = collection.ItemProperties;
        pv.ItemTemplates = collection.ItemTemplates;
        pv.ItemsSource = _items;
      }
    }
  }

Removing Items

Now that we have our Observable Collection, removing items is trivially simple. Assuming you add a Button to your xaml, this is how we would remove the currently selected item:

private void btnRemove_Click(object sender, RoutedEventArgs e)
{
  if (pv.SelectedIndex >= 0)
    _items.RemoveAt(pv.SelectIndex);
}

Adding Items

Adding new items is harder than removing them. There are a number of required properties that need to be specified and then there are the optional ones that the collection’s designer has specified. First off, we’ll create an extension method that will make it easier to find properties on a PivotViewer:

public static class PivotViewerExtensions
{
  public static PivotViewerProperty FindProperty(this PivotViewer pv, string displayName)
  {
    var query = pv.PivotProperties.AsQueryable().OfType<PivotViewerProperty>();

    return query.Where(q => q.DisplayName == displayName).FirstOrDefault();
  }
}

Next we’ll add a Factory class that will help us create a PivotViewerItem with the required properties. The ‘visualCollectionSource’ parameter specifies the xml file for a single DeepZoom image (either .dzi or .xml):

public static class PivotViewerItemFactory
{
  public static PivotViewerItem Create(PivotViewer parentViewer, string id, string name, string description, string visualCollectionSource)
  {
    var item = new PivotViewerItem(id);

    item.Add(parentViewer.FindProperty("Name"), new List<string> { name });
    item.Add(parentViewer.FindProperty("Description"), new List<string> { description });
    item.Add(parentViewer.FindProperty("VisualCollectionSource"), new List<string> { visualCollectionSource });

    return item;
  }
}

Finally, we need to write some client code that will create a ‘standard’ PivotViewerItem and then add any other properties we want:

var newItem = PivotViewerItemFactory.Create(pv, (_data.Count + 1).ToString(), "New Name", "New Description", "http://labs.championds.com/MIX10/MIXCollectionTest_files2/lcy4icqv.3r5.xml");

// Now add the optional properties...
newItem.Add(pv.FindProperty("Code"), new List<string> { "A New Code" });
newItem.Add(pv.FindProperty("Room"), new List<string> { "A New Room" });
newItem.Add(pv.FindProperty("Speakers"), new List<string> { "A New Speaker" });
newItem.Add(pv.FindProperty("Video"), new List<PivotViewerHyperlink> {  new PivotViewerHyperlink("My video", new Uri("http://a.com/b.wmv")) });

// Finally, add our new item to the collection...
_data.Add(newItem);

Changing Items

The issue we have here is that PivotViewerItem gives us no way to access or change the value of any PivotViewerProperty values. What we have to do is remove the property we want to change and then re-add it with the new value. Again we’ll create a convenient extension method for this:

public static class PivotViewerItemExtensions
{
  public static void Replace(this PivotViewerItem item, PivotViewer pivotViewer, string displayName, IList newValues)
  {
    var property = pivotViewer.FindProperty(displayName);

    if (property == null)
      throw new PropertyNotFoundException(displayName);

    item.Remove(property);

    item.Add(property, newValues);
  }

  public class PropertyNotFoundException : Exception
  {
    public readonly string DisplayName;

    public PropertyNotFoundException(string displayName)
      : base("Failed to find a property with Displayname of " + displayName)
    {
      DisplayName = displayName;
    }
  }
}

Calling this from client code then only requires us to know the name of the property and the new value:

if (pv.SelectedIndex >= 0)
  _data[pv.SelectedIndex].Replace(pv, "Room", new List<string> { "A New Room" });

You can download the complete source code here and follow me @GoodCoffeeCode for more blog posts on PivotViewer.