DiagramCustomShape.BackgroundImageUrl Property

Specifies the shape background image’s URL.

Namespace: DevExpress.Web.ASPxDiagram

Assembly: DevExpress.Web.ASPxDiagram.v20.2.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 URL of an SVG image.

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 SVG image for a shape. The BackgroundImageUrl property is in effect if the BaseType property value is Unset.

Run Demo: Diagram - Custom Shapes

The Type property identifies custom shapes. This property should be specified and unique.

Example

The following example shows how to create a custom shape and add it to a custom category.

ASPX

<dx:ASPxDiagram ID="Diagram" runat="server" Width="100%" Height="600px">
    <SettingsToolbox>
        <Groups>
            <dx:DiagramToolboxGroup Category="General" />
            <dx:DiagramToolboxGroup Category="Custom" CustomCategoryName="others" Title="Others" />
        </Groups>
    </SettingsToolbox>
    <CustomShapes>
        <dx:DiagramCustomShape CategoryName="others" Type="Rounded rectangle" DefaultWidth="1" 
            DefaultHeight="0.75" BackgroundImageUrl="../Content/images/shapes/roundedRectangle.svg">
        </dx:DiagramCustomShape>
    </CustomShapes>
</dx:ASPxDiagram>

roundedRectangle.svg

<svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 26">
    <g>
        <rect rx="5" ry="5" x="0.5" y="0.5" width="47" height="25"
            style="fill:#FFFFFF;stroke:#000000;stroke-width:1px;"/>
    </g>
</svg>