Dissecting Hard Rock Memorabilia and Silverlight Deep Zoom - Part 6

The filter example is finally here!

Update Oct 14, 2008: Removed the example from this post to reduce load time of this page. Please use the example from this post, DeepZoom sample ported to Silverlight 2 Beta 2, to try the functionality.

Click on the Filter button to filter the images based on the tag entered in the text box to the left of the filter button. The following tags will yield some result: lilies, tulip, rose, hibiscus, iris, blue, white, yellow, red, peach, pink, purple. The flower tag will return all the images. The current limitation is that only one tag can be used at a time.

Behind the scenes...

This was actually pretty easy. I used the method suggested by George (see the first comment in this post ) instead of storing a pointer in the Tag property of the MultiScaleSubImage control.

This is what I did to accomplish basic filter functionality:
1. Modified the Deep Zoom generated SparseImageSceneGraph.xml file to include some tag information

?xml version="1.0"?>
<SceneGraph version="1">
  <SceneNode>
    <FileName>tigerlilies_cr.jpg</FileName>
    <ZOrder>1</ZOrder>
    <Tags>
        <Tag>lilies</Tag>
        <Tag>flower</Tag>
    </Tags>
  </SceneNode>
  <SceneNode>
    <FileName>tulip_bluebase-1_cr.jpg</FileName>
    <ZOrder>5</ZOrder>
    <Tags>
        <Tag>tulip</Tag>
        <Tag>flower</Tag>
        <Tag>blue</Tag>
    </Tags>
  </SceneNode>
  <SceneNode>
    <FileName>2redandwhitelilies_cr.jpg</FileName>
    <ZOrder>8</ZOrder>
    <Tags>
        <Tag>lilies</Tag>
        <Tag>flower</Tag>
        <Tag>red</Tag>
        <Tag>white</Tag>
    </Tags>
  </SceneNode>
  ...
</SceneGraph>

2. Loaded the SparseImageSceneGraph.xml asynchronously into the control. I could have simplified this by loading the metadata file synchronously or by embedding it in the xap package itself but I wanted to learn the asynchronous download feature provided by Silverlight

using System.Net;
using System.Linq;
using System.Xml.Linq;

XElement _xmlImageMetadata;        // to store the metadata associated with the images

msi.Loaded += delegate(object sender, RoutedEventArgs e)
{
    // Now set the source property. 
    // This ensures that the html page with the silverlight control is loaded completely before loading the multiscaleimage.
    // This is to enhance the overall user experience.
    msi.Source = new Uri("http://thepintospatronus.com/deepzoom/test/items.bin");
    
    // Download the metadata associated with the above uri
    WebClient _downloader = new WebClient();
    _downloader.DownloadStringCompleted += new DownloadStringCompletedEventHandler(imageMetadata_DownloadStringCompleted);
    _downloader.DownloadStringAsync(new Uri("http://thepintospatronus.com/deepzoom/test/SparseImageSceneGraph.xml"));            
};

void imageMetadata_DownloadStringCompleted(Object sender, DownloadStringCompletedEventArgs e)
{
    if (e.Error == null) {
        
        // Convert the string xml representation to a valid XML document
        _xmlImageMetadata = XElement.Parse(e.Result);
        
        // The filter button is disabled by default. Enable it when the metadata is available
        buttonFilter.IsEnabled = true;
    }
}

3. Used Linq to filter the dataset

buttonFilter.Click += delegate(object sender, RoutedEventArgs e)
{
    IEnumerable<int> ZOrders = 
        from sceneNode in _xmlImageMetadata.Elements("SceneNode")
        where 
            (from tag in sceneNode.Elements("Tags").Elements("Tag")
            where
                ((string)tag.Value).ToUpper() == txtFilter.Text.ToUpper()
            select tag)
            .Any()
        select ((int)sceneNode.Element("ZOrder")-1);

    _imagesToShow.Clear();
    _imagesToHide.Clear();
    for (int i=0; i<msi.SubImages.Count; i++) {
        if (ZOrders.Contains(i))
            _imagesToShow.Add(msi.SubImages[i]);
        else
            _imagesToHide.Add(msi.SubImages[i]);
    }
    ArrangeImages();
};

TODO - Better animation.

Comments are welcome!