Class DiagramBackground

Represents the appearance of the diagram background.

Inheritance
System.Object
SfBaseComponent
SfBaseExtension
DiagramBackground
Inherited Members
Namespace: Syncfusion.Blazor.Diagrams
Assembly: Syncfusion.Blazor.dll
Syntax
public class DiagramBackground : SfBaseExtension, IBaseInit
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

mainParent

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

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

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

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