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 either hold down the Ctrl key and drag the viewport with the mouse or use a swipe touch gesture. In both cases 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 viewport with the mouse.

The DiagrammingFramework also provides a built-in pan animation. By default this animation isn't activated which means that you have to manually activate it in case you need to utilize it in your solution. The animation can be set through the DiagramAnimations.IsPanAnimationEnabled attached property.

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.

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 or a pinch touch gesture.

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.

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".

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 3 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 viewport.

a boolean value indicating whether animations should be used during the zoom in operation.

Please note that all 3 parameters described above are optional.

ZoomOut() - this method performs an incremental zoom out taking into account the previous zoom operations. It can take up to 3 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 viewport.

a boolean value indicating whether animations should be used during the zoom out operation.

Please note that all 3 parameters described above are optional.

Below you can find a few examples demonstrating how you can use RadDiagram ZoomIn() and ZoomOut() methods:

Zooming in and out with a custom factor:

//zoom in with a factor of 0.67
private void CustomZoomIn()
{
this.xDiagram.ZoomIn(0.67);
}
//zoom out with a factor of 0.67
private void CustomZoomOut()
{
this.xDiagram.ZoomOut(0.67);
}

'zoom in with a factor of 0.67'
Private Sub CustomZoomIn()
Me.xDiagram.ZoomIn(0.67)
End Sub
'zoom out with a factor of 0.67'
Private Sub CustomZoomOut()
Me.xDiagram.ZoomOut(0.67)
End Sub

Zooming in and out around a center point:

//zoom in around the point with coordinates of (125,200)
private void ZoomIn(object sender, RoutedEventArgs e)
{
this.xDiagram.ZoomIn(null,new Point(125, 200));
}
//zoom out around the point with coordinates of (100,125)
private void ZoomOut(object sender, RoutedEventArgs e)
{
this.xDiagram.ZoomOut(null,new Point(100,125));
}

'zoom in around the point with coordinates of (125,200)'
Private Sub ZoomIn(sender As Object, e As RoutedEventArgs)
Me.xDiagram.ZoomIn(Nothing, New Point(125, 200))
End Sub
'zoom out around the point with coordinates of (100,125)'
Private Sub ZoomOut(sender As Object, e As RoutedEventArgs)
Me.xDiagram.ZoomOut(Nothing, New Point(100, 125))
End Sub

Zooming in and out around a center point with a customized zoom factor:

//zoom in around the point with coordinates of (125,200) with a zoom factor of 0.67
private void ZoomIn(object sender, RoutedEventArgs e)
{
this.xDiagram.ZoomIn(0.67,new Point(125, 200));
}
//zoom out around the point with coordinates of (100,125) with a zoom factor of 0.67
private void ZoomOut(object sender, RoutedEventArgs e)
{
this.xDiagram.ZoomOut(0.67,new Point(100,125));
}

'zoom in around the point with coordinates of (125,200) with a zoom factor of 0.67'
Private Sub ZoomIn(sender As Object, e As RoutedEventArgs)
Me.xDiagram.ZoomIn(0.67, New Point(125, 200))
End Sub
'zoom out around the point with coordinates of (100,125) with a zoom factor of 0.67'
Private Sub ZoomOut(sender As Object, e As RoutedEventArgs)
Me.xDiagram.ZoomOut(0.67, New Point(100, 125))
End Sub

The DiagrammingFramework also provides a built-in zoom animation. By default this animation is activated, but you can easily deactivate and activate it again through the DiagramAnimations.IsZoomAnimationEnabled attached property.

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.

As described above, the zoom operation uses an arithmetic progression to increase/decrease the zoom. By default the common difference used to build the progression is 0.5. This is why once you start zooming in, the RadDiagram Zoom value changes like follows: 1->1.5->2->2.5...

If you need to change the default behavior, the best place to plug-in and customize that logic, is the RadDiagram PreviewZoom event. Below we will examine two examples of a customized zoom:

1. Zooming RadDiagram using a geometric progression so that the Zoom value changes in the following manner: 1->1.5->2.25->3.75... This means that we need to use a common ratio of 1.5: