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

< s:SciChartSurface.ChartModifier > <!-- Ensure ModifierGroup DataContext is the MainViewModel (not the ChartViewModel)--> < s:ModifierGroup > < 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:

_enableZoom = value; OnPropertyChanged( "EnableZoom" ); if (_enableZoom) EnablePan = false ; private bool _enablePan; public bool EnablePan get { return _enablePan; } 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.

<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>
        <!-- Don't forget to add Grid.Row=1 -->
        <s:SciChartSurface Grid.Row="1"
                            RenderableSeries="{s:SeriesBinding RenderableSeries}">
                            ChartTitle="{Binding ChartTitle}"
            <s:SciChartSurface.XAxis>
                <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
            </s:SciChartSurface.XAxis>
            <s:SciChartSurface.YAxis>
                <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>
            </s:SciChartSurface.YAxis>
            <s:SciChartSurface.ChartModifier>
                <!-- Ensure ModifierGroup DataContext is the MainViewModel (not the ChartViewModel)-->
                <s:ModifierGroup >
                    <s:RubberBandXyZoomModifier IsEnabled="{Binding EnableZoom}" />
                    <s:ZoomPanModifier IsEnabled="{Binding EnablePan}" ClipModeX="None" />
                    <s:ZoomExtentsModifier/>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>
        </s:SciChartSurface>
    </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!

Sitemap | Email us to give feedback!