Silverlight 4 Toolkit Chart Zoom and Pan Extension

Silverlight 4 Toolkit Chart Zoom and Pan Extension

Features

• Utilises existing toolkit without modification
• Zoom box functionality
• Mouse wheel zoom functionality
• Pan functionality
• Scroll Functionality
• X Span functionality

Overview

I've been working on a project which uses the Silverlight 4 Toolkit chart control. The control is great, however there is no real zoom functionality which is a problem.

Here is an example given where the charts template is moidified to provide a ScrollViewer wrapper for the chart panel which allows you to zoom the whole chart and scroll around it:

http://www.silverlight.net/content/samples/sl4/toolkitcontrolsamples/run/default.html

[DataVisualization -> Zoom]

The big problem with this is that the axes are scrolled with the chart surface, which is not the desired effect.

Solution
I thought about this for a while and came up with a solution without modifying the source.

It was clear that the problem stemmed from the fact that the axes were not independent of the plot surface, but this could be easily solved by using a grid with 3 plot surfaces to hold the main plot surface and X and Y axes:

The scroll behaviour of the axes plot surfaces can be tied to the main plot surface to make it appear as though they were one piece!

Layout
Each panel requires a chart control and a customised template. The controls are added to the grid. The next step is to hide the axes on the main plot surface, this can't be done manipulating individual templates for each of the 3 chart areas and styling out the axis features:

<Style x:Key ="zoomChartMajorTickMarkStyle" TargetType="Line">
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>
            <Style x:Key ="zoomChartAxisLabelStyle" TargetType="chartingToolkit:AxisLabel">
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>
            <Style x:Key ="zoomChartHiddenPointStyle" TargetType="chartingToolkit:LineDataPoint">
                <Setter Property="Visibility" Value="Collapsed" />
            </Style>

The x and y templates are then stripped down to leave just the main named surface and a ScrollViewer:

<ControlTemplate TargetType="chartingToolkit:Chart" x:Key="ZoomXTemplate">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="0">
                    <Grid>
                        <ScrollViewer
                        x:Name="ChartScrollArea" BorderThickness="0"
                        HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" LayoutUpdated="XScrollArea_LayoutUpdated">
                            <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}" />
                        </ScrollViewer>
                    </Grid>
                </Border>
            </ControlTemplate>

The main chart template has a ScrollViewer, but also a canvas and a rectangle added for a zoom box:

<ControlTemplate TargetType="chartingToolkit:Chart" x:Key="ZoomChartTemplate">
                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}" Padding="0">
                    <Grid>
                        <Canvas x:Name="ZoomCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Canvas.ZIndex="2">
                            <Rectangle x:Name="ZoomBox" Height="100" Width="100"
                                   Canvas.ZIndex="2" Fill="#FFA3AEB9"  Opacity="0.4" Visibility="Collapsed"
                                   Canvas.Left="10" Canvas.Top="10">
                            </Rectangle>
                        </Canvas>
                        <ScrollViewer x:Name="ChartScrollArea" BorderThickness="0"
                        HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden" MouseLeftButtonUp="ChartScrollArea_MouseLeftButtonUp" MouseLeftButtonDown="ChartScrollArea_MouseLeftButtonDown" Loaded="ChartScrollArea_Loaded" MouseMove="ChartScrollArea_MouseMove">
                            <chartingPrimitivesToolkit:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                <Grid Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                <Border Canvas.ZIndex="1" BorderBrush="#FF919191" BorderThickness="1" />
                            </chartingPrimitivesToolkit:EdgePanel>
                        </ScrollViewer>
                    </Grid>
                </Border>
            </ControlTemplate>

Code
There is a lot of code for working out the zoom geometry (this took some time to work out, but works nicely) which can be seen in the full code, but the main point to note is when the data is bound to the chart, the X and Y axes have a dummy series placed on them with 2 data points at their extremities to make them size correctly and match the main chart. Here is how the X axis is configured:

private void SizeXAxis(DateTime min, DateTime max)
        {
            // Set X axis limits with a dummy series
            List<AxisPoint> points = new List<AxisPoint>();
            points.Add(new AxisPoint(min, 0));
            points.Add(new AxisPoint(max, 0));
            LineSeries xSeries = new LineSeries();
            xSeries.ItemsSource = points;
            xSeries.IndependentValueBinding = new System.Windows.Data.Binding("Date");
            xSeries.DependentValueBinding = new System.Windows.Data.Binding("Value");
            xSeries.Width = 0;
            xSeries.DataPointStyle = this.Resources["zoomChartHiddenPointStyle"] as Style;
            this.ZoomXAxis.Series.Add(xSeries);
        }

Full XAML
The XAML and C# basically recycle the WidgetPopularityPollCollection class and the GizmoPopularityPollCollectionon class from the Silverlight Toolkit 4 samples. So it should be fairly easy to get working. I'll try and get the full solution uploaded somewhere.

http://slchartzoomandpan.codeplex.com/

Full C#

http://slchartzoomandpan.codeplex.com/

Conclusion
This has turned out to be quite a good modification to the existing toolkit and hopefully should be helpful to others out there!