Zoom-And-Pan in Windows Forms Diagram

27 Apr 20215 minutes to read

Zooming Support

One of the interactive features of Essential Diagram is its zooming capabilities. This feature allows you to interactively zoom in and out of the diagram in the following ways:

• Zoom to the center of the diagram.
• Zoom to the top left of the diagram.
• Zoom to the pointer position using Ctrl and the mouse wheel.

Use Case Scenarios

Users can zoom in and out of diagram content based on their requirements.

Properties

Property	Description	Data Type
ZoomType	Gets or sets the type of zooming to be performed.	enum
ZoomIncrement	Specifies the amount to zoom each time the diagram is zoomed in or out.	float

Methods

Method	Description	Parameters	Return Type
ZoomIn	Zoom in on the diagram document.	NA	void
ZoomOut	Zoom out of the diagram document.	NA	void
ZoomToSelection	Zoom the diagram document to the specified selection bounds.	RectangleF	void
ZoomToActual	Zoom the document to its actual size.	NA	void

ZoomIn, ZoomOut, ZoomToActual, ZoomToSelection

The diagram document can be zoomed in, zoomed out, zoomed to its original size, and zoomed to a selected area based on the ZoomIncrement. You can use the following methods to zoom in the diagram document.

• ZoomIn()
• ZoomOut()
• ZoomToSelection(RectangleF)
• ZoomToActual()

The following code samples explain how to use the zoom methods to zoom in the diagram programmatically:

C#

//Sets the zoom increment value.
this.diagram1.View.ZoomIncrement = 20;

// Zoom in on the document.
this.diagram1.View.ZoomIn();

// Zoom out of the document.
this.diagram1.View.ZoomOut();  

// Zoom the document to its actual size.
this.diagram1.View.ZoomToActual();  

// Zoom the document to the selection.
this.diagram1.View.ZoomToSelection(new RectangleF(100,100,100,100));

VB.NET

‘Sets the zoom increment value.
Me.diagram1.View.ZoomIncrement = 20

‘Zoom in on the document.
Me.diagram1.View.ZoomIn() 

‘Zoom out of the document.
Me.diagram1.View.ZoomOut() 

‘Zoom the document to its actual size.
Me.diagram1.View.ZoomToActual()    

‘Zoom the document to the selection.
Me.diagram1.View.ZoomToSelection(New RectangleF(100,100,100,100))

Zooming to the Center of the Diagram

The diagram document can be zoomed to the center of the current viewport by setting the ZoomType as Center. The default value of ZoomType is Center.

The following code sample demonstrates how to use the zoom to center feature in a diagram:

C#

// Sets the ZoomType as ‘center’. 
this.diagram1.View.ZoomType = ZoomType.Center;

VB.NET

'Sets the ZoomType as ‘center’. 
Me.diagram1.View.ZoomType = ZoomType.Center

Zooming to the Top-Left of the Diagram

The diagram document can be zoomed to the top-left corner of the viewport by setting the ZoomType as TopLeft.

The following code shows how to use the zoom to top-left feature:

C#

// Sets the ZoomType as TopLeft. 
this.diagram1.View.ZoomType = ZoomType.TopLeft;

VB.NET

' Sets the ZoomType as TopLeft. 
Me.diagram1.View.ZoomType = ZoomType.TopLeft

Zooming to the Pointer Position

Essential Diagram supports zooming the diagram document to the pointer position using Ctrl and the mouse wheel.

ZoomTool

Essential Diagram supports a UI tool called ZoomTool which is used to zoom and select the diagram document interactively. Users can use the ZoomTool’s MaximumMagnification and MinimumMagnification properties to restrict the document’s maximum or minimum zoom levels and use the ZoomIncrement property to specify the amount to zoom each time the diagram is zoomed in or out.

Zoom Tool Properties

Property	Description	Data Type
MaximumMagnification	Specifies the maximum magnification value for zooming. Default value is 1000.	float
MinimumMagnification	Specifies the minimum magnification value for zooming. Default value is 10.	float
ZoomIncrement	Specifies the amount to zoom each time the mouse is clicked.	float

The following code demonstrates how to activate the zoom tool:

C#

diagram1.Controller.ActivateTool("ZoomTool");
ZoomTool zoomTool = (ZoomTool)diagram1.Controller.ActiveTool;
zoomTool.MaximumMagnification = 100;
zoomTool.MinimumMagnification = 50;
zoomTool.ZoomIncrement = 10;

VB.NET

diagram1.Controller.ActivateTool("ZoomTool")
Dim zoomTool As ZoomTool = CType(diagram1.Controller.ActiveTool, ZoomTool)
zoomTool.MaximumMagnification = 100
zoomTool.MinimumMagnification = 50
zoomTool.ZoomIncrement = 10

Panning Support

Pan tool allows the user to drag the diagram and hence scroll it in any direction.

Programmatically, it is implemented as follows.

C#

this.diagram1.Controller.ActivateTool("PanTool");

VB.NET

Me.diagram1.Controller.ActivateTool("PanTool")

Sample diagram is as follows.