Class DiagramGridLines

Represents the visual guidance lines displayed while dragging or arranging objects in the SfDiagramComponent.

Inheritance

System.Object

DiagramGridLines

HorizontalGridLines

VerticalGridLines

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class DiagramGridLines : OwningComponentBase

Remarks

Provides configuration options for customizing grid line appearance and behavior during object manipulation.

Grid lines serve as visual guides for precise alignment and positioning of diagram elements.

Horizontal and vertical grid lines can be styled independently, with visibility controlled by SnapSettings constraints.

Examples

This example demonstrates how to configure grid lines with custom styling and intervals.

<SfDiagramComponent>
    <SnapSettings Constraints="SnapConstraints.ShowLines">
        <HorizontalGridLines LineColor="blue" LineDashArray="2,2" LineIntervals="@LineInterval">
        </HorizontalGridLines>
        <VerticalGridLines LineColor="blue" LineDashArray="2,2" LineIntervals="@LineInterval">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>
@code
{
   //Set the line intervals for the grid lines
   public double[] LineInterval { get; set; } = new double[] 
   {
        1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15
   };
}

Constructors

DiagramGridLines()

Declaration

public DiagramGridLines()

Properties

DotIntervals

Gets or sets the pattern of gaps defined by a set of dots for the Gridlines.

Declaration

public double[] DotIntervals { get; set; }

Property Value

Type	Description
System.Double[]	A System.Double[] representing the dot interval pattern for grid lines. The default value is { 1, 19, 0.5, 19.5, 0.5, 19.5, 0.5, 19.5, 0.5, 19.5 }.

Remarks

Defines a repeating pattern where values alternate between dot thickness and spacing to create the visual grid structure. The pattern repeats cyclically and is measured in diagram units.

Setting this property to null will use the default dot pattern.

Examples

This example demonstrates how to customize dot intervals for both horizontal and vertical grid lines.

<SfDiagramComponent>
    <SnapSettings Constraints="SnapConstraints.ShowLines">
        <HorizontalGridLines  DotIntervals="@DotInterval">
        </HorizontalGridLines>
        <VerticalGridLines  DotIntervals="@DotInterval">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>
@code
{
   //Set the Dot intervals for the grid lines
   public double[] DotInterval { get; set; } = new double[] 
   {
        1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15
   };
}

DotIntervalsChanged

Gets or sets the callback to trigger when the dot intervals of the GridLines are modified.

Declaration

public EventCallback<double[]> DotIntervalsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double[]>	An Microsoft.AspNetCore.Components.EventCallback<> of type double[] that is invoked when the dot intervals change. The default value is an empty event callback.

Remarks

The callback receives a double[] containing the updated dot interval values that define the grid dot spacing pattern.

Examples

The following example demonstrates how to handle the dot intervals changed event:

<SfDiagramComponent>
    <SnapSettings>
        <GridLines DotIntervalsChanged="@OnDotIntervalsChanged" />
    </SnapSettings>
</SfDiagramComponent>

@code {
    private void OnDotIntervalsChanged()
    {
        //Action to be performed
    }
}

LineColor

Gets or sets the color of the horizontal or vertical grid lines in the DiagramGridLines.

Declaration

public string LineColor { get; set; }

Property Value

Type	Description
System.String	A System.String representing the color value for the grid lines. The default value is "LIGHTGRAY".

Remarks

Accepts standard CSS color formats including named colors, hexadecimal, RGB, and RGBA values.

Affects the visual appearance of grid lines used as alignment guides during diagram manipulation.

Examples

The following example demonstrates how to set the color of the horizontal and vertical grid lines to blue.

<SfDiagramComponent>
    <SnapSettings Constraints="SnapConstraints.ShowLines">
        <HorizontalGridLines LineColor="blue" >
        </HorizontalGridLines>
        <VerticalGridLines LineColor="blue">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>
@code
{
}

LineColorChanged

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

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.String that handles line color change notifications. The default value is an empty callback.

Remarks

This callback is triggered when the line color changes.

Examples

The following example demonstrates how to handle line color changes.

<SfDiagramComponent>
    <SnapSettings>
        <GridLines LineColor="#FF0000" 
                  LineColorChanged="@OnLineColorChanged" />
    </SnapSettings>
</SfDiagramComponent>

@code {
    private void OnLineColorChanged()
    {
        //Action to be performed
    }
}

LineDashArray

Gets or sets the pattern of dashes and gaps used to render the horizontal or vertical grid lines in the SfDiagramComponent.

Declaration

public string LineDashArray { get; set; }

Property Value

Type	Description
System.String	A System.String representing the dash pattern as a space-separated list of numbers defining dash and gap lengths. The default value is System.String.Empty.

Remarks

Specify dash patterns using space-separated numeric values (e.g., "5 3" for 5-unit dashes with 3-unit gaps). When System.String.Empty or null, renders solid lines.

Examples

The following example demonstrates how to configure dashed grid lines with different patterns.

 <SfDiagramComponent>
    <SnapSettings Constraints="SnapConstraints.ShowLines">
        <HorizontalGridLines LineDashArray="2" >
        </HorizontalGridLines>
        <VerticalGridLines LineDashArray="2">
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>
@code
{
}

LineDashArrayChanged

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

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.String that represents the callback function to execute when the line dash array changes. The default value is an empty callback.

Remarks

This callback is triggered when the line dash array pattern changes, providing the new dash array value as a string parameter.

Examples

The following example demonstrates how to handle the line dash array change event:

<GridLines LineDashArray="5,5" 
          LineDashArrayChanged="@OnLineDashArrayChanged" />

@code {
    private void OnLineDashArrayChanged()
    {
        //Action to be performed
    }
}

LineIntervals

Gets or sets the line intervals that define the thickness and spacing between horizontal or vertical grid lines in the SfDiagramComponent.

Declaration

public double[] LineIntervals { get; set; }

Property Value

Type	Description
System.Double[]	A System.Double array representing the alternating pattern of line thickness and spacing values for grid lines. The default value is { 1.25, 18.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75, 0.25, 19.75 }.

Remarks

The array defines alternating line thickness and spacing values that repeat cyclically to create the grid pattern. Values are measured in diagram units.

Examples

The following example demonstrates how to customize grid line intervals for both horizontal and vertical grid lines.

 <SfDiagramComponent>
    <SnapSettings Constraints="SnapConstraints.ShowLines">
        <HorizontalGridLines  LineIntervals="@LineInterval">
        </HorizontalGridLines>
        <VerticalGridLines  LineIntervals="@LineInterval">
        </VerticalGridLines>
    </SnapSettings>
 </SfDiagramComponent>
@code
{
   //Set the line intervals for the grid lines
   public double[] LineInterval { get; set; } = new double[] 
   {
        1.25, 14, 0.25, 15, 0.25, 15, 0.25, 15, 0.25, 15
   };
}

LineIntervalsChanged

Gets or sets the callback to trigger when the grid line intervals change.

Declaration

public EventCallback<double[]> LineIntervalsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double[]>	An Microsoft.AspNetCore.Components.EventCallback<> of type double[] that is invoked when line intervals are modified. The default value is an empty callback.

Remarks

Triggered when line intervals are modified, providing the new intervals array as a double[] parameter for custom handling.

Examples

The following example demonstrates how to handle the line intervals change event.

<SfDiagramComponent>
    <SnapSettings>
        <GridLines LineIntervalsChanged="@OnLineIntervalsChanged" />
    </SnapSettings>
</SfDiagramComponent>

@code {
    private void OnLineIntervalsChanged()
    {
        //Action to be performed
    }
}

SnapIntervals

Gets or sets a set of intervals for snapping objects in the SfDiagramComponent. By default, objects are snapped towards the nearest grid line.

Declaration

public double[] SnapIntervals { get; set; }

Property Value

Type	Description
System.Double[]	A System.Double array representing the snap intervals for grid lines. The default value is { 20 }.

Remarks

Defines the spacing between grid lines for object snapping. Each value represents a distance interval in diagram units.

Setting this property to null will use default snapping behavior. Values should be positive numbers.

Examples

The following example demonstrates how to set custom snap intervals for both horizontal and vertical grid lines.

 <SfDiagramComponent>
    <SnapSettings Constraints="SnapConstraints.ShowLines">
        <HorizontalGridLines SnapIntervals="30" >
        </HorizontalGridLines>
        <VerticalGridLines SnapIntervals="30" >
        </VerticalGridLines>
    </SnapSettings>
</SfDiagramComponent>
@code
{
}

SnapIntervalsChanged

Gets or sets the callback to trigger when the snap intervals of the GridLines change.

Declaration

public EventCallback<double[]> SnapIntervalsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double[]>	An Microsoft.AspNetCore.Components.EventCallback<> of type double[] that is invoked when snap intervals are modified. The default value is an empty callback.

Remarks

This callback is triggered when the snap intervals array is modified, providing the new intervals as a double[] parameter.

Examples

The following example demonstrates how to handle snap interval changes:

<SfDiagramComponent>
    <SnapSettings>
        <GridLines SnapIntervalsChanged="@OnSnapIntervalsChanged" />
    </SnapSettings>
</SfDiagramComponent>

@code {
    private void OnSnapIntervalsChanged()
    {
        //Action to be performed
    }
}

Methods

Dispose()

Releases all unmanaged resources used by the grid line instance.

Declaration

public void Dispose()

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.

OnParametersSetAsync()

Method invoked when any changes in component state occurs.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	="Task".