Different color and thickness for connections

I would like to have different colors and thickness on my connection lines based on what the user selects from a color-picker in a property grid (see attachment).

Regards, Michael

Hello Michael

If you haven't done so already, start by implementing a custom connection type. This can easily be done by extending the DiagramConnection class. You'd also need to implement an IDiagramConnectionBuilder so that dragging a connection-point will create instances of your custom connection type. Examples of doing this can be found in the ActivityDiagrams sample project.

In your custom connection implementation, add properties that you need to affect the style. For example properties for color and thickness. When the user selects a color or a thickness, update the properties on the selected connection model.

Then in the custom connection style, include bindings to the appropriate properties. Here is an example that sets up the binding for the stroke color. ConnectionColor is a property of type Color on a custom connection. You'll need to implement the ColorToBrushConverter which simply converts a color into a SolidColorBrush so it can be used to set the Stroke property. Notice that you'll need an AncestorType binding to find the properties.

<local:ColorToBrushConverter x:Key="ColorToBrush" />

<Style x:Key="ConnectionPathStyle" TargetType="Path">
  <Setter Property="Stroke" Value="{Binding Connection.ConnectionColor, Converter={StaticResource ColorToBrush}, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramConnectionElement}}}" />
  <Setter Property="StrokeThickness" Value="2" />
</Style>

<ms:CorneredPathBuilder x:Key="PathBuilder" />

<Style x:Key="ConnectionStyle" TargetType="ms:DiagramConnectionElement">
  <Setter Property="PathStyle" Value="{StaticResource ConnectionPathStyle}" />
  <Setter Property="PathBuilder" Value="{StaticResource PathBuilder}" />
</Style>

<ms:FixedStyleSelector x:Key="ConnectionStyleSelector" Style="{StaticResource ConnectionStyle}" />

Let me know if you need further help with any of this.

Jason Fauchelle

Hi' Jason

Thank you for the very fast and excellent support.

I have made a custom connection type, and the DiagramConnection and IDiagramConnectionBuilder classes, but I'm struggling with the ConnectionColor binding..... no color on the line.

I have made a small test project where I try to accomplish the color binding (see attachment).

Thanks, Michael

Hello Michael

Thanks for the test project! To resolve this, go to the binding string in the style and change "MyDiagramConnection" to "Connection".

"Connection" is a property on ms:DiagramConnectionElement which gets the containing connection model.

Jason Fauchelle

Thanks a million, I was totally focused on ref. my own name........ sorry.

Thanks, Michael