Pan and Zoom

In RadDiagram you can easily pan, zoom in or out of your current diagramming structure. This article will get you familiar with the pan and zoom implementation within the RadDiagram.

Pan

RadDiagram exposes an IsPanEnabled property which defines whether the pan operation is allowed. The default value of the property is true. In order to start a panning operation you need to hold down the Ctrl key and drag the view port with the mouse. The pan operation is triggered by a user interaction.

You can also activate the Pan MouseTool to start a pan operation simply by dragging the current view port with the mouse.

this.radDiagram1.IsPanEnabled = true;

Me.RadDiagram1.IsPanEnabled = True

Figure 1: Pan

Pan Methods

You can use the PanToPosition method in order to programmatically pan to a specific position:

this.radDiagram1.PanToPosition(new Telerik.Windows.Diagrams.Core.Point(200, 300));

Me.RadDiagram1.PanToPosition(New Point(200, 300))

Pan events

RadDiagram exposes two panning events:

• PreviewPan: this event is fired before executing the pan operation. Its event handler receives two arguments:

  • The sender argument that contains the RadDiagram instance that fired the event.

  • A PositionChangedRoutedEventArgs object that provides information regarding the current and the next position of the diagram through the OldPosition and NewPosition properties. This event can be handled to cancel a particular pan operation. For that purpose the PositionChangedRoutedEventArgs.Handled property needs to be set to true.

• Pan: this event is raised by the RadDiagram to inform that a pan operation has completed. Its event handler receives two arguments:

  • The sender argument that contains the RadDiagram instance that fired the event.

  • A PositionChangedRoutedEventArgs object that provides information regarding the current and the next position of the diagram through the OldPosition and NewPosition properties.

Please note that if you handle the PreviewPan event, the Pan event will not be fired at all.

Zoom

RadDiagram supports zooming out-of-the-box. The feature is controlled through the RadDiagram. IsZoomEnabled property which default value is true. The user can initiate a zoom using the mouse wheel.

this.radDiagram1.IsZoomEnabled = true;

Me.RadDiagram1.IsZoomEnabled = True

Figure 2: Zoom

The zoom range is controlled through two DiagramConstants:

• MinimumZoom:a double value which indicates the minimum zoom level. Its default value is 0.5.

• MaximumZoom: a double value which indicates the maximum zoom level. Its default value is 5.

Telerik.Windows.Diagrams.Core.DiagramConstants.MinimumZoom = 0.5;
Telerik.Windows.Diagrams.Core.DiagramConstants.MaximumZoom = 10;

Telerik.Windows.Diagrams.Core.DiagramConstants.MinimumZoom = 0.5
Telerik.Windows.Diagrams.Core.DiagramConstants.MaximumZoom = 10

The current zoom value in a RadDiagram instance is controlled through the Zoom property. It represents a double value which cannot be null, infinity or NaN. Additionally, this value is coerced to be within the range defined by the MinimumZoom and MaximumZoom constants. The default Zoom value is 1.

Please note that in the diagramming framework we talk about "zooming out" when the Zoom value is less than 1. Alternatively, a Zoom value greater than 1 is considered a "zoom in".

Zoom methods

By default, the zoom operation uses an arithmetic progression to increase/decrease the zoom. The common difference used to build the progression is calculated based on a zoom factor. If such a value is not specifically defined, then RadDiagram uses the DiagramConstants.ZoomScaleFactor value as a zoom factor.

If you need to initiate a zoom through code-behind, RadDiagram provides two methods:

• ZoomIn: this method performs an incremental zoom in taking into account the previous zoom operations. It can take up to 2 parameters:

  • a double value which indicates a zoom factor.

  • a Point value which indicates the coordinates of the point that should be used as a center of the zoom operation. Please note that if you decide to use this parameter, then you have to make sure the coordinates you provide are in the context of the current view port.

Please note that both of the parameters described above are optional.

this.radDiagram1.DiagramElement.ZoomIn(1.5);

Me.RadDiagram1.DiagramElement.ZoomIn(1.5)

• ZoomOut: this method performs an incremental zoom out taking into account the previous zoom operations. It can take up to 2 parameters:

  • a double value which indicates a zoom factor.

  • a Point value which indicates the coordinates of the point that should be used as a center of the zoom operation. Please note that if you decide to use this parameter, then you have to make sure the coordinates you provide are in the context of the current view port.

Please note that both of the parameters described above are optional.

this.radDiagram1.DiagramElement.ZoomOut(3.5);

Me.RadDiagram1.DiagramElement.ZoomOut(3.5)

• BringIntoView: This method allows you to center the currently occupied space:

private void radButton1_Click(object sender, EventArgs e)
{
    var enclosingBounds = ((IGraph)this.radDiagram1.DiagramElement).CalculateEnclosingBoundsWithoutTransform();
    this.radDiagram1.DiagramElement.BringIntoView(enclosingBounds, false);
    this.radDiagram1.Zoom = 1;
}

Private Sub radButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim enclosingBounds = DirectCast(Me.RadDiagram1.DiagramElement, IGraph).CalculateEnclosingBoundsWithoutTransform()
    Me.RadDiagram1.DiagramElement.BringIntoView(enclosingBounds, False)
    Me.RadDiagram1.Zoom = 1
End Sub

Zoom events

RadDiagram exposes two zooming events:

• PreviewZoom: this event is fired before executing the zoom operation. Its event handler receives two arguments:

  • The sender argument that contains the RadDiagram instance that fired the event.

  • A DiagramZoomEventArgs object that provides information regarding:

    • Zoom: a double value representing the previous zoom value.

    • TargetZoom: a double value that gets or sets the result zoom. By default, this property contains the coerced new zoom value. Please note that if you decide to change that value, it will be coerced first and then applied on the diagramming instance.

    • ZoomPoint: a Point value representing the center point of the zoom operation.

    • IsAnimationRunning: a boolean value indicating whether a zoom animation is currently running. This event can be handled to cancel a particular zoom operation. For that purpose the DiagramZoomEventArgs. Handled property needs to be set to true.

• ZoomChanged: this event is raised by the RadDiagram to inform that a zoom operation has completed. Its event handler receives two arguments:

  • The sender argument that contains the RadDiagram instance that fired the event.

  • A RadRoutedPropertyChangedEventArgs object that provides information regarding the old and the new value of the diagram zoom through the OldValue and NewValue properties.

Please note that if you handle the PreviewZoom event, the ZoomChanged event will not be fired at all.