Zoom Command in WPF Diagram (SfDiagram)

21 Sep 20238 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, IZoomParameter type IZoomPositionParameter have to be passed.

Zoom position parameter

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

Property name Description
FocusPoint It is used to set the point of foucus when zooming. Usually used to specify a particular point in the diagram view.
PanDelta It is used to set the finite increament in the pan value.
ScrollDelta It is used to set the finite increament in the scroll value.
ZoomCommand It is used to set the opertaion to be performed.
ZoomFactor It is used to set the percentage of scale value for each ZoomIn or ZoomOut functionalities.
ZoomTo It is used to set the zoom to a particular 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 gif

For ZoomTo speciffic 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 gif

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 gif

Reset

The Reset command is used to reset horizontal Offset, vertical Offset, and zoom level of the Diagram. If you want to customize the Reset command, you can use the IReset as parameter.

ResetParameter

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

Reset Enum Values Description
None It is used to disables all the behaviors of the Reset Command.
Pan It is used to specifies to reset the panned diagram.
Zoom It is used to specifies to reset the zoomed diagram.
ZoomPan It is used to Specifies to reset 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