Example of Rulers in Blazor Diagram Component

Diagram / Getting Started / Rulers

This example demonstrates the use of rulers in the Diagram component. Rulers are essential for determining the position and dimensions of diagram elements. You can customize the appearance of horizontal and vertical rulers to suit your needs.

Properties
Interval
Tick Alignment
Marker Color
Ruler Visible

This example illustrates how to customize the rulers added to a Diagram component. You can toggle the visibility of individual rulers using the IsVisible parameter. The Interval property determines the number of intervals placed in each segment. The TickAlignment property is used to define the alignment of ticks in the ruler and the MarkerColor property specifies the color of the guidelines used to indicate the current position in the diagram.

You can add a horizontal ruler to the diagram by using the HorizontalRuler component as a child component of the RulerSettings component. In the same way, you can add a vertical ruler to the diagram by using the VerticalRuler component as a child component of the RulerSettings component.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE