DiagramCustomShape Class
A custom shape.
Namespace: DevExpress.Web.ASPxDiagram
Assembly: DevExpress.Web.ASPxDiagram.v24.2.dll
Declaration
Related API Members
The following members 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
- Create a shape based on a default shape type
- Create a custom shape template
Create a Shape from an SVG Image
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:
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:
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:
If the AllowEditImage property is set to true, the Diagram context menu displays commands that allow users to change the image.
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:
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:
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:
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.
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:
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.
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:
- Title specifies the shape’s tooltip.
- BackgroundImageToolboxUrl specifies a shape image.
- ToolboxWidthToHeightRatio specifies the aspect ratio of 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:
