RogerNoble.com

The benefit of creating an implementation of PivotViewer and Deep Zoom from scratch is that you get a better understanding for how it all works under the covers. (If you haven’t had a look at the HTML5 PivotViewer you can check it out here - http://pivot.lobsterpot.com.au/html5.htm)

The Silverlight 5 version of the PivotViewer control brings a whole heap of long awaited features including dynamic collections, item templates and Semantic Zoom. I’ve been playing around with item templates a bit lately as I prepare for my SQL Saturday talks later this month in Brisbane, Wellington and Adelaide and I thought I would go into a bit more detail on picking the correct MaxWidth for a PivotViewerItemTemplate.

If your unfamiliar with the Silverlight 5 PivotViewer item templates can be defined in XAML and data bound to items the PivotViewer controls ItemsSource. The item templates can be further enhanced by specifying a value for the MaxWidth property – a value that tells the control when to render the item/tile based on the current tile size or zoom level. For example creating three item templates, one with minimum detail for when the collection first loads, one with a little more detail when only a few tiles are visible and a final one for when only one tile is displayed would look something like this:

<pivot:PivotViewerItemTemplate MaxWidth="150">
	<Border Width="30" Height="20">
		<TextBlock Text="150" />
	</Border>
</pivot:PivotViewerItemTemplate>
<pivot:PivotViewerItemTemplate MaxWidth="500">
	<Border Width="30" Height="20">
		<TextBlock Text="500" />
	</Border>
</pivot:PivotViewerItemTemplate>
<pivot:PivotViewerItemTemplate>
	<Border Width="30" Height="20">
		<TextBlock Text="> 500" />
	</Border>
</pivot:PivotViewerItemTemplate>

While this example is simplistic – it only displays some text at each level, it demonstrates how the MaxWidth property is used to specify when to display a tile. The first template will get used until the tile becomes greater than 150 pixels, the second will be visible until 500 pixels and the last will be visible for all width after that.

While choosing a value for MaxWidth seems straightforward enough, having a closer look behind the scenes reveals that there is a little bit more to picking the right value. When we talk about MaxWidth what we are really referring to is the level at which the template applies, and when I say level I mean a level in the context of a Deep Zoom pyramid (http://msdn.microsoft.com/en-us/library/cc645077).

Even though the Silverlight 5 PivotViewer does away with the Deep Zoom dzc and dzi files, behind the scenes Deep Zoom tiles are still being rendered client side by Silverlight. Deep Zoom works by splitting up an image into smaller pieces where the widths equal a power of 2.

In the context of PivotViewer the current level is determined by the current width of the tile rounded down to the nearest power of 2. For example if the tile is 256 pixels wide then it is at level 8 (2^8), and when it’s 300 pixels wide it also gets rounded down to level 8.

Note: The formula to work out the level based on the width is: Floor(Log(width)/Log(2)).

To put this to the test I created 4 tile templates with the MaxWidth set to 300, 500, 700 and > 700. The result was that only the tiles with a MaxWidth of 300, 700 and > 700 were actually rendered by PivotViewer – it was if the item template with the MaxWidth set to 500 was never defined.

Unfortunately the official documentation mentions nothing about this (or anything really: http://msdn.microsoft.com/en-us/library/system.windows.controls.pivot.pivotvieweritemtemplate.maxwidth(v=vs.95).aspx) but as the item templates get converted to Deep Zoom behind the scenes, the MaxWidth of an item template can really only be set to powers of 2.

As much as I like the PivotViewer control, displaying a total count of filtered items is a useful feature that does not exist in the current control, which is why a while ago I added it as part of the breadcrumb at http://pivot.lobsterpot.com.au.

Today I saw this post on the forums http://forums.silverlight.net/t/247694.aspx/1?Get+the+information+that+are+currently+on+the+filter+panel and it reminded me about a feature I never got around to finishing, but I thought I might post here. This function drills through all the controls to return the count displayed next the to facet item name:

/// 
 /// Gets the current count of a facet item /// 
private int GetFacetItemCount(string facetName, string facetItemName)
{
	int count = 0;
	Grid partContainer = (Grid)this.GetTemplateChild("PART_Container");
	var GridFilter = ControlHelper.GetChildObject(partContainer, "FilterPaneRoot");
	var categories = ControlHelper.GetChildObject(GridFilter, "PART_CategoriesContainer");
	var accordionItems = ControlHelper.GetChildObjects(GridFilter);
	foreach (var accordionItem in accordionItems)
	{
		//facet name
		var categoryText = ControlHelper.GetChildObjects(accordionItem, "m_categoryName");
		foreach (var cTxt in categoryText)
		{
			var facetTextBlock = ControlHelper.GetChildObject(cTxt, "PART_MainTextBlock");
			if (facetTextBlock.Text == facetName)
			{
				var itemsControl = ControlHelper.GetChildObjects(accordionItem, "m_facetItemsControl");
				foreach (var item in itemsControl)
				{
					var btns = ControlHelper.GetChildObjects(item, "PART_FacetSelectorButton"); foreach (var b in btns) { var textBlocks = ControlHelper.GetChildObjects(b, "PART_MainTextBlock"); foreach (var textBlock in textBlocks) { if (textBlock.Text == facetItemName) { var cardinalityCount = ControlHelper.GetChildObject(b, "PART_CardinalityCount"); Int32.TryParse(cardinalityCount.Text, out count); return count; } } } } } } } return count; }

This is the second post in a series on customising PivotViewer. In the last post I covered how to attach to the UI events, in this post I’ll  show the process of adding a custom view.

The key steps in creating a custom view is first adding the view change button to the control bar, second is adding the view control and finally hooking it all up.

The button for the view can be any UIElement type, for the Grid View on the LobsterPot PivotViewer I created a simple UserControl. Adding the new button can be done in the overloaded OnApplyTemplate() method by inserting it into the GridControlBar. I’ve created a mini example below that contains the key elements for adding the button – I’ve left out the definition for GridControlBar for brevity, to see how it’s defined have a look at the post on Events.

public class LobsterViewer : System.Windows.Pivot.PivotViewer
{
    private GridViewButton _pivotGridButton { get; set; }

    public LobsterViewer()
    {
        _pivotGridButton = new GridViewButton();
        // Click event
        _pivotGridButton.Click += new EventHandler(_pivotGridButton_Click);
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var controlBarPanel = (DockPanel)VisualTreeHelper.GetChild(GridControlBar, 2);
        controlBarPanel.Children.Insert(1, _pivotGridButton);
    }

    ///
    /// Turn on Grid and deselect pivot view controls
    ///
    private void _pivotGridButton_Click(object sender, EventArgs e)
    {
        // Disable other views
        // Enable custom view
    }
}

The next step is to add the custom view control to the PivotViewer. This is done in exactly the same way as the button, it’s a simple UserControl and is inserted in the overloaded OnApplyTemplate method. Again I’ve left out the definition of PartContainer for brevity.

private PivotDataGrid _pivotGrid { get; set; }
public LobsterViewer()
{
    _pivotGrid = new PivotDataGrid();
}
public Grid GridViews
{
    get
    {
        return ((Grid)
                ((CollectionViewerView)(PartContainer)
                    .Children[0])
                    .Content)
                    .Children[0];
    }
}

public override void OnApplyTemplate()
{
    ...
    //Insert grid control
    _pivotGrid.Visibility = System.Windows.Visibility.Collapsed;
    _pivotGrid.SetValue(Grid.ColumnProperty, 1);
    _pivotGrid.SetValue(Grid.ColumnSpanProperty, 2);
    _pivotGrid.SetValue(Grid.RowProperty, 0);
    _pivotGrid.SetValue(Grid.RowSpanProperty, 1);
    GridViews.Children.Add(_pivotGrid);
}

It’s worth noting that I’ve set the initial visibility to Collapsed as I didn’t want it to be visible when then PivotViewer is first loaded.

The final step is to display the new view when the button is clicked and to hide the tiles. From the previous post we already have the view change events so it’s straight forward to set the visibility of the new view to Collapsed. Hiding the tiles can be done by getting the first child control in GridViews and setting its visibility to Collapsed.

///
/// Visibility of tiles
///
public Visibility TileVisibility
{
    get
    {
        return GridViews.Children[0].Visibility;
    }
}

///
/// Turn on Grid and deselect pivot view controls
///
private void _pivotGridButton_Click(object sender, EventArgs e)
{
    TileVisibility = System.Windows.Visibility.Collapsed;
    _pivotGrid.Visibility = System.Windows.Visibility.Visible;
}

That’s it for now, but please let me know if this is useful. Next post will be on adding a map control as a view and passing the latitude and longitude coordinates via the CXML.

This is the first post in a series of posts that I hope to put together on customising the PivotViewer control, which will give an insight into how the LobsterPot pivot collections were created. This post will be focused on how to attach to the UI events that will be needed when adding a custom view to the PivotViewer control.

Before I get started I’d like to mention that while I have no affiliation with Silverlight Spy I recommend it highly and could not have done any of this easily without it. I’d also like to thank Xper360 (blog|twitter) and Tony Champion (blog|twitter) for their work in customising the PivotViewer control – It’s well worth looking at the series of posts by Xpert360 which provide an excellent start for customising the PivotViewer control. Also make sure to download the lessons provided by Tony Champion - http://pivotviewerlessons.codeplex.com/ which are also excellent.

One of the first challenges with customising the PivotViewer control is to get the right user events. Out of the box PivotViewer only exposes basic events, which means to get anything useful such as view change and filter we will have to create our own event handlers.

To add a custom view control the first event needed is to know when the views have been changed. This will then let us know when to show and hide the custom view. Lucky for us attaching to the view change events are fairly straight forward:

///
/// The main Grid
///
public Grid PartContainer
{
    get
    {
        return (Grid)this.GetTemplateChild("PART_Container");
    }
}

///
/// Top control bar containing the view controls, sort list and zoom controls
///
public ControlBarView ControlGrid
{
    get
    {
        return ControlHelper.GetChildObject<ControlBarView>(PartContainer, "PART_ControlBar");
    }
}

///
/// Top control bar grid
///
public Grid GridControlBar
{
    get
    {
        return (Grid)VisualTreeHelper.GetChild(ControlGrid, 0);
    }
}

///
/// Bind to view switch events
///
private void BindViewSwitcherEvent()
{
    // ViewSwitcher contains the two Grid and Graph controls
    var viewSwitcher = ControlHelper.GetChildObject<ContentControl>(GridControlBar, "ViewSwitcher");
    var viewControls = ControlHelper.GetChildObject<StackPanel>(viewSwitcher);
    foreach (var viewBtn in viewControls.Children)
    {
        // First remove any events that might have already been attached
        ((ListBoxItem)viewBtn).MouseLeftButtonUp -= new System.Windows.Input.MouseButtonEventHandler(viewSwitcher_MouseLeftButtonUp);
        ((ListBoxItem)viewBtn).MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler(viewSwitcher_MouseLeftButtonUp);
    }
}

The next step is to handle mouse events from the facet Category filters. What makes this slightly trickier is the facet category items are created and destroyed dynamically, which means we also have to attach and detach to the events dynamically.  To avoid potential memory leaks a stack is used to push current UI objects when attaching and pop them off again to detach and clean up. The BindAllAccordianButtons method below is called once the collection has been loaded, and every time the Facet Category filters change.

// Memory management
private Stack _uiObjects;
private Stack _uiThumbObjects;

///
/// Filter pane grid control
///
public Grid GridFilter
{
    get
    {
        return ControlHelper.GetChildObject(PartContainer, "FilterPaneRoot");
    }
}

///
/// Bind to click events for all visible accordion buttons
///
private void BindAllAccordionButtons()
{
    //cleanup old attached events
    while (_uiObjects.Count > 0)
    {
        _uiObjects.Pop().Click -= new RoutedEventHandler(fb_Checked);
    }
    while (_uiThumbObjects.Count > 0)
    {
        _uiThumbObjects.Pop().DragCompleted -= new DragCompletedEventHandler(t_DragCompleted);
    }
    // Get all CustomAccordionItems in the PART_CategoriesContainer
    var categories = ControlHelper.GetChildObject<StackPanel>(GridFilter, "PART_CategoriesContainer");
    var accordionItems = ControlHelper.GetChildObjects<CustomAccordionItem>(GridFilter);
    foreach (var accordionItem in accordionItems)
    {
        //clear buttons
        var clearButtons = ControlHelper.GetChildObjects<button>(accordionItem, "m_clearButton");
        foreach (var cBtn in clearButtons)
        {
            cBtn.Click -= new RoutedEventHandler(fb_Checked);
            cBtn.Click += new RoutedEventHandler(fb_Checked);
        }

        var filterButtonsWrapper = ControlHelper.GetChildObjects<ScrollContentPresenter>(accordionItem, "ScrollContentPresenter");
        foreach (var wrapper in filterButtonsWrapper)
        {
            var filterButtons = ControlHelper.GetChildObjects<button>(wrapper);
            var filterCheck = ControlHelper.GetChildObjects<ManualToggleButton>(wrapper);
            //attach click to buttons
            foreach (var fb in filterButtons)
            {
                _uiObjects.Push(fb);
                fb.Click += new RoutedEventHandler(fb_Checked);
            }
            //attach click to checkbox's
            foreach (var fc in filterCheck)
            {
                _uiObjects.Push(fc);
                fc.Click += new RoutedEventHandler(fb_Checked);
            }
        }
        //Range Slider
        var rangeSlider = ControlHelper.GetChildObjects<Thumb>(accordionItem);
        foreach (var t in rangeSlider)
        {
            _uiThumbObjects.Push(t);
            t.DragCompleted += new DragCompletedEventHandler(t_DragCompleted);
        }
    }
}

///
/// Collection filtered (via facet accordion button)
///
private void fb_Checked(object sender, RoutedEventArgs e)
{
    // Do something
}

///
/// Collection filtered (via range slider)
///
public void t_DragCompleted(object sender, DragCompletedEventArgs e)
{
    // Do something
}

I’ve put in some place holders for the event handlers, but this is where any custom actions would be placed for updating the UI based on the current filter.

I’ve got more posts on the way, but by applying this code into your extended PivotViewer class it will make adding custom views a whole lot easier.