Class BackgroundStyle

Represents the characteristics of the background of the SfDiagramComponent.

Inheritance

System.Object

BackgroundStyle

Namespace: Syncfusion.Blazor.Diagram

Assembly: Syncfusion.Blazor.dll

Syntax

public class BackgroundStyle : OwningComponentBase

Remarks

The BackgroundStyle class controls the diagram background, including color and image settings with various scaling and alignment options.

It updates the parent diagram automatically when background properties change.

Examples

The following example demonstrates how to configure various background styles for a diagram.

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle Background="#f0f0f0" 
                         ImageSource="background.jpg" 
                         ImageScale="DiagramScale.Slice" 
                         ImageAlign="ImageAlignment.XMaxYMin" />
    </PageSettings>
</SfDiagramComponent>

Constructors

BackgroundStyle()

Declaration

public BackgroundStyle()

Properties

Background

Gets or sets the background color of the diagram.

Declaration

public string Background { get; set; }

Property Value

Type	Description
System.String	A System.String representing the background color in CSS format. The default value is "transparent".

Remarks

Accepts standard CSS color values such as hex, RGB, color names, or transparent.

Displayed behind the background image defined in ImageSource.

Examples

The following example demonstrates how to handle background changes in a background style component:

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle Background="#f0f0f0" />
    </PageSettings>
</SfDiagramComponent>

BackgroundChanged

Gets or sets the callback to trigger when the Background property value changes.

Declaration

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

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An event callback that is invoked when the background color changes. The default value is an empty callback.

Remarks

Triggered when the Background property changes, enabling custom response logic for background updates.

Provides the new System.String value for implementing custom behavior.

Examples

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

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

ImageAlign

Gets or sets how the background image should be aligned within the diagram area.

Declaration

public ImageAlignment ImageAlign { get; set; }

Property Value

Type	Description
ImageAlignment	An ImageAlignment value specifying the alignment position. The default value is None.

Remarks

Specifies the position of the background image when it doesn't cover the full diagram area.

Examples

The following example demonstrates how to handle image align changes in a background style component:

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle ImageAlign="ImageAlignment.XMaxYMin"/>
    </PageSettings>
</SfDiagramComponent>

ImageAlignChanged

Gets or sets the callback to trigger when the ImageAlign property value changes.

Declaration

public EventCallback<ImageAlignment> ImageAlignChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<ImageAlignment>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the image alignment changes. The default value is an empty callback.

Remarks

This event is triggered when the ImageAlign property value changes, enabling custom response logic for background image alignment updates.

The callback provides the new ImageAlignment value as a parameter for implementing custom behavior based on the updated alignment setting.

Examples

The following example demonstrates how to handle image align changes in a background style component:

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle ImageAlign="ImageAlignment.XMaxYMin"
                         ImageAlignChanged="OnImageAlignChanged" />
    </PageSettings>
</SfDiagramComponent>
@code {
    private void OnImageAlignChanged()
    {
         // Implement custom logic
    }
}

ImageScale

Gets or sets whether the background image should be scaled uniformly within the diagram area.

Declaration

public DiagramScale ImageScale { get; set; }

Property Value

Type	Description
DiagramScale	A DiagramScale value specifying the scaling behavior. The default value is None.

Remarks

Defines how the background image is resized within the diagram area.

Examples

The following example demonstrates how to handle image scale changes in a background style component:

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle ImageScale="DiagramScale.Slice"/>
    </PageSettings>
</SfDiagramComponent>

ImageScaleChanged

Gets or sets the callback to trigger when the ImageScale property value changes.

Declaration

public EventCallback<DiagramScale> ImageScaleChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<DiagramScale>	An Microsoft.AspNetCore.Components.EventCallback<> that is invoked when the image scaling changes. The default value is an empty callback.

Remarks

Triggered when the ImageScale property changes, providing the new DiagramScale value for custom response logic.

Provides the new DiagramScale value for implementing custom behavior.

Examples

The following example demonstrates how to handle image scale changes in a background style component:

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle ImageScale="DiagramScale.Slice"
                         ImageScaleChanged="OnImageScaleChanged" />
    </PageSettings>
</SfDiagramComponent>
@code {
    private void OnImageScaleChanged()
    {
         // Implement custom logic
    }
}

ImageSource

Gets or sets the source URL or path of the background image for the diagram.

Declaration

public string ImageSource { get; set; }

Property Value

Type	Description
System.String	A System.String representing the image source URL or file path. The default value is empty string.

Remarks

Supports common image formats using a relative path, URL, or data URI.

If null or empty, no background image is shown.

Examples

The following example demonstrates how to handle image source changes in a background style component:

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle ImageSource="background.jpg" />
    </PageSettings>
</SfDiagramComponent>

ImageSourceChanged

Gets or sets the callback to trigger when the ImageSource property value changes.

Declaration

public EventCallback<string> ImageSourceChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.String>	An event callback that is invoked when the image source changes. The default value is an empty callback.

Remarks

Triggered when the ImageSource property changes, enabling custom response logic for background image updates.

Provides the new System.String value for implementing custom behavior.

Examples

The following example demonstrates how to handle image source changes in a background style component.

<SfDiagramComponent>
    <PageSettings>
        <BackgroundStyle ImageSource="background.jpg" 
                         ImageSourceChanged="OnImageSourceChanged" />
    </PageSettings>
</SfDiagramComponent>
@code {
    private void OnImageSourceChanged()
    {
         // Implement custom logic
    }
}

Methods

Dispose()

Releases all unmanaged resources used by the Background instance.

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.

OnParametersSetAsync()

Method invoked when any changes in component state occurs.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	="Task".