WPF Diagramming. Simple diagramming CTP project for process designing.

While preparing material and samples for my next 5 or 6 articles towards the diagramming I’ve come to conclusion that it would be perfect to implement some kind of generic UI for testing everything connected to diagramming. I’ve spent the weekend preparing the draft project that could be close to my vision and needs.

Again I must mention the Unfold project that inspired me very much. This is still a best free implementation and starter kit that can be found all over the Internet for present moment and the sources are worth looking at. I really appreciate the work that was done to perform it.

When I started developing my own vision of diagramming approach I promised myself 2 things to remember: not to use the Unfold sources and not to mix my actual job sources and approaches so keeping solution in a "home project" mode as long as possible. As I’m reading and reviewing the Unfold sources almost every day to get some new ideas how this or that part could be done in the way I would prefer some parts may seem familiar to you, for example IMouseListener, IShapeCreator, Undo/Redo functionality. This was done from the scratch because I hate copy-pasting approaches and I’ve left the names and some pieces for convenience purposes. Later all the parts will be definitely changed to expose the architecture I’m implementing actually.

Here’s what you can download and play with


I made a strict decision for using a service-oriented approach exposing IServiceProvider for my further samples towards diagramming. This give me everything I need for the further framework extensions and the most easiest ways of maintaining the blocks. I won’t dwell on the blocks I’ve used for this project in this article as I’m going to give more details explanations in the later posts.

The project is a very very rough and draft implementation. If you become interested in it I advice you to stay on the line with the blog I’ll definitely provide a lot of new information towards diagramming 😉 Any feedback and questions are appreciated so don’t hesitate

The key stuff I concentrated on:

1. Selection Service

Very simple service for shape selection on the drawing surface providing a basic circle adorner. Each selectable shape can contain own adorners and expose Select/Unselect calls managed by the service. I’m going to provide additional sample for selection service that can replace existing one and that implements it’s own way of selection without shapes.

2. Undo/Redo Service

Basic implementation of undo/redo functionality. Now supports only shape addition to canvas and deletion. It still requires a lot of refactoring that I’m going to finish it as soon as possible.

3. Tool Service

I tried to turn everything into tools. The connectors are not yet finished but the idea is the same. Tool service fully maintain the tools and later I’m going to move them to external assemblies to provide the possibilities of separate development and loading. The same is for shapes.

4. Sample connector tools

For this project I’ve provided three sample connectors: plain line, arrow line and bezier line (taken from Microsoft VPL designer). I liked the idea of shape creators implemented in Unfold project so I’ve left the same naming for now but guess I would better call them "Materials" at later implementations. Each tool can have different materials (this can be seen from the tool registration). Also there’s some simple binding converters for automatic line positioning according to drag operations.

5. Main design host

Main abstraction layer for the designer that is used for hosting and maintaining  all the services registered.


And a lot of other interesting blocks that can be easily changed or extended. At least I try to keep this way.

Still continue to work hard on the project…


Source code for the article


3 thoughts on “WPF Diagramming. Simple diagramming CTP project for process designing.

  1. Hi,
    good job. Have you considered developing this diagramming tool for Silverlight ?
    WPF is quite good, but Silverlight will make it very easy to embed this tool in any web application.
    Jacob C.

  2. Hey Denis,
    Just started looking at WPF yesterday, your Diagramming tool has given a lot of insight to my querries.
    Thanks for the sample.
    Let me know if you keep it updated, I’d love to have the latest 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s