Customising the Display Style

Our diagram surface is now displaying content using a default built-in style. However, many applications will have their own visual themes so it’s worth knowing how to do this.

Creating the Style

The visual style for shape nodes is specified as a standard WPF Style object, with a TargetType of Path. For this walkthrough we will use a simple flat-color style.

CopyThe style for shape nodes

<Style x:Key="ShapeNodePathStyle" TargetType="Path">
  <Setter Property="Stroke" Value="Navy" />
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Fill" Value="LightSteelBlue" />
  <Setter Property="Stretch" Value="Fill" />
</Style>

Wiring up the Style

For full control over the diagram display style, we would need to supply a diagram formatter object. However, for a diagram based only on shapes, we can skip this step because the DiagramSurface will use a default formatter. Instead, we can use the ShapeTool helper class to wire up the shape node style directly on the DiagramSurface.

CopyWiring up the style to the DiagramSurface

<ms:DiagramSurface Name="ds" 
                   ms:ShapeTool.ShapePathStyle="{StaticResource ShapeNodePathStyle}" 
                   />

Now we can add shape nodes to our diagram and have them displayed in our chosen style. Of course, we really want the user to be able to add items to the diagram, rather than adding items ourselves through code. So the next step is to add a toolbox.

Next: Adding a Toolbox.