In my previous blog post, Silverlight Chart Drilldown: Part One, I described the steps necessary to create a drill-down chart using ComponentArt's Silverlight Chart. To navigate backwards to higher levels of drill-down we used a simple button that would take us back one level at a time. In this blog post I will explain how to use ComponentArt's BreadCrumb control to be able to navigate better during drill-down. A BreadCrumb control will allow us to go back multiple drill levels at a time as well as provide us with a visual representation of the current drill level.

First, we need to add a reference to our project to the navigation assembly which contains the BreadCrumb control. Also, we need to add a reference to the Navigation namespace to our CS and XAML files.

xmlns:Navigation="clr-namespace:ComponentArt.Silverlight.UI.Navigation;assembly=ComponentArt.Silverlight.UI.Navigation"

using ComponentArt.Silverlight.UI.Navigation;

In the XAML code for our user control we will replace the Back Button with a BreadCrumb control that is the same width as our chart.

 <Navigation:BreadCrumb x:Name="ChartBreadCrumb" HideSplitButton="True" Width="400" Height="26" />

At load time, we will create the whole BreadCrumb structure. Each possible chart in our drill-down sequence will have a corresponding BreadCrumbItem. First, we will start with the BreadCrumbItem representing the top most chart. To its Items collection we will add BreadCrumbItems representing all the charts that can be obtained by drilling once into the top level chart. This process will continue in a similar fashion until we have created all possible BreadCrumbItems.

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    drillDownManager.SetupBreadCrumbs(ChartBreadCrumb);
}

public void SetupBreadCrumbs(BreadCrumb breadCrumb)
{
    chartBreadCrumb = breadCrumb;

    BreadCrumbItem topBC = new BreadCrumbItem() { Text = "1990's" };
    topBC.Tag = new BreadCrumbTag(0, new DateTime(1991,1,1), new DateTime(2001,1,1));

    for (int year = 1991; year < 2001; year++)
    {
        BreadCrumbItem yearBC = new BreadCrumbItem() { Text = "Year: " + year };
        yearBC.Tag = new BreadCrumbTag(1, new DateTime(year, 1, 1), new DateTime(year, 1, 1).AddYears(1));

        for (int month = 1; month <= 12; month++)
        {
            BreadCrumbItem monthBC = new BreadCrumbItem() { Text = "Month: " + (new DateTime(year, month, 1)).ToString("MMM")};
            monthBC.Tag = new BreadCrumbTag(2, new DateTime(year, month, 1), new DateTime(year, month, 1).AddMonths(1));
            yearBC.Items.Add(monthBC);
        }
        topBC.Items.Add(yearBC);
    }

    chartBreadCrumb.RootItem.Items.Add(topBC);
    chartBreadCrumb.RefreshTree();
    chartBreadCrumb.SelectedItem = topBC;
    chartBreadCrumb.BreadCrumbClick += new BreadCrumb.BreadCrumbClickEventHandler(ChartBreadCrumb_BreadCrumbClick);
}

Notice that to each BreadCrumbItem I have assigned a Tag that will keep track of the drill level that corresponds to the BreadCrumbItem and the start of the x-range for the corresponding chart which will allow us to find the right BreadCrubItem during drill-down.

There are two more items that need to be taken care of. First, we need to initiate a back action when a BreadCrumbItem is clicked (clicking on the item that corresponds to the current chart does nothing). Depending on the drill level we might need to execute a multiple back action.

private void ChartBreadCrumb_BreadCrumbClick(object sender, BreadCrumbCommandEventArgs bcce)
{
    int newDrillLevel = (bcce.ItemSource.Tag as BreadCrumbTag).DrillLevel;
    if (drillLevel != newDrillLevel)
        Back(drillLevel - newDrillLevel);
}

Second, we need to select a new BreadCrumbItem after a drill-down action was performed. This will be done in the DrillStepCompleted event handler.

void SalesDrillDownManager_DrillStepCompleted(object sender, DrillDownEventArgs e)
{
    if (chartBreadCrumb != null)
    {
        foreach (BreadCrumbItem bItem in chartBreadCrumb.SelectedItem.Items)
        {
            if ((DateTime)((Series)CurrentChart.DataSeries[0]).DataPoints[0].X == (bItem.Tag as BreadCrumbTag).RangeStart)
            {
                chartBreadCrumb.SelectedItem = bItem;
                break;
            }
        }
    }

Now we have a fully functional BreadCrumb control that compliments our drilldown chart and gives us a more powerful navigation interface.

The code discussed in this blog can be found here.