Version

Chart Navigation

Topic Overview

Purpose

This topic demonstrates, with code examples, the navigation use properties in the XamDataChart™ control and their use.

Required background

The following table lists the topics required as a prerequisite to understanding this topic.

Topic Purpose

This topic provides an overview of key features in the XamDataChart control.

In this topic

This topic contains the following sections

Introduction

In the XamDataChart control, chart navigation is disabled by default. Follow the instructions in the this section in order to enable it. The property configuration shown in the Recommended Value column in the table below, enables chart navigation and displays the navigation zoom bars in the chart.

Property Name Type Description Default Value Recommended Value

InteractionState

Configures whether mouse dragging within the chart plot area will zoom or pan the content of chart. The valid values are

  • DragZoom

  • DragPan

  • None

DragZoom

DragZoom

Boolean

When True, enables horizontal zooming of the chart.

False

True

Visibility

Changes visiblity of the horizontal zoom bar in the chart.

Collapsed

Visible

Boolean

When True, enables vertical zooming of the chart.

False

True

Visibility

Changes visiblity of the vertical zoom bar in the chart.

Collapsed

Visible

ModifierKey

Sets the modifier key to use to trigger zooming.

None

Control

ModifierKey

Sets the modifier key to use to trigger panning.

Shift

Shift

Code Example

The following code snippet demonstrates how to enable chart navigation in the XamDataChart control.

In XAML:

<ig:XamDataChart x:Name="Chart"
                IsHorizontalZoomEnabled="True"
                IsVerticalZoomEnabled="True">
</ig:XamDataChart>

In Visual Basic:

Dim chart As New XamDataChart()
chart.IsHorizontalZoomEnabled = true
chart.IsVerticalZoomEnabled = true

In C#:

var chart = new XamDataChart();
chart.IsHorizontalZoomEnabled = true;
chart.IsVerticalZoomEnabled = true;

Code Snippet for DragModifier set to Shift OR Control

Sometimes, you may want to allow multiple modifier keys to trigger the behavior. To achieve this you should handle the XamDataChart's PreviewKeyDown event and write some logic to change the DragModifier or PanModifier based on the key being pressed. Please see the code snipper below for an example.

In C#:

private void xamDataChart1_PreviewKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.LeftShift | e.Key == Key.RightShift)
    {
        (sender as XamDataChart).DragModifier = ModifierKeys.Shift;
    }
    if (e.Key == Key.LeftCtrl | e.Key == Key.RightCtrl)
    {
        (sender as XamDataChart).DragModifier = ModifierKeys.Control;
    }
}

In Visual Basic:

Public Sub XamDataChart1_PreviewKeyDown(ByVal sender As Object, ByVal e As KeyEventArgs)

    If e.Key = Key.LeftShift OrElse e.Key = Key.RightShift Then
        CType(sender, XamDataChart).DragModifier = ModifierKeys.Shift
    End If
    If e.Key = Key.LeftCtrl OrElse e.Key = Key.RightCtrl Then
        CType(sender, XamDataChart).DragModifier = ModifierKeys.Control
    End If

End Sub

Related Content

Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic provides information on how to navigate chart in code-behind

This topic provides information on how to navigate chart using mouse and keyboard

This topic provides information on how to navigate chart using touch gestures

This topic provides information on how to navigate chart using the Overview Plus Detail Pane