Class ImageElement

Represents a DiagramElement that defines and renders image content within diagrams.

Inheritance
object
CommonElement
DiagramElement
ImageElement
Inherited Members
Namespace: Syncfusion.Blazor.Diagram
Assembly: Syncfusion.Blazor.dll
Syntax
public class ImageElement : DiagramElement
Remarks

The ImageElement class provides functionality for displaying images as part of diagram elements with support for scaling, alignment, and positioning.

Examples

This example demonstrates how to create a Image shape.

Node node5 = new Node()
{
  Shape = new ImageShape()
  {
    Type = NodeShapes.Image, ImageAlign = ImageAlignment.None, Scale = DiagramScale.None,
    Source = " https://www.syncfusion.com/content/images/nuget/sync_logo_icon.png" 
  },
};
nodes.Add(node5);

Constructors

ImageElement()

Initializes a new instance of the ImageElement class.

Declaration
public ImageElement()
Remarks

Creates a new ImageElement with default property values.

ImageElement(ImageElement)

Creates a new instance of the ImageElement from the given ImageElement.

Declaration
public ImageElement(ImageElement src)
Parameters
Type Name Description
ImageElement src

The source ImageElement to copy from. If null, only the base element properties are initialized.
Remarks

Creates a deep copy of all image-related properties.

Properties

ImageAlign

Gets or sets the alignment of the image within the bounds specified for the ImageElement.

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

An ImageAlignment value that specifies how the image is positioned within the element's boundaries. The default value is None.
Remarks

Determines how the image is positioned within the element's boundaries.

Examples

The following example demonstrates how to set the image alignment for an image element:

Node node5 = new Node()
{
  Shape = new ImageShape()
  {
    Type = NodeShapes.Image, ImageAlign = ImageAlignment.None, Scale = DiagramScale.None,
    Source = " https://www.syncfusion.com/content/images/nuget/sync_logo_icon.png" 
  },
};
nodes.Add(node5);

ImageScale

Gets or sets how the image will be scaled to fit within the bounds specified by the image scale property

Declaration
public DiagramScale ImageScale { get; set; }
Property Value
Type Description
DiagramScale

A DiagramScale specifying the scaling behavior for the image content. The default value is None.
Remarks

Determines how the image content is resized and positioned within the element's boundaries.

Examples

The following example demonstrates how to set the image scale for an image element:

Node node5 = new Node()
{
  Shape = new ImageShape()
  {
    Type = NodeShapes.Image, ImageAlign = ImageAlignment.None, Scale = DiagramScale.None,
    Source = " https://www.syncfusion.com/content/images/nuget/sync_logo_icon.png" 
  },
};
nodes.Add(node5);

ImageSize

Gets or sets the actual size dimensions of the ImageElement to be rendered in the diagram.

Declaration
public DiagramSize? ImageSize { get; set; }
Property Value
Type Description
DiagramSize

A DiagramSize structure containing the width and height dimensions of the image element. The default value is null.
Remarks

When null, the image uses natural dimensions. Setting this property overrides automatic sizing behavior.

Source

Gets or sets the source URL or path of the ImageElement.

Declaration
[JsonPropertyName("source")]
public string? Source { get; set; }
Property Value
Type Description
string

A string representing the image source URL or file path. The default value is null.
Remarks

Setting this property updates the image displayed by the element.

Examples

The following example demonstrates how to set the source URL for an image element:

Node node5 = new Node()
{
  Shape = new ImageShape()
  {
    Type = NodeShapes.Image,
    Source = " https://www.syncfusion.com/content/images/nuget/sync_logo_icon.png" 
  },
};
nodes.Add(node5);

Methods

Clone()

Creates a new ImageElement that is a copy of the current image element.

Declaration
public override object Clone()
Returns
Type Description
object

A new ImageElement instance that is a copy of the current image element.
Overrides
Remarks

This method creates an independent copy with identical properties and configuration settings.