SciChart WPF 2D Charts > Tutorials > Code-Behind > Tutorial 04 - Adding Zooming, Panning Behavior
Tutorial 04 - Adding Zooming, Panning Behavior

Following on from Tutorial 03 - Adding Series to a Chart where we created some series, we will now add zooming, panning behaviors to the chart.

Source code for this tutorial can be found at our SciChart.WPF.Examples Github Repository under Tutorials section.

Adding Zooming, Panning Behaviors

So far in the tutorial series, we have created a new chart, added an XAxis, YAxis, some series and also some simple zoom modifiers.

We're going to extend this now to add zoom, pan behaviour to the chart. Modify the XAML from Tutorial 03 - Adding Series to the chart as follows.

Adding Zoom, Pan Behaviours
Copy Code
<Window x:Class="SciChart.Tutorial.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
         mc:Ignorable="d"
         Title="MainWindow" Height="350" Width="525">
     <Grid>
         <s:SciChartSurface x:Name="sciChartSurface">
           
             <s:SciChartSurface.RenderableSeries>
                 <s:FastLineRenderableSeries x:Name="LineSeries" Stroke="#FF4083B7"/>
                 <s:XyScatterRenderableSeries x:Name="ScatterSeries" >
                     <s:XyScatterRenderableSeries.PointMarker>
                         <s:EllipsePointMarker Width="7" Height="7" Fill="#FFF" Stroke="SteelBlue"/>
                     </s:XyScatterRenderableSeries.PointMarker>
                 </s:XyScatterRenderableSeries>
             </s:SciChartSurface.RenderableSeries>
            <s:SciChartSurface.XAxis>
                 <s:NumericAxis AxisTitle="Number of Samples (per Series)"/>
             </s:SciChartSurface.XAxis>
             <s:SciChartSurface.YAxis>
                 <s:NumericAxis AxisTitle="Value"/>
             </s:SciChartSurface.YAxis>
            <!-- Add Zooming, Panning behaviours to the chart -->
             <!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
             <s:SciChartSurface.ChartModifier>
                 <s:ModifierGroup>
                     <!-- Allow drag to zoom on Left mouse -->
                     <s:RubberBandXyZoomModifier ExecuteOn="MouseLeftButton"
                                                 RubberBandFill="#33FFFFFF" RubberBandStroke="#AAFFFFFF"
                                                 RubberBandStrokeDashArray="2 2"/>
                     <!-- Allow pan on Right mouse drag -->
                     <s:ZoomPanModifier ExecuteOn="MouseRightButton" ClipModeX="None" />
                     <!-- Allow Dragging YAxis to Scale -->
                     <s:YAxisDragModifier DragMode="Scale"/>
                     <!-- Allow Dragging XAxis to Pan -->
                     <s:XAxisDragModifier DragMode="Pan"/>
                     <!-- Allow Mousewheel Zoom -->
                     <s:MouseWheelZoomModifier/>
                     <!-- Allow Zoom to Extents on double click -->
                     <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
                 </s:ModifierGroup>
             </s:SciChartSurface.ChartModifier>
           
             <s:SciChartSurface.Annotations>
                 <s:TextAnnotation Text="Hello world!" X1="5.0" Y1="5"/>
             </s:SciChartSurface.Annotations>
         </s:SciChartSurface>
     </Grid>
 </Window>

The above code adds a number of ChartModifiers to the ScIChartSurface.

Now build and run the chart!

This is what you should see. Try dragging with left/right mouse buttons, dragging axis, using mousewheel and double clicking on the chart.

 

Adding a Scrollbar

Scrollbars can be added to the chart using the SciChartScrollBar API. We will add one to the example so far by using the following XAML:

Adding a Scrollbar in XAML
Copy Code
<Window x:Class="SciChart.Tutorial.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
         mc:Ignorable="d"
         Title="MainWindow" Height="350" Width="525">
    <Grid Background="#222">
        <!-- Add some RowDefinitions -->
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
       
        <s:SciChartSurface x:Name="sciChartSurface">
            ...
        </s:SciChartSurface>
       
        <!-- Add a Scrollbar, and bind to SciChartSurface.XAxis -->
        <s:SciChartScrollbar Grid.Row="1" Axis="{Binding ElementName=sciChartSurface, Path=XAxis}"/>
    </Grid>
</Window>

Now run the chart again and you will notice the scrollbar which updates as you zoom and pan the chart. You can also grab the left/right edges of the Scrollbar or drag the center to move the chart.

Further Reading...

Each modifier above has it's own configuration properties and are worthy of an article each! You can find out more be clicking the links below.