Zoom Command in WPF Diagram (SfDiagram)

28 Jun 20246 minutes to read

The Zoom commands are used to do zoom-in and zoom-out operations on the Diagram view. This command is also used to do scroll and pan operations with its parameter.

To execute zoom commands, parameter of type ZoomPositionParameter have 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>
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>
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>
IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

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

ZoomTo

For Panning

IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

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

For HorizontalScroll

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

<Button Height="50" Content="HorizontalScroll" Name="HorizontalScroll" Command="Syncfusion:DiagramCommands.Zoom" CommandParameter="{StaticResource HorizontalScrollParameter}"></Button>
IGraphInfo graphinfo = diagramcontrol.Info as IGraphInfo;

// For horizontal scroll
graphinfo.Commands.Zoom.Execute(new ZoomPositionParameter()
{
    ZoomCommand = ZoomCommand.HorizondalScroll,
    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>
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.

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