Zoom Command in WPF Diagram

18 Nov 20187 minutes to read

The Zoom commands are used to perform zoom-in and zoom-out operations on the WPF SfDiagram view. This command is also used to do scroll and pan operations through its parameters.

To execute zoom commands, parameter of type ZoomPositionParameter has to be passed.

Zoom position parameter

The ZoomPositionParameter is used to represent the position parameters for executing the zoom command. Please find its properties and their descriptions as follows.

Property name Description
FocusPoint It is used to set the point of focus when zooming, usually used to specify a particular point within the diagram view.
PanDelta It is used to set the finite increment in the pan value.
ScrollDelta It is used to set the finite increment in the scroll value.
ZoomCommand It is used to set the operation to be performed.
ZoomFactor It is used to set the percentage scale value for each ZoomIn or ZoomOut operation.
ZoomTo It is used to set the zoom level to a specific value.

For ZoomIn operation

<Syncfusion:ZoomPositionParameter ZoomCommand="ZoomIn" ZoomFactor="0.2" x:Key="ZoomInParameter"/>

<Button Height="50" Content="ZoomIn" Name="ZoomIn" Command="Syncfusion:DiagramCommands.Zoom" CommandParameter="{StaticResource ZoomInParameter}"></Button>
//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// For ZoomIn function
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.ZoomIn,
    ZoomFactor = 0.2,
});

For ZoomOut operation

<Syncfusion:ZoomPositionParameter ZoomCommand="ZoomOut" ZoomFactor="0.2" x:Key="ZoomOutParameter"/>

<Button Height="50" Content="ZoomOut" Name="ZoomOut" Command="Syncfusion:DiagramCommands.Zoom" CommandParameter="{StaticResource ZoomOutParameter}"></Button>
//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// For ZoomOut function
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.ZoomOut,
    ZoomFactor = 0.2,
});

ZoomIn and ZoomOut

For ZoomTo specific value

<Syncfusion:ZoomPositionParameter ZoomCommand="Zoom" ZoomTo="2" x:Key="ZoomToParameter"/>

<Button Height="50" Content="ZoomTo" Name="ZoomTo" Command="Syncfusion:DiagramCommands.Zoom" CommandParameter="{StaticResource ZoomToParameter}"></Button>
//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// For ZoomTo specific value
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.Zoom,
    ZoomTo = 2,
});

ZoomTo

For Panning

//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// For horizontal scroll
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.HorizontalScroll,
    ScrollDelta = 50,
});

For HorizontalScroll

<Syncfusion:ZoomPositionParameter ZoomCommand="HorizontalScroll" ScrollDelta="5" x:Key="HorizontalScrollParameter"/>

<Button Height="50" Content="HorizontalScroll" Name="HorizontalScroll" Command="Syncfusion:DiagramCommands.Zoom" CommandParameter="{StaticResource HorizontalScrollParameter}"></Button>
//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// For horizontal scroll
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.HorizontalScroll,
    ScrollDelta = 50,
});

For VerticalScroll

<Syncfusion:ZoomPositionParameter ZoomCommand="VerticalScroll" ScrollDelta="50"  x:Key="ZoomPositionCommandParameter"/>

<Button Height="50" Content="VerticalScroll" Name="VerticalScroll" Command="Syncfusion:DiagramCommands.Zoom" CommandParameter="{StaticResource ZoomPositionCommandParameter}"></Button>
//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = Diagram.Info as IGraphInfo;

// For vertical scroll
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.VerticalScroll,
    ScrollDelta = 50,
});

Scroll and pan

Reset

The Reset command is used to reset HorizontalOffset, VerticalOffset, and CurrentZoom of the Diagram. If you want to customize the Reset command, you can use the parameter of type ResetParameter.

The ResetParameter allows you to control which view settings are restored. Use Pan to reset only the diagram position, Zoom to reset only the zoom level, and ZoomPan to reset both the zoom level and diagram position. Choose the appropriate reset mode based on the aspect of the diagram view that you want to restore.

ResetParameter

The Reset parameter is used to define the behavior of the Reset Command.

Reset Enum Values Description
None It is used to disable all behaviors of the Reset Command.
Pan It specifies resetting the panned diagram.
Zoom It specifies resetting the zoomed diagram.
ZoomPan It specifies resetting both the zoomed and panned diagram. 
<Syncfusion:ResetParameter Reset="ZoomPan" x:Key="ResetParameterCommandParameter"/>

<Button Height="50" Content="Reset" Name="Reset" Command="Syncfusion:DiagramCommands.Reset" CommandParameter="{StaticResource ResetParameterCommandParameter}"></Button>
//Initialize the Diagram 
SfDiagram diagramcontrol = new SfDiagram();

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// Reset the Zoom level of the Diagram
graphinfo.Commands.Reset.Execute(new ResetParameter() { Reset = Reset.ZoomPan });

View sample in GitHub

See Also

How to Fit Selected Nodes and Connectors to the WPF Diagram Window?