Skip to main content

DiagramCustomShape Class

A custom shape.

Namespace: DevExpress.Web.ASPxDiagram

Assembly: DevExpress.Web.ASPxDiagram.v21.2.dll

Declaration

public class DiagramCustomShape :
    CollectionItem

The following members accept/return DiagramCustomShape objects:

Remarks

The DiagramCustomShape class implements a custom shape’s functionality. Use the CustomShapes property to access a collection of custom shapes.

  <dx:ASPxDiagram ID="Diagram" runat="server" >
    <CustomShapes>
      <dx:DiagramCustomShape Type="CustomShape1" ... />
      <dx:DiagramCustomShape Type="CustomShape2" ... />
      <dx:DiagramCustomShape Type="CustomShape3" ... />
    </CustomShapes>
  </dx:ASPxDiagram>

Note

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

You can create a custom shape in the following ways:

Create a Shape from an SVG Image

Run Demo

Use the BackgroundImageUrl property to specify the custom shape’s background image in SVG format.

<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>
<dx:DiagramCustomShape Type="Rounded Rectangle" BackgroundImageUrl="../Content/images/roundedRectangle.svg" />

The image below shows the result:

Custom Shape Background Image

The following properties allow you to customize the image size and position:

Shape Size

Use the following properties to specify the shape size settings:

<dx:DiagramCustomShape Type="Rounded Rectangle" BackgroundImageUrl="../Content/images/shapes/roundedRectangle.svg" 
  DefaultWidth="2" DefaultHeight="1" />

The image below shows the result:

Custom Shape Size

Shape Inner Image

A custom shape can display an inner image. Use the DefaultImageUrl property to specify the image URL.

The following properties allow you to specify the image size and position:

<dx:DiagramCustomShape Type="Rounded Rectangle" BackgroundImageUrl="../Content/images/shapes/roundedRectangle.svg" 
  DefaultWidth="2" DefaultHeight="1" 
  DefaultImageUrl="../Content/images/photo.png" 
  ImageHeight="0.8" ImageWidth="0.3" ImageTop="0.1" ImageLeft="0.1" />

The image below shows the result:

Custom Shape Inner Image

If the AllowEditImage property is set to true, the Diagram context menu displays commands that allow users to change the image.

Custom Shape Image Context Menu

Shape Text

The DefaultText property specifies the shape text. Users can change the text if the AllowEditText property is set to true.

Use the following properties to specify the size and position of the text container:

<dx:DiagramCustomShape Type="Rounded Rectangle" BackgroundImageUrl="../Content/images/shapes/roundedRectangle.svg" 
  DefaultWidth="2" DefaultHeight="1" 
  DefaultImageUrl="../Content/images/photo.png" 
  ImageHeight="0.8" ImageWidth="0.3" ImageTop="0.1" ImageLeft="0.1"
  DefaultText ="Employee" TextLeft="0.4" TextWidth="0.6" />

The image below shows the result:

Custom Shape Text

You can use the TextStyle property to specify the default style settings for a shape’s text.

<dx:ASPxDiagram ID="Diagram" runat="server" >
  <DefaultItemProperties TextStyle="font-size: 14pt;" />
  <%-- ... --%>
</dx:ASPxDiagram>

The image below shows the result:

Custom Shape Text Size

Connection Points

Use the ConnectionPoints property to specify a collection of custom connection points for a shape. If the property is not specified, the shape displays the default connection points.

<dx:DiagramCustomShape Type="Rounded Rectangle" BackgroundImageUrl="../Content/images/shapes/roundedRectangle.svg" 
  DefaultWidth="2" DefaultHeight="1" 
  DefaultImageUrl="../Content/images/photo.png" 
  ImageHeight="0.8" ImageWidth="0.3" ImageTop="0.1" ImageLeft="0.1"
  DefaultText ="Employee" TextLeft="0.4" TextWidth="0.6" >
  <ConnectionPoints>
    <dx:DiagramShapeConnectionPoint Left="0.5" Top="0" />
    <dx:DiagramShapeConnectionPoint Left="0.5" Top="1" />
  </ConnectionPoints>
</dx:DiagramCustomShape>

The image below shows the result:

Custom Shape Connection Points

Create a Shape Based on a Default Shape

The ASPxDiagram control allows you to create a custom shape based on a default shape.

Use the BaseType property to specify a shape’s base type. The ASPxDiagram creates a custom shape with predefined settings for the base type shape. You can use members described in the previous section to customize the shape’s settings.

Run Demo

Note

Some settings are hardcoded and cannot be customized. For instance, you cannot change the background shape image for a shape type, and the shape inner image can be specified for card shapes only.

<dx:DiagramCustomShape Type="Custom Rectangle" BaseType="Rectangle" 
  DefaultWidth="2" DefaultHeight="0.7" DefaultText ="Person's Name" />

You can use the Style and TextStyle properties to specify the default style settings for a shape and a shape’s text.

<dx:ASPxDiagram ID="Diagram" runat="server" >
  <DefaultItemProperties TextStyle="font-size: 14pt;" Style="fill: yellow;" />
  <%-- ... --%>
</dx:ASPxDiagram>

The image below shows the result:

Custom Shape with Base Type

Create a Custom Shape Template

Handle the CustomShapeCreateTemplate event to specify a template for custom shapes. The item event parameter gets the processed item. Add the template content (SVG elements) to the container property.

Run Demo

The following properties allow you to customize the template size and position:

<script>
    function onCustomShapeCreateTemplate(s, e) {
        var department = getDepartment(e.item.key);
        var svgNS = "http://www.w3.org/2000/svg"
        var svgEl = document.createElementNS(svgNS, "svg");
        svgEl.setAttribute("class", "template");
        e.container.appendChild(svgEl);
        var textEl = document.createElementNS(svgNS, "text");
        textEl.setAttribute("class", "template-name");
        textEl.setAttribute("x", "50%");
        textEl.setAttribute("y", "35%");
        textEl.textContent = department.DepartmentName;
        svgEl.appendChild(textEl);
        var btnEl = document.createElementNS(svgNS, "text");
        btnEl.setAttribute("class", "template-button");
        btnEl.setAttribute("x", "50%");
        btnEl.setAttribute("y", "75%");
        btnEl.textContent = "Show Details";
        btnEl.onclick = function() { showInfo(department); };
        svgEl.appendChild(btnEl);
    }
</script>

<dx:ASPxDiagram ID="Diagram" ClientInstanceName="diagram" runat="server" Width="100%" Height="600px" 
    NodeDataSourceID="DepartmentDemoDataSource" OnNodeDataBound="Diagram_NodeDataBound">
    <Mappings>
        <Node Key="ID" Text="" ParentKey="ParentID" />
    </Mappings>
    <CustomShapes>
        <dx:DiagramCustomShape Type="department" BaseType="Rectangle" DefaultWidth = 2 
            DefaultHeight = 0.75 AllowEditText = false AllowResize = false />
    </CustomShapes>
    <ClientSideEvents CustomShapeCreateTemplate="onCustomShapeCreateTemplate" />
</dx:ASPxDiagram>
protected void Diagram_NodeDataBound(object sender, DiagramNodeEventArgs e) {
    e.Node.Type = "department";
}

Add a Custom Shape to the Toolbar

To add a custom shape to the toolbar, specify the shape’s CategoryName property and add a group for the specified custom category in the SettingsToolbox property.

The following properties allow you to specify how the toolbox displays the shape:

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 26">
  <g><rect rx="8" ry="8" x="0.5" y="0.5" width="47" height="25"
      style="fill:#FFFFFF; stroke:#000000; stroke-width:2px;"/></g>
  <g><rect rx="2" ry="2" x="4" y="4" width="17" height="17" style="fill:rgb(100, 100, 100);"/></g>
</svg>
<dx:ASPxDiagram ID="Diagram" runat="server" >
  <CustomShapes>
    <dx:DiagramCustomShape CategoryName="custom" Type="Rounded Rectangle" 
      BackgroundImageToolboxUrl="../Content/images/shapes/roundedRectangleToolbox.svg"... />
  </CustomShapes>
  <SettingsToolbox>
    <Groups>
      <dx:DiagramToolboxGroup Category="Custom" CustomCategoryName="custom" Title="Custom" />
    </Groups>
  </SettingsToolbox>
</dx:ASPxDiagram>

The image below shows the result:

Custom Shape in Toolbox

Inheritance

See Also