Blazor

Upgrade Guide User Guide Demos Support Forums Download
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class DiagramBackground - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class DiagramBackground

    Represents the appearance of the diagram background.

    Inheritance
    System.Object
    Syncfusion.Blazor.SfBaseComponent
    Syncfusion.Blazor.SfBaseExtension
    DiagramBackground
    Namespace: Syncfusion.Blazor.Diagrams
    Assembly: Syncfusion.Blazor.dll
    Syntax
    public class DiagramBackground : SfBaseExtension
    Examples
    <SfDiagram Height="600px" id="diagram">
       @* Initialize the page settings with page orientation and break lines*@
       <DiagramPageSettings Height = "300" Width="300" Orientation="PageOrientation.Landscape" ShowPageBreaks="true">
       //set image to the background
        <DiagramBackground Source = "https://www.w3schools.com/images/w3schools_green.jpg" />
        //set color to the background
        < DiagramBackground Color="lightblue"/>
       </DiagramPageSettings>
    </SfDiagram>

    Constructors

    DiagramBackground()

    Declaration
    public DiagramBackground()

    Properties

    Align

    Defines the alignment of background image over the diagram area.

    Declaration
    public ImageAlignment Align { get; set; }
    Property Value
    Type Description
    ImageAlignment
    Remarks

    Users can customize the alignment of the background image by using the Align property of the background. The Align Property contains some options such as XMinYMin, XMidYMid, XMaxYMin, and XMaxYMin, etc. Users can choose any one of the above options. By default, it will be None.

    ChildContent

    Represents a segment of UI content, implemented.

    Declaration
    public RenderFragment ChildContent { get; set; }
    Property Value
    Type Description
    Microsoft.AspNetCore.Components.RenderFragment

    Color

    Defines the background color of the diagram.

    Declaration
    public string Color { get; set; }
    Property Value
    Type Description
    System.String
    Examples
    <DiagramPageSettings Height="300" Width="300" ShowPageBreaks="true">
    //set color to the background
    <DiagramBackground Color="lightblue" />
    </DiagramPageSettings>

    jsProperty

    Declaration
    protected override string jsProperty { get; set; }
    Property Value
    Type Description
    System.String
    Overrides
    Syncfusion.Blazor.SfBaseExtension.jsProperty

    mainParent

    Declaration
    protected override SfBaseExtension mainParent { get; set; }
    Property Value
    Type Description
    Syncfusion.Blazor.SfBaseExtension
    Overrides
    Syncfusion.Blazor.SfBaseExtension.mainParent

    Scale

    This property allows the user to stretch or scale the images to diagram bounds.

    Declaration
    public Scale Scale { get; set; }
    Property Value
    Type Description
    Scale
    Remarks
    The following values can be set to the scale property,
    1. None - Scale value will be set as None for the image.
    2. Meet – The entire diagram is visible within the viewport.
    3. Slice - Entire viewport is visible within the diagram.
    By default, the scale will be None.
    Examples
    <DiagramPageSettings Height="300" Width="300" ShowPageBreaks="true">
    //set image to the background
    <DiagramBackground Source="https://www.w3schools.com/images/w3schools_green.jpg" Scale="@Scale" />
    </DiagramPageSettings>
    @code{
       ImageAlignment Scale = ImageAlignment.Meet;
    }

    Source

    Defines the source path to the background image.

    Declaration
    public string Source { get; set; }
    Property Value
    Type Description
    System.String
    Examples
    <DiagramPageSettings Height="300" Width="300" ShowPageBreaks="true">
    //set image to the background
    <DiagramBackground Source="https://www.w3schools.com/images/w3schools_green.jpg" Scale="@Scale" />
    </DiagramPageSettings>
     @code{
     ImageAlignment Scale = ImageAlignment.Meet;
     }

    Methods

    BuildRenderTree(RenderTreeBuilder)

    Declaration
    protected override void BuildRenderTree(RenderTreeBuilder __builder)
    Parameters
    Type Name Description
    Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

    Dispose()

    Declaration
    public override void Dispose()
    Overrides
    Syncfusion.Blazor.SfBaseExtension.Dispose()

    GetJSNamespace()

    Declaration
    public string GetJSNamespace()
    Returns
    Type Description
    System.String

    Get the parent namespaces

    OnInitializedAsync()

    Declaration
    protected override Task OnInitializedAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    Returns asynchronous operation when the component is ready to start, having received its initial parameters from its parent in the render tree

    Overrides
    Syncfusion.Blazor.SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task

    Returns asynchronous operation when the component has received parameters from its parent in the render tree, and the incoming values have been assigned to properties

    Back to top Generated by DocFX
    Copyright © 2001 - 2021 Syncfusion Inc. All Rights Reserved