Class ImageElement
Represents a DiagramElement that defines and renders image content within diagrams.
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
public string Source { get; set; }
Property Value
Type | Description |
---|---|
System.String | A System.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 |
---|---|
System.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.