DiagramSettings.CustomShapes Property

Provides access to a collection of custom shapes.

Namespace: DevExpress.Web.Mvc

Assembly: DevExpress.Web.Mvc5.v24.1.dll

NuGet Package: DevExpress.Web.Mvc5

Declaration

C#

public MVCxDiagramCustomShapeCollection CustomShapes { get; }

VB.NET

Public ReadOnly Property CustomShapes As MVCxDiagramCustomShapeCollection

Property Value

Type	Description
MVCxDiagramCustomShapeCollection	A collection of custom shapes.

Remarks

Use the CustomShapes property to extend a collection of built-in shapes with custom shapes.

Run Demo: Custom Shapes

Example

Razor

@Html.DevExpress().Diagram(settings => {
    settings.Name = "Diagram";
    settings.SettingsToolbox.Groups.Add(g => {
        g.Category = DevExpress.Web.ASPxDiagram.DiagramShapeCategory.Custom;
        g.CustomCategoryName = "hardware";
        g.Title = "Hardware";
    });
    settings.CustomShapes.Add(c => {
        c.Type = "internet";
        c.Category = "hardware";
        c.Title = "Internet";
        c.BackgroundImageUrl = "../Content/customshapes/shapes/internet.svg";
        c.BackgroundImageLeft = 0.15M;
        c.BackgroundImageTop = 0;
        c.BackgroundImageWidth = 0.7M;
        c.BackgroundImageHeight = 0.7M;
        c.DefaultWidth = 0.75M;
        c.DefaultHeight = 0.75M;
        c.DefaultText = "Internet";
        c.AllowEditText = true;
        c.TextLeft = 0;
        c.TextTop = 0.7M;
        c.TextWidth = 1;
        c.TextHeight = 0.3M;
        c.ConnectionPoints.Add(0.5M, 0);
        c.ConnectionPoints.Add(0.9M, 0.5M);
        c.ConnectionPoints.Add(0.5M, 1);
        c.ConnectionPoints.Add(0.1M, 0.5M);
    ...
    });
}).Import(Model).GetHtml()

]