The Ruler control provides horizontal and vertical scales that help users measure and align diagram items. Place the DiagramView element as a child of the Ruler one to establish the binding between them:

Razor  Copy Code
<Ruler>     <DiagramView @ref="diagramView" /> </Ruler>

The ruler tracks mouse movements and modifications being performed on an item, and displays markers over the scales indicating the current position in diagram's coordinate system. The colors of these markers can be changed using the PointerColor and ProjectionColor properties.

If EnableGuides is set to true, the ruler allows aligning several items by clicking on a scale and dragging. That displays alignment guides which follow the mouse pointer and move all selected items on their way. If no diagram elements are selected, all items are moved.

To specify the ruler unit, assign an instance of the MeasureUnit class to the MeasureUnit property. You can either use one of the predefined values (Millimeter, Inch, Pixel, and so on) or create a custom MeasureUnit. In order to specify different divisions for an existing unit, create a custom unit using the appropriate constructor. The following example illustrates how to change the divisions of the Inch unit from 8 (which is the default for inch) to 10:

System.Object
    Microsoft.AspNetCore.Components.ComponentBase
        MindFusion.Diagramming.Blazor.Ruler

Ruler Members
MindFusion.Diagramming.Blazor Namespace