Class PageSettings

Represents the page settings configuration for customizing the appearance, width and height of the diagram page in the SfDiagramComponent.

Inheritance
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
PageSettings
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class PageSettings : SfOwningComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
Remarks

The PageSettings class controls diagram page properties including size, orientation, margins, background styling, and multi-page layouts.

Supports customizable page boundaries and visual guides for page breaks.

Examples

This example demonstrates how to configure page settings with custom dimensions and styling.

<SfDiagramComponent>
    <PageSettings Width = "@PageWidth" Height="@PageHeight" Orientation="@pageOrientation" MultiplePage="@IsMultiplePage" ShowPageBreaks="@IsShowPageBreaks">
        <PageMargin Left = "@marginLeft" Right="@marginRight" Top="@marginTop" Bottom="@marginBottom"></PageMargin>
    </PageSettings>
</SfDiagramComponent>
@code
{
    double PageWidth = 300;
    double PageHeight = 300;
    PageOrientation pageOrientation = PageOrientation.Landscape;
    bool IsMultiplePage = true;
    bool IsShowPageBreaks = true;
    double marginLeft = 10;
    double marginRight = 10;
    double marginTop = 10;
    double marginBottom = 10;
}

Constructors

PageSettings()

Declaration
public PageSettings()

Properties

Background

Gets or sets the background styling for the diagram page.

Declaration
[JsonPropertyName("background")]
[Parameter]
public BackgroundStyle? Background { get; set; }
Property Value
Type Description
BackgroundStyle

A BackgroundStyle representing the page background appearance. The default value is a transparent background.
Remarks

Users can customize the background of the diagram page by using the background property.

The Source property of background allows the user to set the path of the image to the background, whereas the Color property of the background allows the user to set a color to the background of the diagram page.

BackgroundChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<BackgroundStyle> BackgroundChanged { get; set; }
Property Value
Type Description
EventCallback<BackgroundStyle>

An EventCallback<TValue> of type BackgroundStyle for handling background change notifications. The default value is an empty callback.
Remarks

Triggered when the background style is updated. Provides the updated BackgroundStyle value for handling UI updates.

Examples

The following example demonstrates how to handle background changes in a page settings component.

<SfDiagramComponent>
<PageSettings BackgroundChanged="OnBackgroundChanged" />;
</SfDiagramComponent>
@code { 
    private void OnBackgroundChanged()
    {
        // Implement custom logic
    }
}

BoundaryConstraints

Gets or sets the boundary constraints that restrict the interactive region of the diagram.

Declaration
[Parameter]
[JsonPropertyName("boundaryConstraints")]
public BoundaryConstraints BoundaryConstraints { get; set; }
Property Value
Type Description
BoundaryConstraints

A BoundaryConstraints specifying the interactive region constraints. The default value is Infinity.
Remarks

Limits interaction to a defined area, preventing elements from moving or resizing outside it.

Helps keep elements within a specific region of the page.

Examples

The following example demonstrates how to set the boundary constraints for the diagram.

  <SfDiagramComponent>
    <PageSettings  BoundaryConstraints="@boundaryConstraints" >
    </PageSettings>
</SfDiagramComponent>
@code
{
    BoundaryConstraints boundaryConstraints = BoundaryConstraints.Diagram;
}

BoundaryConstraintsChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<BoundaryConstraints> BoundaryConstraintsChanged { get; set; }
Property Value
Type Description
EventCallback<BoundaryConstraints>

An EventCallback<TValue> of type BoundaryConstraints for handling boundary constraints change notifications. The default value is an empty callback.
Remarks

Triggered when boundary constraints are modified, allowing dynamic response to constraint changes.

Provides the new BoundaryConstraints value for implementing custom behavior.

Examples

The following example demonstrates how to handle boundary constraints changes in a page settings component:

<SfDiagramComponent>
    <PageSettings BoundaryConstraintsChanged="OnBoundaryConstraintsChanged" />
</SfDiagramComponent>
@code {
    private void OnBoundaryConstraintsChanged()
    {
         // Implement custom logic
    }
}

ChildContent

Gets or sets the child content that can be rendered within the PageSettings component.

Declaration
[Parameter]
[JsonIgnore]
public RenderFragment? ChildContent { get; set; }
Property Value
Type Description
RenderFragment

A RenderFragment containing the child components such as PageMargin and BackgroundStyle. The default value is null.
Remarks

Specifies the content to render inside the PageSettings tag. Commonly used to add PageMargin and BackgroundStyle components as child elements.

Examples
<SfDiagramComponent>
    <PageSettings>
        <PageMargin Left="10" Right="10" Top="10" Bottom="10"></PageMargin>
        <BackgroundStyle Background="#ffffff"></BackgroundStyle>
    </PageSettings>
</SfDiagramComponent>

Height

Gets or sets the height of the diagram page.

Declaration
[Parameter]
[JsonPropertyName("height")]
public double? Height { get; set; }
Property Value
Type Description
double?

A double? representing the height of the diagram page in pixels.
Remarks

Defines the vertical page dimension. Works with the Orientation property, which may swap width and height values when changed.

Examples
<SfDiagramComponent>
    <PageSettings Height="@PageHeight" >
    </PageSettings>
</SfDiagramComponent>
@code
{
    double PageHeight = 300;
}

HeightChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<double?> HeightChanged { get; set; }
Property Value
Type Description
EventCallback<double?>

An EventCallback<TValue> of type double? for handling height change notifications. The default value is an empty callback.
Remarks

Triggered when the page height changes, enabling response to layout modifications.

Provides the new double? value for implementing custom behavior.

Examples

The following example demonstrates how to handle height changes in a page settings component:

<SfDiagramComponent>
   <PageSettings HeightChanged="OnHeightChanged" /> 
</SfDiagramComponent>
@code {
    private void OnHeightChanged()
    {
            // Implement custom logic
    }
}

Margin

Gets or sets the margin settings for the diagram page.

Declaration
[JsonPropertyName("margin")]
[Parameter]
public PageMargin? Margin { get; set; }
Property Value
Type Description
PageMargin

A PageMargin representing the extra space around the diagram content. The default value is a PageMargin with all sides set to 25 pixels.
Remarks

Sets extra space around the diagram content on all sides of the page.

Useful for printing or exporting to prevent content from being cut off.

Examples

The following example demonstrates how to set the margin settings for the diagram page.

MarginChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<PageMargin> MarginChanged { get; set; }
Property Value
Type Description
EventCallback<PageMargin>

An EventCallback<TValue> of type PageMargin for handling margin change notifications. The default value is an empty callback.
Remarks

This event is triggered whenever the Margin property is modified, providing the updated PageMargin value to handle UI updates and custom logic.

The callback receives the new PageMargin value as a parameter, allowing components to respond to margin changes dynamically.

Examples

The following example demonstrates how to handle margin changes in a page settings component:

<SfDiagramComponent>
<PageSettings MarginChanged="OnMarginChanged" />;
</SfDiagramComponent>
@code { 
    private void OnMarginChanged()
    {
        // Implement custom logic
    }
}

MultiplePage

Gets or sets a value indicating whether multiple pages are enabled for the diagram.

Declaration
[Parameter]
[JsonPropertyName("multiplePage")]
public bool MultiplePage { get; set; }
Property Value
Type Description
bool

A bool indicating whether multiple pages are enabled. The default value is false.
Remarks

When multiple pages are enabled, the size of the page dynamically increases or decreases to split the single page into multiple pages and completely fit the diagram within the page boundaries.

Examples

The following example demonstrates how to enable multiple pages for the diagram.

<SfDiagramComponent>
    <PageSettings   MultiplePage="@IsMultiplePage" >
    </PageSettings>
</SfDiagramComponent>
@code
{
    bool IsMultiplePage = true;
}

MultiplePageChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<bool> MultiplePageChanged { get; set; }
Property Value
Type Description
EventCallback<bool>

An EventCallback<TValue> of type bool for handling multiple page change notifications. The default value is an empty callback.
Remarks

Triggered when the multiple page mode is enabled or disabled. Provides a boolean value indicating the updated state.

Examples

The following example demonstrates how to handle multiple Page changes in a page settings component:

<SfDiagramComponent>
<PageSettings MultiplePageChanged="OnMultiplePageChanged" />;
</SfDiagramComponent>
@code { 
    private void OnMultiplePageChanged()
    {
        // Implement custom logic
    }
}

Orientation

Gets or sets the orientation of the page in the diagram..

Declaration
[Parameter]
[JsonPropertyName("orientation")]
public PageOrientation Orientation { get; set; }
Property Value
Type Description
PageOrientation

A PageOrientation specifying the page orientation. The default value is Landscape.
Remarks

Sets the page to landscape or portrait mode.

Width and height may be swapped automatically to match the selected orientation.

Examples
<SfDiagramComponent>
    <PageSettings Orientation="@pageOrientation" >
    </PageSettings>
</SfDiagramComponent>
@code
{
    PageOrientation pageOrientation = PageOrientation.Landscape;
}

OrientationChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<PageOrientation> OrientationChanged { get; set; }
Property Value
Type Description
EventCallback<PageOrientation>

An EventCallback<TValue> of type PageOrientation for handling orientation change notifications. The default value is an empty callback.
Remarks

Triggered when the page orientation changes, enabling responsive behavior and custom layout adjustments.

Provides the new PageOrientation value for implementing custom behavior.

Examples

The following example demonstrates how to handle orientation changes in a page settings component.

<SfDiagramComponent>
    <PageSettings OrientationChanged="OnOrientationChanged" />
</SfDiagramComponent>
@code {
    private void OnOrientationChanged()
    {
        // Implement custom logic
    }
}

ShowPageBreaks

Gets or sets a value indicating whether page break lines are visible in the diagram.

Declaration
[Parameter]
[JsonPropertyName("showPageBreaks")]
public bool ShowPageBreaks { get; set; }
Property Value
Type Description
bool

A bool indicating whether page break lines are shown. The default value is false.
Remarks

The ShowPageBreaks property is used as a visual guide to see how pages are split into multiple pages.

Examples

The following example demonstrates how to show page break lines in the diagram.

 <SfDiagramComponent>
    <PageSettings  ShowPageBreaks="@IsShowPageBreaks">
    </PageSettings>
</SfDiagramComponent>
@code
{
    bool IsShowPageBreaks = true;
}

ShowPageBreaksChanged

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

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<bool> ShowPageBreaksChanged { get; set; }
Property Value
Type Description
EventCallback<bool>

An EventCallback<TValue> of type bool for handling show page breaks change notifications. The default value is an empty callback.
Remarks

This event is triggered whenever the page breaks visibility setting is modified, allowing components to respond to display changes dynamically.

The callback receives a bool value indicating the new visibility state, enabling custom behavior implementation when page breaks are shown or hidden.

Examples

The following example demonstrates how to handle Page break changes in a page settings component:

<SfDiagramComponent>
    <PageSettings ShowPageBreaksChanged="@OnShowPageBreaksChanged" />
</SfDiagramComponent>
@code {
    private void ShowPageBreaksChanged()
    {
         // Implement custom logic
    }
}

Width

Gets or sets the width of the diagram page.

Declaration
[Parameter]
[JsonPropertyName("width")]
public double? Width { get; set; }
Property Value
Type Description
double?

A double? representing the width of the diagram page in pixels. The default value is 1123.
Remarks

Defines the horizontal page dimension. Works with the Orientation property, which may swap width and height values when changed.

Examples

The following example demonstrates how to set the width of the diagram page.

    <PageSettings Width = "@PageWidth" >
    </PageSettings>
@code
{
    double PageWidth = 300;
}

WidthChanged

Gets or sets the callback that is invoked when the Width property value changes in the PageSettings.

Declaration
[JsonIgnore]
[Parameter]
public EventCallback<double?> WidthChanged { get; set; }
Property Value
Type Description
EventCallback<double?>

An EventCallback<TValue> of type double? for handling width change notifications. The default value is an empty callback.
Remarks

Triggered when the page width changes, enabling response to layout modifications.

Provides the new double? value for implementing custom behavior.

Examples

The following example demonstrates how to handle width changes in page settings:

<SfDiagramComponent>
    <PageSettings WidthChanged="OnPageWidthChanged" />
</SfDiagramComponent>
@code {
    private void OnPageWidthChanged()
    {
            // Implement custom logic
    }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

Dispose()

Releases all resources used by the PageSettings component and performs cleanup of managed and unmanaged resources.

Declaration
public void Dispose()

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

Implements