Connection Visuals

WPF Diagrams includes built-in visual styles for nodes and connectors, which are automatically made available when you import the DiagramShapes resource dictionary. You can override connection styles as follows.

Setting a Global Default Style

To set a global style for connections, declare a style resource with key DiagramLineTypes.DefaultDiagramConnectionStyleKey and a target type of Path:

CopySetting a path style for all connections

<Style x:Key="{x:Static ms:DiagramLineTypes.DefaultDiagramConnectionStyleKey}" TargetType="Path">
  <Setter Property="Stroke" Value="Goldenrod" />
  <Setter Property="StrokeThickness" Value="2" />
</Style>

You may also want to customise the appearance of arrowheads: you can do this by declaring a style with key DiagramArrowheadTypes.DefaultArrowheadPathStyleKey and a target type of Path:

CopySetting a path style for all arrowheads

<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>

Overriding the Global Style at the Connection Level

To control connection styles at a finer level, you must provide a DiagramFormatter object and set its ConnectionStyleSelector property:

CopyAssociating a custom diagram formatter with a diagram surface

<Window.Resources>
  <ms:DiagramFormatter x:Key="Formatter" 
                       ConnectionStyleSelector="{StaticResource ConnectionStyleSelector}" 
                       />
</Window.Resources>

<ms:DiagramSurface Formatter="{StaticResource Formatter}" />

Your style selector will typically be an instance of DiagramConnectionStyleSelector or a custom derived class. This allows you to leverage the built-in styling and layout behavior for connection types that you do not need to customise.

Styles should have a TargetType of DiagramConnectionElement. Typically, you will style the PathStyle, StartArrowTemplate and EndArrowTemplate properties.

CopyCustomising the style for straight connections

<Style x:Key="Luminous" TargetType="Path">
  <Setter Property="StrokeThickness" Value="3" />
  <Setter Property="Stroke" Value="Lime" />
</Style>

<local:LineTypeStyleSelector x:Key="ConnectionStyleSelector">
  <local:LineTypeStyle LineType="Straight">
    <Style TargetType="ms:DiagramConnectionElement">
      <Setter Property="PathStyle" Value="{StaticResource Luminous}" />
    </Style>
  </local:LineTypeStyle>
  <local:LineTypeStyle LineType="StraightArrow">
    <Style TargetType="ms:DiagramConnectionElement">
      <Setter Property="PathStyle" Value="{StaticResource Luminous}" />
      <Setter Property="EndArrowTemplate" Value="{StaticResource {x:Static ms:DiagramArrowheadTypes.Notched}}" />
    </Style>
  </local:LineTypeStyle>
  <local:LineTypeStyle LineType="StraightDoubleArrow">
    <Style TargetType="ms:DiagramConnectionElement">
      <Setter Property="PathStyle" Value="{StaticResource Luminous}" />
      <Setter Property="StartArrowTemplate" Value="{StaticResource {x:Static ms:DiagramArrowheadTypes.Notched}}" />
      <Setter Property="EndArrowTemplate" Value="{StaticResource {x:Static ms:DiagramArrowheadTypes.Notched}}" />
    </Style>
  </local:LineTypeStyle>
</local:LineTypeStyleSelector>