Scrolling and Zooming

Diagram Size

The diagram size is set via the Bounds property. Its value is a RectangleF instance, which describes the size of the diagram scrollable area. If the ShowScrollbars property is set to true, than the scrollbars are automatically updated - size, position and scrolling page size.

Scrolling Tables

Table rows can be scrolled. 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 by the ZoomFactor property. The zoom factor is expressed in percents, 100% meaning no zoom. Higher than 100% makes the document items look closer and bigger on the screen - zooming in. Less than 100% makes items look further and smaller on screen - zooming out. To zoom and scroll the view to fit the diagram contents to the control's client area, call zoomToFit. To zoom and scroll the view so it fits a specified rectangular document area to the control's client area, call zoomToRect.

Lasso Zoom Tool

The control supports several ways to zoom using lasso tool:

Set the Behavior property to Zoom to always draw zoom lasso.
Set the Zoom flag for one of the keys in modifierKeyActions to let users draw zoom-lasso with respective modifier key pressed and the left mouse button.
Assign Zoom value to rightButtonActions or middleButtonActions property to zoom using respective mouse button.

Zoom Control

The ZoomControl class lets user change interactively the current zoom level and scroll position of a DiagramView. To set it up, add a <ZoomControl> element to the page (possibly placing it on top of DiagramView's one), and set the control's TargetId property to that view's id. Set the ZoomStep and ScrollStep properties to specify the amount added to view's zoom level or scroll position by ZoomControl's buttons. You can customize the control's appearance by setting properties such as Fill, BorderColor, CornerRadius and TickPosition. For an example, see the Samples\C#\Controls sample project from distribution.

Magnifying

The DiagramView provides an option for zooming in (or out) portions of the diagram through the Magnifier tool. To show the magnifier when a mouse button is pressed, assign the Magnify value to the view's Behavior property.

The magnification factor can be specified via the MagnifierFactor property. The size of the tool and its border thickness can be set through the MagnifierWidth, MagnifierHeight and MagnifierFrameThickness properties.

Panning

The diagram view can be panned by holding ALT while dragging the mouse with the left button down. Another modifier key can be used for panning by setting modifierKeyActions. The middleButtonActions and rightButtonActions properties let you use the middle or right mouse button to start panning. To let users pan the view with the left mouse button without using a modifier key, set the behavior property of DiagramView to Pan or PanAndModify.