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 theShapeTemplate.ConnectionPointsproperty.- Parameter - Defines a parameter that allows users to transform the shape. To specify parameters, use the
ShapeTemplate.Parametersproperty.
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:
C#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
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
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
DXDiagram.CreateCustomShapes/CustomShapes.xaml
XAML<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>
DXDiagram.CreateCustomShapes/MainWindow.xaml
XAML<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>
DXDiagram.CreateCustomShapes/MainWindow.xaml.cs(vb)
C#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");
}
}
}