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