Class ScrollSettings

Represents the scroll and zoom configuration settings for the SfDiagramComponent.

Inheritance

System.Object

ScrollSettings

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class ScrollSettings : OwningComponentBase

Remarks

The ScrollSettings class provides control over the diagram's viewport behavior, including scroll positioning, zoom levels, and scroll boundaries.

Examples

This example demonstrates how to configure scroll settings with two-way data binding for a diagram component.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings @bind-VerticalOffset="@verticalOffset" @bind-HorizontalOffset="@horizontalOffset" @bind-ScrollLimit="@scrollLimit" @bind-CurrentZoom="@currentZoom" @bind-MinZoom="minZoom" @bind-MaxZoom="@maxZoom">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double verticalOffset { get; set; } = 300;
    double horizontalOffset { get; set; } = -1000;
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
    double currentZoom { get; set; } = 1;
    double minZoom { get; set; } = 0.2;
    double maxZoom { get; set; } = 1.5;
}

Constructors

ScrollSettings()

Declaration

public ScrollSettings()

Properties

AutoScrollPadding

Gets or sets the padding used to define the region where automatic scrolling starts when a node is dragged to the edges of the viewport.

Declaration

public DiagramMargin AutoScrollPadding { get; set; }

Property Value

Type	Description
DiagramMargin	A DiagramMargin representing the padding distances from each viewport edge that define the auto-scroll trigger region. The default value is a DiagramMargin with Left = 20, Right = 20, Top = 20, and Bottom = 20 pixels.

Remarks

The automatic scrolling region is calculated as a distance from the edge of the viewport equal to the value of the padding. For example, if the right padding is set to 5 pixels, the auto-scroll start region will be 5 pixels from the inner edge of the right viewport edge.

Requires EnableAutoScroll to be true

Examples

The following example demonstrates how to set the auto-scroll padding in the diagram.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings EnableAutoScroll="true" AutoScrollPadding ="@autoScrollBorder">
    </ScrollSettings>
</SfDiagramComponent>
@code
{
   DiagramMargin autoScrollBorder = new DiagramMargin() { Left=100,Right=100,Top=100,Bottom=100};
}

ChildContent

Gets or sets the child content for the ScrollSettings component.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.RenderFragment representing the nested content within the scroll settings configuration. The default value is null.

Remarks

This property allows you to define nested components or content within the ScrollSettings component using Razor syntax.

When null, no child content will be rendered within the scroll settings container.

CurrentZoom

Gets or sets the current zoom level of the SfDiagramComponent.

Declaration

public double CurrentZoom { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the zoom scale factor where 1.0 equals 100% zoom. Values greater than 1.0 zoom in, and values less than 1.0 zoom out. The default value is 1.0.

Remarks

Affects the visual scale of all diagram elements.

Examples

This example demonstrates how to set and bind the current zoom level for diagram scaling.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-CurrentZoom="@currentZoom" >
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double currentZoom { get; set; } = 1;
}

CurrentZoomChanged

Gets or sets the callback to trigger when the current zoom level changes in the ScrollSettings.

Declaration

public EventCallback<double> CurrentZoomChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Double that is invoked when the zoom level is modified. The default value is an empty callback.

Remarks

This event callback is triggered whenever the zoom level changes through user interaction or programmatic updates. The callback receives the new zoom value as a parameter.

Use this callback to respond to zoom changes, update UI elements.

Examples

The following example demonstrates how to handle zoom changes.

<SfDiagramComponent>
    <ScrollSettings CurrentZoomChanged="@OnCurrentZoomChanged" />
</SfDiagramComponent>

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

EnableAutoScroll

Gets or sets a value indicating whether the diagram automatically scrolls when the user drags a node to the edge of the viewport.

Declaration

public bool EnableAutoScroll { get; set; }

Property Value

Type	Description
System.Boolean	true if auto-scrolling is enabled; otherwise, false. The default value is true.

Remarks

When auto-scrolling is enabled, the diagram viewport will automatically scroll in the direction of the mouse movement when the user drags a node to the edge of the viewport.

The padding to start the auto-scrolling at the edge can be controlled by setting the AutoScrollPadding property.

Examples

The following example demonstrates how to enable auto-scrolling in the diagram.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings EnableAutoScroll="true">
    </ScrollSettings>
</SfDiagramComponent>

HorizontalOffset

Gets or sets the horizontal offset of the scroller in the SfDiagramComponent.

Declaration

public double HorizontalOffset { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the horizontal scroll position in pixels. The default value is 0.

Remarks

The horizontal offset determines the left-most visible position of the diagram content within the viewport. Positive values scroll the content to the right, while negative values scroll to the left.

This property supports two-way data binding and will automatically update when the user scrolls horizontally using the scrollbar.

Examples

This example demonstrates how to set an initial horizontal offset and bind it to a component property.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-HorizontalOffset="@horizontalOffset">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double horizontalOffset { get; set; } = -1000;
}

HorizontalOffsetChanged

Gets or sets the callback that is invoked when the horizontal scroll offset changes in the ScrollSettings.

Declaration

public EventCallback<double> HorizontalOffsetChanged { get; set; }

Property Value

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

Remarks

This callback is triggered when the horizontal scroll position changes, providing the new offset value to the handler.

Supports Blazor's two-way data binding when used with the HorizontalOffset property.

Examples

The following example demonstrates how to handle horizontal offset changes.

<SfDiagramComponent>
    <ScrollSettings HorizontalOffsetChanged="@OnHorizontalOffsetChanged" />
</SfDiagramComponent>

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

MaxZoom

Gets or sets the maximum zoom level allowed for the SfDiagramComponent scroller.

Declaration

public double MaxZoom { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the maximum zoom scale factor. The default value is 30.

Remarks

Controls the upper limit of zoom functionality. The zoom value represents a scale factor where 1.0 equals 100% zoom.

Examples

This example demonstrates how to set a custom maximum zoom level for the diagram.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-MaxZoom="@maxZoom">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double maxZoom { get; set; } = 1.5;
}

MaxZoomChanged

Gets or sets the callback to trigger when the maximum zoom value changes in the ScrollSettings.

Declaration

public EventCallback<double> MaxZoomChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Double that is invoked when the maximum zoom limit is modified. The default value is an empty callback.

Remarks

This event callback is triggered whenever the maximum zoom threshold is updated.

The callback receives the new maximum zoom value as a double parameter, enabling you to implement custom logic based on the updated zoom level.

Examples

The following example demonstrates how to handle maximum zoom changes.

<SfDiagramComponent>
    <ScrollSettings MaxZoomChanged="@OnMaxZoomChanged" />
</SfDiagramComponent>

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

MinZoom

Gets or sets the minimum zoom level allowed for the SfDiagramComponent scroller.

Declaration

public double MinZoom { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the minimum zoom scale factor. The default value is 0.2.

Remarks

Constrains how far users can zoom out from the diagram content. Works with MaxZoom to define the allowable zoom range.

Affects the visual scale of all diagram elements.

Examples

This example demonstrates how to set a custom minimum zoom level for the diagram.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-MinZoom="minZoom" >
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double minZoom { get; set; } = 0.2;
}

MinZoomChanged

Gets or sets the callback to trigger when the minimum zoom value changes in the ScrollSettings.

Declaration

public EventCallback<double> MinZoomChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Double>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Double that is invoked when the minimum zoom value is modified. The default value is an empty callback.

Remarks

This event callback is triggered whenever the minimum zoom level value is changed.

The callback receives the new minimum zoom value as a System.Double parameter.

Examples

The following example demonstrates how to handle minimum zoom changes.

<SfDiagramComponent>
    <ScrollSettings MinZoomChanged="@OnMinZoomChanged" />
</SfDiagramComponent>

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

ScrollableArea

Gets or sets the rectangular area within the SfDiagramComponent to restrict scrolling beyond this boundary. This property is only applicable when ScrollLimit is set to Limited.

Declaration

public DiagramRect ScrollableArea { get; set; }

Property Value

Type	Description
DiagramRect	A DiagramRect representing the width, height, and position of the scrollable rectangle within the diagram region. The default value is null.

Remarks

Defines the area boundary for scrolling when scroll limit mode is Limited.

Examples

The following example demonstrates how to set a scrollable area to restrict scrolling to a 300x300 pixel region:

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  ScrollableArea ="@scrollableArea" ScrollLimit="ScrollLimitMode.Limited">
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
   DiagramRect scrollableArea = new DiagramRect() { X = 0, Y = 0, Width = 300, Height = 300 };
}

ScrollableAreaChanged

Gets or sets the callback that is invoked when the scrollable area of the ScrollSettings changes.

Declaration

public EventCallback<DiagramRect> ScrollableAreaChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramRect>	An Microsoft.AspNetCore.Components.EventCallback<> that represents the callback function triggered when the scrollable area dimensions change. The default value is an empty callback.

Remarks

This callback is triggered when the scrollable area boundaries change.

The callback receives a DiagramRect parameter with the updated area dimensions.

Examples

The following example demonstrates how to handle scrollable area changes.

<SfDiagramComponent>
    <ScrollSettings ScrollableAreaChanged="@OnScrollableAreaChanged" />
</SfDiagramComponent>

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

ScrollLimit

Gets or sets the upper limit of values of the scrollable range in the SfDiagramComponent.

Declaration

public ScrollLimitMode ScrollLimit { get; set; }

Property Value

Type	Description
ScrollLimitMode	A ScrollLimitMode specifying the scrollable range boundaries for the diagram. The default value is Diagram.

Remarks

Controls scrolling boundaries: Diagram limits scrolling to content bounds, while Infinity allows unlimited scrolling.

Examples

This example demonstrates how to configure different scroll limit modes for the diagram.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings  @bind-ScrollLimit="@scrollLimit" >
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    ScrollLimitMode scrollLimit { get; set; } = ScrollLimitMode.Infinity;
}

ScrollLimitChanged

Gets or sets the callback to trigger when the scroll limit mode changes in the ScrollSettings.

Declaration

public EventCallback<ScrollLimitMode> ScrollLimitChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ScrollLimitMode>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the scroll limit mode is modified. The default value is an empty callback.

Remarks

This callback is triggered whenever the scroll limit mode changes.

The callback receives the new ScrollLimitMode value as a parameter, enabling you to implement custom logic based on the current scroll limit configuration.

Examples

The following example demonstrates how to handle scroll limit changes.

<SfDiagramComponent>
    <ScrollSettings ScrollLimitChanged="@OnScrollLimitChanged" />
</SfDiagramComponent>

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

ScrollPadding

Gets or sets the padding that defines the spacing between diagram elements and the edges of the viewport when automatic scrolling is enabled.

Declaration

public DiagramMargin ScrollPadding { get; set; }

Property Value

Type	Description
DiagramMargin	A DiagramMargin representing the padding thickness for each side of the viewport. The default value is a DiagramMargin with 0 pixels for all sides (Left, Right, Top, Bottom).

Remarks

The automatic scrolling region is calculated as a distance from the edge of the viewport equal to the value of the padding.

For example, if the right padding is set to 5 pixels, the auto-scroll start region will be 5 pixels from the inner edge of the right viewport edge.

Examples

The following example demonstrates setting the scroll padding to create auto-scroll zones:

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings ScrollPadding="@ScrollBorder">
    </ScrollSettings>
</SfDiagramComponent>
@code {
    DiagramMargin ScrollBorder = new DiagramMargin { Left = 100, Right = 100, Top = 100, Bottom = 100 };
}

ScrollPaddingChanged

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

Declaration

public EventCallback<DiagramMargin> ScrollPaddingChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramMargin>	An Microsoft.AspNetCore.Components.EventCallback<> that represents the callback function executed when scroll padding changes. The default value is an empty event callback.

Remarks

This event callback enables two-way data binding for the ScrollPadding property and is typically used in Blazor components to notify parent components of property changes.

The callback receives a DiagramMargin parameter containing the new scroll padding values when the change occurs.

Examples

The following example demonstrates how to handle scroll limit changes.

<SfDiagramComponent>
    <ScrollSettings ScrollPaddingChanged="@OnScrollPaddingChanged" />
</SfDiagramComponent>

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

VerticalOffset

Gets or sets the vertical offset of the SfDiagramComponent scroller.

Declaration

public double VerticalOffset { get; set; }

Property Value

Type	Description
System.Double	A System.Double representing the vertical scroll position in pixels from the top of the scrollable content. The default value is 0.0.

Remarks

Controls the vertical scrolling position of the diagram viewport.

Use this property to programmatically control vertical scrolling or maintain scroll position across updates.

Examples

This example demonstrates how to set and bind the vertical offset for diagram scrolling.

<SfDiagramComponent Width="1000px" Height="1000px">
    <ScrollSettings @bind-VerticalOffset="@verticalOffset" />
    </ScrollSettings>
</SfDiagramComponent>    
@code
{
    double verticalOffset { get; set; } = 300;
}

VerticalOffsetChanged

Gets or sets the callback that is invoked when the vertical scroll offset changes in the ScrollSettings.

Declaration

public EventCallback<double> VerticalOffsetChanged { get; set; }

Property Value

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

Remarks

This callback is triggered whenever the vertical scroll position changes, providing the new offset value in pixels.

Useful for implementing custom scroll-based behaviors such as virtual scrolling or scroll position tracking.

Examples

The following example demonstrates how to handle vertical offset changes.

<SfDiagramComponent>
    <ScrollSettings VerticalOffsetChanged="@OnVerticalOffsetChanged" />
</SfDiagramComponent>

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

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose()

Releases all unmanaged resources used by the ScrollSettings component.

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.

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

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 occur.

Declaration

protected override Task OnParametersSetAsync()

Returns

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