Introduction

Telerik has great controls to use for any kind of application. The RadDiagram control ships with the release of Rad Controls for Silverlight 5 version. In this article we would see a step by step approach to create a custom RadDiagramShape or you can say a custom shape to draw with RadDiagram control.

To Start with, we need to create a sample application; which should have the following Telerik binaries included. Well the Telerik.Windows.Controls.Diagrams.Extensions binary could be excluded; as we are creating a custom shape.

Image may be NSFW.
Clik here to view.

Step 1

Create a folder where you could store all the custom shapes; if you have created a folder named “CustomControls” then it’s awesome.

Right Click on the folder and add a new Item.

Image may be NSFW.
Clik here to view.

From the templates displayed, choose the “Silverlight Templated Control” name the CS file.

Image may be NSFW.
Clik here to view.

You would be seeing the CS file is added and a Generic.xaml resource dictionary is also added to a new folder Themes.

Step 2

As soon as you have created the above files, open the CS file and inherit from RadDiagramShape. The default class that is inherited when you create the class is Control.

Image may be NSFW.
Clik here to view.

Also notice that, you have a style added to the Generic.xaml.

Step 3

Use proper namespaces in the Generic.xaml. That’s because; when you create the files, the default namespace is referred as local. And if you have the CustomShape.cs (in this sample) located in some other namespace; It would give you run time exception.

Image may be NSFW.
Clik here to view.

Step 4

Design your custom shape. In this sample let’s create a custom shape that could be used for Use-Case diagrams. Let’s say user shape.

So the following xaml is for the custom shape.

Image may be NSFW.
Clik here to view.

So what we are doing in the above xaml is; an image inside viewbox is added for the custom shape.

Now let’s add two of the custom shape control and see how are doing.

Image may be NSFW.
Clik here to view.

Well the custom shape is doing well with all the default features. Let’s try to add a connector between these shapes.

To add a connector, you could follow the xaml mentioned below.

Image may be NSFW.
Clik here to view.

As you see; you need to add Source and Destination to start the connection with source and destination.

Let’s see, whether it works.

Image may be NSFW.
Clik here to view.

When the page loaded, both the shapes were connected; but when I try to disconnect an end of the connector and re attaches the connector adorners are not displayed.

Note that, this feature comes with the inbuilt shapes provided in RadDiagram.

To fix that in our custom shape, we need to go to the next step.

Step 5

First thing, we need to have a ConnectorControl in our custom shape. The ConnectorsControl is responsible for showing the connect adorners.

To add that control you need to add the namespace as follows.

Image may be NSFW.
Clik here to view.

The above namespace is for the diagram primitive controls. Using this we could add a ConnectorsControl in our custom shape.

Add the custom shape as follows:

Image may be NSFW.
Clik here to view.

Always remember that, you have to add the control lower the stack, so that it should be visible.

Step 6

You need to add the Visual State Manager to manage the states for the custom shape. Follow the below xaml.

Image may be NSFW.
Clik here to view.

As you see in the above image, we have added the default states of the RadDiagramShape control and our ConnectorsControl would be either visible or be collapsed.

This is the last step for creating a custom shape; let’s test it one more time.

Image may be NSFW.
Clik here to view.

Oh, nice. It’s working as expected.

Hope this article helps, thanks for reading.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.