wpf-115403-controls-and-libraries-diagram-control-examples-how-to-create-custom-shapes-with-custom-connection-points-for-diagramdesignercontrol.md
This example illustrates how to create custom shapes and add them to the DiagramDesignerControl.
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.
To register custom shapes, create a stencil with the DiagramStencil.Create method and pass it to the DiagramToolboxRegistrator.RegisterStencil method.
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows
Namespace DXDiagram.CreateCustomShapes
''' <summary>
''' Interaction logic for App.xaml
''' </summary>
Partial Public Class App
Inherits Application
End Class
End Namespace
<p:ResourceDictionary
xmlns:p="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns="http://schemas.devexpress.com/winfx/2008/xaml/diagram"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ShapeTemplate x:Key="{ShapeKey Shape1}" DefaultSize="50, 100" >
<Start X="0" Y="0"/>
<Line X="1" Y="0" />
<Line X="0.8" Y="0.8" />
<Line X="0" Y="1" />
<ShapeTemplate.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" />
</ShapeTemplate.ConnectionPoints>
</ShapeTemplate>
<!--W - shape width-->
<!--H - shape height-->
<ShapeTemplate x:Key="{ShapeKey Shape2}" DefaultSize="60, 120">
<Start X="0" Y="0" FillColor="Brown"/>
<Arc X="1" Y="0" Size="CreateSize(W/2, H/10)" Direction="Counterclockwise" />
<Arc X="1" Y="1" Size="CreateSize(W/10, H/2)" Direction="Counterclockwise" />
<Arc X="0" Y="1" Size="CreateSize(W/2, H/10)" Direction="Counterclockwise" />
<Arc X="0" Y="0" Size="CreateSize(W/10, H/2)" Direction="Counterclockwise" />
<ShapeTemplate.ConnectionPoints>
<ShapePoint X="0" Y="0" />
<ShapePoint X="1" Y="0" />
<ShapePoint X="0" Y="1" />
</ShapeTemplate.ConnectionPoints>
</ShapeTemplate>
<!--P0 - parameter 0-->
<!--P in Point definition - parameter value -->
<!--P in Value definition - parameter point-->
<ShapeTemplate x:Key="{ShapeKey Shape3}" DefaultSize="60, 120">
<Start X="0" Y="0" FillColor="Brown"/>
<Arc X="1" Y="0" Size="CreateSize(W/2, P0 * H)" Direction="Counterclockwise" />
<Line X="1" Y="1"/>
<Line X="0" Y="1"/>
<Line X="0" Y="0"/>
<ShapeTemplate.ConnectionPoints>
<ShapePoint X="0" Y="0" />
<ShapePoint X="1" Y="0" />
<ShapePoint X="0" Y="1" />
</ShapeTemplate.ConnectionPoints>
<ShapeTemplate.Parameters>
<Parameter DefaultValue="0.1"
Point="CreatePoint(W / 2, P * H)"
Value="P.Y / H"
Min="0" Max="1" />
</ShapeTemplate.Parameters>
</ShapeTemplate>
<!--this shape contains two rows-->
<ShapeTemplate x:Key="{ShapeKey Shape4}" DefaultSize="60, 120" Rows="H*P0;H*(1-P0)" IsQuick="True">
<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"/>
<ShapeTemplate.ConnectionPoints>
<ShapePoint X="0.5" Y="0" />
<ShapePoint X="1" Y="1" />
<ShapePoint X="0.5" Y="2" />
<ShapePoint X="0" Y="1" />
</ShapeTemplate.ConnectionPoints>
<ShapeTemplate.Parameters>
<Parameter DefaultValue="0.5"
Point="CreatePoint(W, P * H)"
Value="P.Y / H"
Min="0" Max="1" />
</ShapeTemplate.Parameters>
</ShapeTemplate>
</p:ResourceDictionary>
<Window x:Class="DXDiagram.CreateCustomShapes.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:dxdiag="http://schemas.devexpress.com/winfx/2008/xaml/diagram"
xmlns:local="clr-namespace:DXDiagram.CreateCustomShapes"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<Grid>
<dxdiag:DiagramDesignerControl Name="diagramControl"/>
</Grid>
</Window>
<Application x:Class="DXDiagram.CreateCustomShapes.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DXDiagram.CreateCustomShapes"
StartupUri="MainWindow.xaml">
<Application.Resources>
</Application.Resources>
</Application>
Imports System
Imports System.Windows
Imports DevExpress.Diagram.Core
Imports DevExpress.Xpf.Core
Namespace DXDiagram.CreateCustomShapes
Partial Public Class MainWindow
Inherits Window
Public Sub New()
InitializeComponent()
InitCustomDiagramShapes()
End Sub
Private Sub InitCustomDiagramShapes()
Dim customShapesDictionary As New ResourceDictionary() With {.Source = New Uri("CustomShapes.xaml", UriKind.Relative)}
Dim stencil = DiagramStencil.Create("MyShapes", "Custom Shapes", customShapesDictionary, Function(shapeName) shapeName)
DiagramToolboxRegistrator.RegisterStencil(stencil)
diagramControl.SelectedStencils.Add("MyShapes")
End Sub
End Class
End Namespace
using System;
using System.Windows;
using DevExpress.Diagram.Core;
using DevExpress.Xpf.Core;
namespace DXDiagram.CreateCustomShapes {
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
InitCustomDiagramShapes();
}
void InitCustomDiagramShapes() {
ResourceDictionary customShapesDictionary = new ResourceDictionary() { Source = new Uri("CustomShapes.xaml", UriKind.Relative) };
var stencil = DiagramStencil.Create("MyShapes", "Custom Shapes", customShapesDictionary, shapeName => shapeName);
DiagramToolboxRegistrator.RegisterStencil(stencil);
diagramControl.SelectedStencils.Add("MyShapes");
}
}
}