Class PageSettings

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

Inheritance

System.Object

PageSettings

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class PageSettings : OwningComponentBase

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

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

public EventCallback<BackgroundStyle> BackgroundChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<BackgroundStyle>	An Microsoft.AspNetCore.Components.EventCallback<> 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

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

public EventCallback<BoundaryConstraints> BoundaryConstraintsChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<BoundaryConstraints>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	A Microsoft.AspNetCore.Components.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

public Nullable<double> Height { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	A System.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

public EventCallback<Nullable<double>> HeightChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Nullable<System.Double>>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.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 System.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

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

public EventCallback<PageMargin> MarginChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<PageMargin>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public bool MultiplePage { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean 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

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean 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

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

public EventCallback<PageOrientation> OrientationChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<PageOrientation>	An Microsoft.AspNetCore.Components.EventCallback<> 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

public bool ShowPageBreaks { get; set; }

Property Value

Type	Description
System.Boolean	A System.Boolean 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

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.Boolean 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 System.Boolean 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

public Nullable<double> Width { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	A System.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

public EventCallback<Nullable<double>> WidthChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Nullable<System.Double>>	An Microsoft.AspNetCore.Components.EventCallback<> of type System.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 System.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
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

Dispose()

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

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.