Silverlight 4 Toolkit Chart Zoom and Pan Extension
- Utilises existing toolkit without modification
- Zoom box functionality
- Mouse wheel zoom functionality
- Pan functionality
- Scroll Functionality
- X Span functionality
OverviewI'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:
[DataVisualization -> Zoom]
The big problem with this is that the axes are scrolled with the chart surface, which is not the desired effect.
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!
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:
The x and y templates are then stripped down to leave just the main named surface and a ScrollViewer:
The main chart template has a ScrollViewer, but also a canvas and a rectangle added for a zoom box:
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:
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.
This has turned out to be quite a good modification to the existing toolkit and hopefully should be helpful to others out there!