Telerik Q1.2012 XAML Controls are here! 

And one of the most interesting new pieces there is the Diagramming control/framework. It is a product of joint venture between Telerik and our awesome partner - Orbifold.

RadDiagram brings lots of new and exiting possibilities to both WPF and Silverlight worlds. In this post I'll show off what RadDiagram is and how you can best use it for number of different applications. Let's first take a look and play with it.

Control or a Framework?

The Control.

RadDiagram is very extensible and flexible Control (part of the Telerik.Windows.Controls.Diagrams assembly). It mimics the intrinsic ItemsControl and has two major types of children:

• RadDiagramShape - an object that describes the nodes of the diagram. You can configure its form using the Geometry property as it allows you to define a custom geometry. But note that it is also a ContentControl, meaning that you can add any content to it - TreeView, GridView or any other XAML control you are accustomed to.
• RadDiagramConnection - an object that connects zero, one or two shapes. It provides lots of properties to further customize it and extend it.

RadDiagram also brings you all the XAML goodies you are used to plus much more features you'd love. Let me just name a few:

• Binding to list of objects and MVVM support
• Easy declarative composition model - create beautiful diagrams with just few lines of XAML
• UI Virtualization 
• Built-in Shape and Connection's Manipulations and Editing
• Plenty of RoutedCommands to ease you hook to ready functionality. Also built in keyboard support
• Plenty of RoutedEvents that you can hook to and handle
• Serialization - one of my favourite features - you can copy/paste diagram items between Silverlight and WPF applications. You can also save and load entire diagram
• Clipboard operations - Copy, Cut, Paste and Delete
• Built in Undo-Redo framework that works for all and every operation, but also gives you extensible API to hook up and add your functionality to the stack
• Pan and Zoom
• Align and Snap to grid shapes
• Different types of selection modes
• Read-only diagram - there are plenty of properties you can modify to suits your needs

The Framework.

But behind all that XAML goodies, there is a rich Diagramming Framework (Telerik.Windows.Diagrams.Core) that deals with the core objects and functionality - I call that Graph Object Model (GOM). This framework is platform independent and can be easily reused across other .Net technologies. The tricky part here is that the core framework and services depends only on bunch of interfaces and not on the real classes. This gives us a good chance to reuse the core in multiple platforms. 

• Graph - The structure that contains the nodes and the connections of the Diagram
• Node (shape, vertex) - Object in a graph
• Link (connection, edge) - Object that is part of the graph and connects zero, one or two nodes
• Connector - Defines a point of a Shape that you can connect a connection to it. Usually a node has four built-in connectors
• Graph analysis - A set of functionality that helps you find Spanning trees, find shortest graph paths and many other interesting stuff and algorithms.
• Layout and Routing algorithms - A set of algorithms that describes how the nodes and connections should be layout

The Applications.

There are hundreds of different diagrams and thousands of different types of diagramming applications. There are tons of features that can be added to a diagram control, but they are not the same for each and every type of diagram. That is why we tried to add only the most common and reusable features to the RadDiagram and leave a lot of places for extensibility. RadDiagram is just your starting point, but then you'll have to add some custom (business) logic and rules, custom layout algorithms and custom types of shapes and connections. For example our four major samples in the public demos site have also some custom, in place logic that is different. 

The Class Diagram.

You can take a look at the beautiful Class Diagram example that shows the entire RadDiagram class structure.

This is just the beginning of a series of posts regarding RadDiagram, so you'd better stay tuned. Your feedback and comments are more than welcome.