Defining the Connection Display Style

Relationships between diagram elements are represented as connections. In the diagram model, these are represented by the DiagramConnection class. The Diagram class has a Connections collection to which you can add connections programmatically, or the user can add connections using the mouse.

Although we haven’t done anything to implement connection support, our simple diagramming application already allows users to create connections. When the user selects a shape, it displays a number of connection points. The user can drag a connection point to another connection point (on the same or another shape) to create a connection.

At the moment the connection uses a built-in style. This is consistent with the default node style, but can be overridden by defining a style with the key DiagramLineTypes.DefaultDiagramConnectionStyleKey:

CopyOverriding the default connection style
<Style x:Key="{x:Static ms:DiagramLineTypes.DefaultDiagramConnectionStyleKey}" TargetType="Path">
  <Setter Property="Stroke" Value="Red" />
  <Setter Property="StrokeThickness" Value="2" />
</Style>

If your application uses lines with arrows, you’ll probably also want to override the arrowhead style. To do this, define a Style whose key is DiagramArrowheadTypes.DefaultArrowheadPathStyleKey:

CopyOverriding the default arrowhead path style
<Style x:Key="{x:Static ms:DiagramArrowheadTypes.DefaultArrowheadPathStyleKey}" TargetType="Path">
  <Setter Property="Fill" Value="Yellow" />
  <Setter Property="StrokeThickness" Value="1" />
  <Setter Property="Stroke" Value="Goldenrod" />
</Style>

Now we need to provide users with a way to create different kinds of connection. We will address this in the next topic.

Next: Adding Connections to the Toolbox.