DevExpress-Examples / wpf-diagramdesigner-create-custom-shapes-with-connection-points

Define custom shapes for the Diagram Designer Control in the XAML markup

WPF DiagramControl - Create Custom Shapes with Connection Points

This example demonstrates how to define custom shapes for the Diagram Designer Control in the XAML markup.

The ShapeTemplate class describes a diagram shape and contains the following segments:

• Start - Specifies the start point of the geometry and includes customization properties. A shape can consist of multiple geometries.
• Line - Defines a line with start and end points.
• Arc - Defines an arc with size and direction.
• ShapePoint - Defines a connection point. To specify connection points, use the ShapeTemplate.ConnectionPoints property.
• Parameter - Defines a parameter that allows users to transform the shape. To specify parameters, use the ShapeTemplate.Parameters property.

Refer to the following help topic for more information about supported segments: Creating Shapes and Containers Using Shape Templates.

To register custom shapes, create a stencil with the DiagramStencil.Create method and pass it to the DiagramToolboxRegistrator.RegisterStencil method.

To create a shape in code, get an instance of your custom stencil, call the DiagramStencil.GetShape method to access the ShapeDescription object, and assign it to the DiagramShape.Shape property:

new DiagramShape() { Shape = customStencil.GetShape("Shape1")}

Files to Review

• CustomShapes.xaml (VB: CustomShapes.xaml)
• MainWindow.xaml (VB: MainWindow.xaml)
• MainWindow.xaml.cs (VB: MainWindow.xaml.vb)

Documentation

• Creating Shapes and Containers Using Shape Templates
• Diagram Designer Control
• Shapes

More Examples

• Create Items with Custom Content in DiagramControl
• Create Custom Diagram Containers and Register Them in the Toolbox and Ribbon Gallery
• Create a DiagramShape Descendant with Editable and Serializable Properties
• DiagramControl for WPF - Change a Shape's Connection Points at Runtime