DiagramCustomShape.BackgroundImageUrl Property

Specifies the shape background image’s URL.

Namespace: DevExpress.Web.ASPxDiagram

Assembly: DevExpress.Web.ASPxDiagram.v20.1.dll

NuGet Package: DevExpress.Web

Declaration

C#

[DefaultValue("")]
public string BackgroundImageUrl { get; set; }

VB.NET

<DefaultValue("")>
Public Property BackgroundImageUrl As String

Property Value

Type	Default	Description
String	String.Empty	The image URL.

Remarks

A custom shape can be created based on a default shape type or with a custom background image. Use the BackgroundImageUrl property to specify a background image for a shape.

The BackgroundImageUrl property is in effect if the BaseType property value is Unset.

Note, the Type property identifies custom shapes, therefore it must be specified and unique.

Note

Shape images should be supplied as SVG files.

Online Demo

Diagram - Custom Shapes

Example

ASPX

<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px">
    <SettingsToolbox>
        <Groups>
            <dx:DiagramToolboxGroup Category="Custom" CustomCategoryName="hardware" Title="Hardware" />
        </Groups>
    </SettingsToolbox>
    <CustomShapes>
        <dx:DiagramCustomShape CategoryName="hardware" Type="internet" Title="Internet" 
        BackgroundImageUrl="../Content/customshapes/shapes/internet.svg" 
        BackgroundImageLeft="0.15" BackgroundImageTop="0" BackgroundImageWidth="0.7" BackgroundImageHeight="0.7"
        DefaultWidth="0.75" DefaultHeight="0.75" DefaultText="Internet" AllowEditText="false" 
        TextLeft="0" TextTop="0.7" TextWidth="1" TextHeight="0.3">
            <ConnectionPoints>
                <dx:DiagramShapeConnectionPoint Left="0.5" Top="0" />
                <dx:DiagramShapeConnectionPoint Left="0.9" Top="0.5" />
                <dx:DiagramShapeConnectionPoint Left="0.5" Top="1" />
                <dx:DiagramShapeConnectionPoint Left="0.1" Top="0.5" />
            </ConnectionPoints>
        </dx:DiagramCustomShape>
        ...
    </CustomShapes>
</dx:ASPxDiagram>