Class DiagramRuler

Represents the properties common to both horizontal and vertical rulers for measuring the diagram area.

Inheritance

System.Object

DiagramRuler

HorizontalRuler

VerticalRuler

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class DiagramRuler : OwningComponentBase

Remarks

This base class provides properties shared between HorizontalRuler and VerticalRuler for defining their appearance and behavior in the diagram component.

The ruler provides visual measurement guides that help users align and position elements within the diagram canvas.

Examples

The following example demonstrates how to configure the ruler settings in the diagram component.

 <SfDiagramComponent>
     <RulerSettings>
          <HorizontalRuler  IsVisible="true" Interval="@RulerInterval"
                  TickAlignment="@RulerTickAlignment" MarkerColor="@RulerMarkerColor">
          </HorizontalRuler>
          <VerticalRuler IsVisible="false"  Interval="@RulerInterval"
                  TickAlignment="@RulerTickAlignment" MarkerColor="@RulerMarkerColor">
          </VerticalRuler>
     </RulerSettings>
 </SfDiagramComponent>
@code
{
  SfDiagramComponent diagram;
  public int RulerInterval = 20;
  public TickAlignment RulerTickAlignment = TickAlignment.RightAndBottom;
  public string RulerMarkerColor = "green";
}

Constructors

DiagramRuler()

Declaration

public DiagramRuler()

Properties

Interval

Gets or sets the number of intervals to be present on each segment of the ruler.

Declaration

public int Interval { get; set; }

Property Value

Type	Description
System.Int32	The default intervals in a segment of the ruler is 5.

Remarks

Controls how many small marks appear on each ruler section. Higher numbers show more marks, lower numbers show fewer marks.

This setting works for both horizontal and vertical rulers to keep measurements consistent.

Examples

The following example demonstrates how to configure ruler intervals

    <SfDiagramComponent Height = "600px">
        <RulerSettings>
            <HorizontalRuler Interval = "7">
            </HorizontalRuler>
        </RulerSettings>
    </SfDiagramComponent>

IntervalChanged

Gets or sets the callback that is invoked when the ruler's interval value changes.

Declaration

public EventCallback<int> IntervalChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Int32>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Int32 that represents the new interval value in pixels or units.

Remarks

The callback receives the updated interval value as its parameter.

This allows parent components to react to changes in the ruler's interval.

Examples

The following example demonstrates how to use the IntervalChanged event callback.

<RulerSettings>
    <HorizontalRuler  IsVisible="true" IntervalChanged="@OnIntervalChanged"></HorizontalRuler>
    <VerticalRuler  IsVisible="true" IntervalChanged="@OnIntervalChanged"></VerticalRuler>
</RulerSettings>
@code {
public void OnIntervalChanged(int args)
{
   //Action to be performed
}

IsVisible

Gets or sets the value indicating whether the horizontal and vertical rulers are visible in the diagram.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	The default value of IsVisible is true.

Remarks

Controls the visibility of the ruler component. When true, the ruler is displayed; when false, it is hidden.

Horizontal and vertical rulers can be shown or hidden separately as needed.

Examples

The following example demonstrates how to configure ruler visibility

    <SfDiagramComponent Height = "600px">
        <RulerSettings>
            <HorizontalRuler IsVisible = "true"/>
            <VerticalRuler IsVisible = "true"/>
        </RulerSettings>
    </SfDiagramComponent>

IsVisibleChanged

Gets or sets the event callback that is invoked when the IsVisible property value changes.

Declaration

public EventCallback<bool> IsVisibleChanged { get; set; }

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>

Remarks

This event callback is invoked whenever the visibility state of the diagram ruler changes, allowing parent components to respond to visibility state transitions.

The callback receives a boolean parameter indicating the new visibility state and enables two-way data binding scenarios where parent components need to track ruler visibility changes.

Examples

The following example demonstrates how to use the IsVisibleChanged event callback.

<RulerSettings>
    <HorizontalRuler  IsVisible="true" IsVisibleChanged="@OnShowChanged"></HorizontalRuler>
    <VerticalRuler  IsVisible="true" IsVisibleChanged="@OnShowChanged"></VerticalRuler>
</RulerSettings>
@code {
public void OnShowChanged(bool args)
{
   //Action to be performed
}

MarkerColor

Gets or sets the color of the marker line that tracks the cursor position on the ruler.

Declaration

public string MarkerColor { get; set; }

Property Value

Type	Description
System.String	The default value of MarkerColor is "red".

Remarks

This property controls the visual appearance of the dynamic marker line that follows the cursor position within the diagram area.

The marker line serves as a visual guide to help users precisely align elements and understand their current position relative to the ruler's measurement scale.

Examples

The following example demonstrates how to configure ruler marker color

    <SfDiagramComponent Height = "600px">
        <RulerSettings>
            <HorizontalRuler Interval = "7" MarkerColor = "blue">
            </HorizontalRuler>
        </RulerSettings>
    </SfDiagramComponent>

MarkerColorChanged

Gets or sets the callback to trigger when the MarkerColor value changes.

Declaration

public EventCallback<string> MarkerColorChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.String that represents the new marker color value when the MarkerColor property is modified. The default value is an empty callback.

Remarks

This event callback is invoked whenever the marker color of the DiagramRuler is changed, allowing parent components to respond to color modifications.

The callback receives the new color value as a string parameter, which can be in various formats such as hex codes, RGB values, or named colors.

Examples

The following example demonstrates how to use the MarkerColorChanged event callback.

<RulerSettings>
    <HorizontalRuler  IsVisible="true" MarkerColorChanged="@OnMarkerColorChanged"></HorizontalRuler>
    <VerticalRuler  IsVisible="true" MarkerColorChanged="@OnMarkerColorChanged"></VerticalRuler>
</RulerSettings>
@code {
public void OnMarkerColorChanged(string args)
{
   //Action to be performed
}

TickAlignment

Gets or sets the alignment of tick marks in the ruler.

Declaration

public TickAlignment TickAlignment { get; set; }

Property Value

Type	Description
TickAlignment	The default value is RightAndBottom.

Remarks

Controls the positioning of tick marks relative to the ruler's baseline. The alignment determines whether ticks appear on the left/top side, right/bottom side, or both sides of the ruler line.

For more info regarding TickAlignment, refer to TickAlignment

Examples

The following example demonstrates how to configure ruler tick alignment

    <SfDiagramComponent Height = "600px">
        <RulerSettings>
            <HorizontalRuler TickAlignment = "TickAlignment.RightAndBottom">
            </HorizontalRuler>
        </RulerSettings>
    </SfDiagramComponent>

TickAlignmentChanged

Gets or sets the callback that is invoked when the TickAlignment property value changes.

Declaration

public EventCallback<TickAlignment> TickAlignmentChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TickAlignment>	An Microsoft.AspNetCore.Components.EventCallback<> that receives the new TickAlignment value when the property changes.

Remarks

Used with @bind-TickAlignment for two-way data binding.

This callback is Automatically invoked when tick alignment changes programmatically or through user interaction.

Examples

The following example demonstrates how to use the TickAlignmentChanged event callback.

<RulerSettings>
    <HorizontalRuler  IsVisible="true" TickAlignmentChanged="@OnTickAlignmentChanged"></HorizontalRuler>
    <VerticalRuler  IsVisible="true" TickAlignmentChanged="@OnTickAlignmentChanged"></VerticalRuler>
</RulerSettings>
@code {
public void OnTickAlignmentChanged(TickAlignment args)
{
   //Action to be performed
}

Methods

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Handles post-render operations: triggers diagram state changes on first render, clears snap settings and re-renders when ruler properties update, and adjusts scroller size/offsets when visibility changes.

Uses internal flags to track state changes and logs exceptions before re-throwing.

OnParametersSetAsync()

Handles parameter changes and updates internal state flags when ruler properties are modified.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation.

Remarks

This method is automatically called by the Blazor framework when component parameters . Sets internal flags when ruler properties change.