Adding a Toolbox
We can now write code to display diagrams, but we don’t yet have a way for users to add their own shapes to the diagram. Of course we could hook up our existing node adding code to a custom user interface, but WPF Diagramming provides a built-in toolbox control which automatically displays the correct icons, supports both dragging and charged cursor modes, and provides grouping and filtering for large toolboxes.
A DiagramToolBox control contains a set of DiagramToolBoxGroup entries, each of which in turn contains a set of tools. For creating nodes, the tools are of type DiagranNodeTool. DiagramNodeTool is a pretty flexible class, but for shapes we don’t need all its flexibility. Instead, we will use the ShapeTool class to associate each DiagramNodeTool with a shape.
CopyA minimal diagramming toolbox<ms:DiagramToolBox> <ms:DiagramToolBoxGroup Header="Rectangles"> <ms:DiagramNodeTool ms:ShapeTool.Shape="Rectangle" /> <ms:DiagramNodeTool ms:ShapeTool.Shape="RoundedRectangle" /> </ms:DiagramToolBoxGroup> <ms:DiagramToolBoxGroup Header="Basic Shapes"> <ms:DiagramNodeTool ms:ShapeTool.Shape="Ellipse" /> <ms:DiagramNodeTool ms:ShapeTool.Shape="Parallelogram" /> <ms:DiagramNodeTool ms:ShapeTool.Shape="Hexagon" /> </ms:DiagramToolBoxGroup> </ms:DiagramToolBox>
As on the DiagramSurface, we need to tell the DiagramToolBox how to display the tool icons. Again, the ShapeTool class provides a handy shortcut, which we can apply in exactly the same way as we did on the DiagramSurface:
CopyA minimal diagramming toolbox<ms:DiagramToolBox ms:ShapeTool.ShapePathStyle="{StaticResource ShapeNodePathStyle}"> <!-- as before --> </ms:DiagramToolBox>
(In this case we are using the same style in the toolbox as we do for display on the DiagramSurface, but you can create a different style, for example if your toolbox has a distinctive color scheme.)
Finally, we need to specify the size and layout of tool icons. Again, this is done using a style. In this case the simplest approach is to override the DiagramNodeTool defaults by providing a type-level style:
CopyA minimal diagramming toolbox<ms:DiagramToolBox ms:ShapeTool.ShapePathStyle="{StaticResource ShapeNodePathStyle}"> <ms:DiagramToolBox.Resources> <Style TargetType="ms:DiagramNodeTool"> <Setter Property="Margin" Value="10" /> <Setter Property="Width" Value="40" /> <Setter Property="Height" Value="30" /> </Style> </ms:DiagramToolBox.Resources> <!-- as before --> </ms:DiagramToolBox>
Our node toolbox is now complete. If you run the application now, you will find that you can drag nodes on from the toolbox, or click toolbox icons then click and drag on the DiagramSurface to create nodes. Note also the collapsible groups and the filter option that the toolbox gives you. And of course you can add more shapes from the DiagramShapes class to the toolbox, just by creating more DiagramNodeTool objects.
However, at this stage we still haven’t seen how to show relationships between shapes. To remedy that, we need to introduce a new kind of element: connections.
