Creating the Diagram Surface

The DiagramSurface control is the starting point for all WPF Diagrams applications. A DiagramSurface is responsible for the display of a diagram.

If you are using the visual designer, you can create a DiagramSurface by dragging and dropping from the Toolbox. For this walkthrough, we recommend creating a DockPanel first and adding the DiagramSurface to that.

If you are using the XAML editor, you can create a DiagramSurface as follows:

Add the namespace declaration xmlns:ms=”http://namespaces.mindscape.co.nz/wpf” to the Window element.
Replace the Grid element inside the Window with a DockPanel element.
Inside the DockPanel, add the following declaration:

CopyCreating a diagram surface

<ms:DiagramSurface Name="ds" />

Our application is going to use the built-in shapes and styles, so we also need to reference those shapes and styles by importing the DiagramShapes resource dictionary. Add the following to your Window.Resources section:

CopyImporting common diagramming resources

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

This is sufficient to create the DiagramSurface, but if you run the application now, it won’t display anything, because the diagram doesn’t contain anything to be displayed. In the next step, we’ll add some simple shapes to the diagram.

Next: Adding Nodes to the Diagram.