How to: Create Custom Shapes with Connection Points

Nov 13, 2018
3 minutes to read

The Diagram control supports a special language for defining shapes. The main element that contains shape description is ShapeTemplate. This element describes a shape contour and may contain several segments:

Start. Specifies the start point
Line. Defines a line with start and end points
Arc. Defines an arc with start and end points

To specify connection points, use the ShapeTemplate.ConnectionPoints property.

Shapes may contain parameters. Parameters may be used to dynamically calculate an end point, row height, and other properties. To specify parameters, use the ShapeTemplate.Parameters property.

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

Note

Starting with version 16.1, it is recommended to use XML to describe custom shapes. If you prefer to use XAML instead, take a look at the following example: How to: Create Custom Shapes with Connection Points Using XAML

View Example

Form1.cs
CustomShapes.xml
Form1.vb

csharp

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using DevExpress.Diagram.Core;
using DevExpress.Diagram.Core.Shapes;
using System.Windows;
using System.IO;
using System.Reflection;

namespace XtraDiagram.CreateCustomShapes {
    public partial class Form1 : DevExpress.XtraBars.Ribbon.RibbonForm {
        public Form1() {
            InitializeComponent();
            RegisterCustomShapes();
            this.diagramControl1.SelectedStencils = new StencilCollection(new string[] { "CustomShapes" });
        }
        protected override void OnLoad(EventArgs e) {
            base.OnLoad(e);
            this.diagramControl1.InitializeRibbon(this.ribbonControl1);
        }

        void RegisterCustomShapes() {
            using(var stream = Assembly.GetExecutingAssembly().GetManifestResourceStream("XtraDiagram.CreateCustomShapes.CustomShapes.xml")) {
                var stencil = DiagramStencil.Create("CustomShapes", "Custom Shapes", stream, shapeName => shapeName);
                DiagramToolboxRegistrator.RegisterStencil(stencil);
            }
        }
    }

}

xml

<?xml version="1.0"?>
<Shapes xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  <ShapeTemplate Id="Shape1" DefaultSize="50,100" Rows="*" Columns="*">
    <Start X="0" Y="0" />
    <Line X="1" Y="0" />
    <Line X="0.8" Y="0.8" />
    <Line X="0" Y="1" />
    <ConnectionPoints>
      <ShapePoint X="0" Y="0" />
      <ShapePoint X="0.5" Y="0" />
      <ShapePoint X="1" Y="0" />
      <ShapePoint X="0.8" Y="0.8" />
      <ShapePoint X="0" Y="1" />
      <ShapePoint X="0" Y="0.5" />
    </ConnectionPoints>
    <Parameters />
  </ShapeTemplate>
  <ShapeTemplate Id="Shape2" DefaultSize="60,120" Rows="*" Columns="*">
    <Start X="0" Y="0" FillColor="Brown" />
    <Arc X="1" Y="0" Size="CreateSize([W] / 2, [H] / 10)" />
    <Arc X="1" Y="1" Size="CreateSize([W] / 10, [H] / 2)" />
    <Arc X="0" Y="1" Size="CreateSize([W] / 2, [H] / 10)" />
    <Arc X="0" Y="0" Size="CreateSize([W] / 10, [H] / 2)" />
    <ConnectionPoints>
      <ShapePoint X="0" Y="0" />
      <ShapePoint X="1" Y="0" />
      <ShapePoint X="0" Y="1" />
    </ConnectionPoints>
    <Parameters />
  </ShapeTemplate>
  <ShapeTemplate Id="Shape3" DefaultSize="60,120" Rows="*" Columns="*">
    <Start X="0" Y="0" FillColor="Brown" />
    <Arc X="1" Y="0" Size="CreateSize([W] / 2, [P0] * [H])" />
    <Line X="1" Y="1" />
    <Line X="0" Y="1" />
    <Line X="0" Y="0" />
    <ConnectionPoints>
      <ShapePoint X="0" Y="0" />
      <ShapePoint X="1" Y="0" />
      <ShapePoint X="0" Y="1" />
    </ConnectionPoints>
    <Parameters>
      <Parameter DefaultValue="0.1" Value="[P.Y] / [H]" Point="CreatePoint([W] / 2, [P] * [H])" Min="0" Max="1" />
    </Parameters>
  </ShapeTemplate>
  <ShapeTemplate Id="Shape4" DefaultSize="60,120" IsQuick="true" Rows="[H] * [P0];[H] * (1 - [P0])" Columns="*">
    <Start X="0" Y="0" FillColor="Green" />
    <Line X="1" Y="0" />
    <Line X="1" Y="1" />
    <Line X="0" Y="1" />
    <Start X="0" Y="1" FillColor="Red" />
    <Line X="1" Y="1" />
    <Line X="1" Y="2" />
    <Line X="0" Y="2" />
    <ConnectionPoints>
      <ShapePoint X="0.5" Y="0" />
      <ShapePoint X="1" Y="1" />
      <ShapePoint X="0.5" Y="2" />
      <ShapePoint X="0" Y="1" />
    </ConnectionPoints>
    <Parameters>
      <Parameter DefaultValue="0.5" Value="[P.Y] / [H]" Point="CreatePoint([W], [P] * [H])" Min="0" Max="1" />
    </Parameters>
  </ShapeTemplate>
</Shapes>

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Linq
Imports System.Text
Imports System.Windows.Forms
Imports DevExpress.Diagram.Core
Imports DevExpress.Diagram.Core.Shapes
Imports System.Windows
Imports System.IO
Imports System.Reflection

Namespace XtraDiagram.CreateCustomShapes
    Partial Public Class Form1
        Inherits DevExpress.XtraBars.Ribbon.RibbonForm

        Public Sub New()
            InitializeComponent()
            RegisterCustomShapes()
            Me.diagramControl1.SelectedStencils = New StencilCollection(New String() {"CustomShapes"})
        End Sub
        Protected Overrides Sub OnLoad(ByVal e As EventArgs)
            MyBase.OnLoad(e)
            Me.diagramControl1.InitializeRibbon(Me.ribbonControl1)
        End Sub

        Private Sub RegisterCustomShapes()
            Using stream = System.Reflection.Assembly.GetExecutingAssembly().GetManifestResourceStream("CustomShapes.xml")
                Dim stencil = DiagramStencil.Create("CustomShapes", "Custom Shapes", stream, Function(shapeName) shapeName)
                DiagramToolboxRegistrator.RegisterStencil(stencil)
            End Using
        End Sub
    End Class

End Namespace