menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class ImageElement - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    Class ImageElement

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

    Inheritance
    System.Object
    CommonElement
    DiagramElement
    ImageElement
    Inherited Members
    CommonElement.ActualSize
    CommonElement.Bounds
    CommonElement.CornerRadius
    CommonElement.DesiredSize
    CommonElement.Flip
    CommonElement.FlipMode
    CommonElement.Height
    CommonElement.HorizontalAlignment
    CommonElement.ID
    CommonElement.IsDirt
    CommonElement.Margin
    CommonElement.MaxHeight
    CommonElement.MaxWidth
    CommonElement.MinHeight
    CommonElement.MinWidth
    CommonElement.OffsetX
    CommonElement.OffsetY
    CommonElement.OuterBounds
    CommonElement.ParentID
    CommonElement.Pivot
    CommonElement.RelativeMode
    CommonElement.RotationAngle
    CommonElement.Shadow
    CommonElement.Style
    CommonElement.VerticalAlignment
    CommonElement.Visible
    CommonElement.Width
    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
    DiagramElement.Clone()
    Remarks

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

    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved