WPF Charting Documentation - SciChart WPF Charts SDK v5.x
Tutorial 04b - Adding Zooming, Panning to a Chart with MVVM

Adding Zooming, Panning Behavior in MVVM

Zooming, Panning behavior can be added as belfore, by defining a group of ChartModifiers in XAML. 

Add this code to your SciChartSurface in the MainWindow.xaml. This code delcares a set of ChartModifiers and binds IsEnabled to properties in the MainViewModel

XAML for ChartModifiers
Copy Code
...
<s:SciChartSurface>
    ...
    <s:SciChartSurface.ChartModifier>
        <!-- Ensure ModifierGroup DataContext is the MainViewModel (not the ChartViewModel)-->
        <s:ModifierGroup DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" >
            <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}" />
            <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None" />
            <s:ZoomExtentsModifier/>
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>
    ...
</s:SciChartSurface>

Next, add the following properties to your MainViewModel code as well:

Properties to add to MainViewModel.cs
Copy Code
...
private bool _enableZoom = true;
public bool EnableZoom
{
    get { return _enableZoom; }
    set
    {
        if (_enableZoom != value)
        {
            _enableZoom = value;
            OnPropertyChanged("EnableZoom");
            if (_enableZoom) EnablePan = false;
        }
    }
}
private bool _enablePan;
public bool EnablePan
{
    get { return _enablePan; }
    set
    {
        if (_enablePan != value)
        {
            _enablePan = value;
            OnPropertyChanged("EnablePan");
            if (_enablePan) EnableZoom = false;
        }
    }
}

To wire it all up, we need two checkboxes to bind to EnablePan and EnableZoom as well. We will be able to use them to toggle between the Zoom and Pan modifier. Add the following code so that your MainView.xaml looks like this.

MainWindow.xaml showing ChartModifier checkboxes
Copy Code
<Window x:Class="SciChart.Mvvm.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:local="clr-namespace:SciChart.Mvvm.Tutorial"
        xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
        mc:Ignorable="d"
        Title="MainWindow" Height="550" Width="800">
    <Window.Resources>
        <local:MainViewModel x:Key="MainViewModel"/>
    </Window.Resources>
    <Grid DataContext="{StaticResource MainViewModel}">
       
        <!-- New code here. Add RowDefinitions -->
        <Grid.RowDefinitions>
            <RowDefinition Height="32"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!-- New code here: Add controls to toggle between zoom and pan -->
        <StackPanel Orientation="Horizontal" Background="#333">
            <CheckBox Margin="5" Foreground="#FFF" Content="Enable Zoom?" IsChecked="{Binding EnableZoom, Mode=TwoWay}"/>
            <CheckBox Margin="5" Foreground="#FFF" Content="Enable Pan?" IsChecked="{Binding EnablePan, Mode=TwoWay}" />
        </StackPanel>
        <!-- END NEW CODE -->
        <ItemsControl x:Name="itemsControl" ItemsSource="{Binding ChartViewModels}" Grid.Row="1">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <s:SciChartSurface ChartTitle="{Binding ChartTitle}"
                                       RenderableSeries="{s:SeriesBinding RenderableSeries}">
                        <s:SciChartSurface.XAxis>
                            <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
                        </s:SciChartSurface.XAxis>
                        <s:SciChartSurface.YAxis>
                            <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>
                        </s:SciChartSurface.YAxis>
                        <!-- New code here. Add the ChartModifiers to the SciChartSurface -->
                        <s:SciChartSurface.ChartModifier>
                            <!-- Ensure ModifierGroup DataContext is the MainViewModel (not the ChartViewModel)-->
                            <s:ModifierGroup DataContext="{Binding Path=DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}" >
                                <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}" />
                                <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None" />
                                <s:ZoomExtentsModifier/>
                            </s:ModifierGroup>
                        </s:SciChartSurface.ChartModifier>
                    </s:SciChartSurface>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Rows="1"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Window>

Now run the application, you should be able to toggle between Zoom and Pan mode and drag on the chart to zoom. You can also double click to zoom extents!

 

 


SCICHART ® is a Registered Trademark in the UK, US and EEC. Copyright SciChart Ltd 2011-2018.

Email us to give feedback!