Search
Scrolling and Zooming

By default MindFusion.Diagramming for .NET MAUI scrollbars are invisible. When the user interacts with the diagram, the scrollbars are temporarily displayed to indicate the current position inside the document.

Diagram Size

The diagram size is set through the Bounds property. Its value is a Rect instance that specifies the origin of the diagram coordinate system and the diagram size. The scrollbar ranges also depend on the current ZoomFactor.

Automatic Scrolling

The AutoScroll property controls automatic scrolling. If it is enabled and the user drags an adjustment handle near the visible edges of the diagram while manipulating an item, the control will scroll the viewport towards in that direction. The ScrollZoneSize property defines the size of the area near the view borders that triggers automatic scrolling.

Programmatic Scrolling

In order to scroll the document content programmatically, you can set the ScrollX and ScrollY properties. These properties can also be used to access the current scroll position in case you need it.

Scrolling Tables

Table rows can be scrolled too. If the Scrollable property is set to true, an up/down scroll button is displayed in the table's caption area. By means of this button users can scroll the rows of the table. Scrolling can also be done programmatically using the CurrentScrollRow property.

Zooming

Zooming is controlled via the ZoomFactor property. The zoom factor is expressed as a percentage, 100% meaning no zoom. Higher than 100% makes the diagram items look closer and bigger on the screen  zooming in. Less than 100% makes items look further and smaller on screen  zooming out.

Panning

The user can click on the compass arrow at the bottom-right corner of the diagram to activate pan mode. While in pan mode dragging inside the diagram scrolls the diagram and pinching inside the diagram either zooms in or out the view. The compass icon can be shown or hidden through the ShowScrollToggle property. The control can be set in pan mode permanently by setting the Behavior property of the DiagramView class to Pan.

On desktop platforms, the diagram view can be panned by holding ALT while dragging the mouse with the left button down. A different modifier key can be used for panning by setting ModifierKeyActions.