Create Custom Shape
This tutorial will guide you through the task of creating a custom shape.
In order to create a custom shape control, you need to define a custom control deriving from the RadDiagramShapeBase or the RadDiagramShape class.
With the 2024 Q3 SP1 release, the RadDiagram control requires registering the custom types of shapes, connections, and connectors, in order to deserialize them successfully. Read more about this change here.
When deciding which class to inherit from, you need to keep in mind that the RadDiagramShapeBase is the base class of the Diagramming shapes and therefore the RadDiagramShape class derives from it. This is why when you need to create a custom shape, it's common to inherit the base class. However if you need a custom shape exposing a Geometry property, then you'll need to derive from the RadDiagramShape class.
Let's take this step by step:
-
First you need to create a custom control. In order to do so you can use the Visual Studio -> Add New Item... dialog to add WPF Custom Control
Name the new control CustomShape and click OK. This action will create two new files in your application - a class file and a Generic.xaml file with the default style of your custom control.
-
Change the type of the CustomShape class to derive from RadDiagramShapeBase:
-
Modify the default ControlTemplate of the CustomShape to better fit your needs. In this tutorial we will create a radio station loading shape which displays the name and frequency of a radio station. It also indicates the current loading process and the rating of the station. Below you can find the custom Style for that shape:
-
Now that your custom control is defined and its ControlTemplate is customized, you can use it as a shape in your Diagramming drawing canvas:
The local alias points to the namespace of the CustomShape class.
As a result you'll get the following custom shape:
Please note that in case you need to bind the RadDiagram control to a collection of business data and you need to display the business data in a custom shape, then you have to create a custom RadDiagram. In the custom diagram class you need to override the IsItemItsOwnShapeContainerOverride and GetShapeContainerForItemOverride methods to return the custom shape type:
In scenarios where you want to create custom container shapes, you can override the GetShapeContainerForItemOverridem method of the RadDiagram. Inside the method, you can return your custom container shape.
You can download a sample project from our CodeLibrary.