Home » Blog

Getting started with WPF Diagrams 2.0

Tagged as WPF Diagrams

Not long ago we released WPF Diagrams 2.0 which has been packed full of great features and enhancements making it easy to add fantastic diagram support to your applications. This blog post will teach you the basics of getting started with using WPF Diagrams.

WPF Diagrams 2.0 comes with 3 main diagram types to play around with, along with a few simple diagram types that are implemented in some of the samples. Flow diagrams are made up of starting nodes, finishing nodes, steps and decisions. This type of diagram includes connection validation rules that force step nodes to only have a single outbound connection. Step nodes can be displayed as one of many different shapes to represent different types of steps such as a process, document or hard disk. Star diagrams have acyclic tree structures that are good for displaying hierarchical relationships between entities. And shape diagrams (or absolutely positioned diagrams) are made up all sorts of different types of nodes with no limit of where the user can place connections. In the up and coming blog posts, I’ll mostly be using shape diagrams to demonstrate various features and customisations, because shape diagrams are very flexible and general whereas flow and star diagrams have more specific logic.

Getting started

To get started with using WPF Diagrams 2.0, make sure your project has a reference to the Mindscape.WpfDiagramming.Foundation.dll and add the licenses.licx file in the properties folder. Next, include the following namespace declaration to the window that will host the diagram surface:

xmlns:ms="http://namespaces.mindscape.co.nz/wpf"

In order to access the 70+ built in shapes for the shape diagram, you need to include the DiagramShapes resource dictionary which can be done like this:

<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ms:DiagramShapes />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

Now include an instance of the DiagramSurface control. This is the part that displays the diagram and allows users to interact with the nodes and connections. Here you can also set various options such as if node rotation should be enabled, diagram read-only options, and the visibility modes of the scroll bars. Here is a simple example of including a DiagramSurface in the application window:

<ms:DiagramSurface Name="ds"
                   CanRotateNodes="True"
                   ShowConnectionPoints="True" />

Adding a toolbox

Finally, you should include a diagram toolbox with a few diagram nodes so you can start dragging nodes onto the diagram surface. WPF Diagrams 2.0 includes a diagram tool box control that provides grouping and filtering for the diagram node tools. The QuickStart sample project includes a diagram toolbox that is populated with all the different shape nodes, a title node, a comment node and a few different types of connection tools. The code for this can be found in the MainWindow.xaml file.

Here is a cut down example of a diagram toolbox setup that contains a few different shapes in 2 groups:

<ms:DiagramToolBox DockPanel.Dock="Left" Width="260">
    <ms:DiagramToolBoxGroup Header="Rectangles">
        <ms:DiagramNodeTool ms:ShapeTool.Shape="Rectangle" />
        <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundedRectangle" />
        <ms:DiagramNodeTool ms:ShapeTool.Shape="SnipSingleCornerRectangle" />
    </ms:DiagramToolBoxGroup>
    <ms:DiagramToolBoxGroup Header="Basic Shapes">
        <ms:DiagramNodeTool ms:ShapeTool.Shape="Ellipse" />
        <ms:DiagramNodeTool ms:ShapeTool.Shape="IsoscelesTriangle" />
        <ms:DiagramNodeTool ms:ShapeTool.Shape="RightTriangle" />
    </ms:DiagramToolBoxGroup>
</ms:DiagramToolBox>

Here you can see the node tools are split into 2 groups by using the DiagramToolBoxGroup class. This class creates a group of tools in the toolbox that can be expanded or collapsed and can display whatever header name you want.

Formatting the diagram

You may be thinking that all these blue shapes are okay, but you’d really like to style the diagram your way instead of ours. I’ll talk about how to do that in an upcoming blog post, but if you can’t wait, the DiagramFormatter class is the place to start. Check out the help file and the samples for more information and example code, or post a question in the forums if you need help. I’ll also be discussing how to create custom nodes and connections, and describing lots of other features, tricks and techniques, in upcoming posts so stick around the blog to find out more!

If you have any questions about WPF Diagrams 2.0 then let us know by leaving a comment on this blog post, or come visit the forum.

Add your comments
Posted by Jason on 16 May 2011

One Response to “Getting started with WPF Diagrams 2.0”

1. [...] If you don’t already have a diagramming application that you can start adding custom shapes to, then start by reading this ‘getting started’ blog post. [...]

   Mindscape Blog » Blog Archive » WPF Diagrams: Custom Diagram Shapes Aug 30th, 2011

Leave a Reply