node connection line

Hello,

I have one simple doubt. I have created one node diagram. The code looks like this.

FlowDiagramConnection conn2 = new FlowDiagramConnection(subEntityNode.ConnectionPoints[1], subEntityaccountUserNode.ConnectionPoints[0]); _model.Connections.Add(conn2);

where _mode is FlowDiagramModel.

It displays correctly but I want to modify connection lines, I mean right now dark black connection lines are drawn but I want dashed or dotted line. Any Idea how can I change node link?

Many thanks in advance

-KS

Hello and sorry for the late reply

Here's how you can customize the node link to have a dotted line:

Step 1: Start by creating a Style for a Path. Use setters to set whatever properties you want such as the stroke brush, thickness and dash array. For example:

<Style x:Key="ConnectionPathStyle" TargetType="Path">
  <Setter Property="Stroke" Value="Black" />
  <Setter Property="StrokeThickness" Value="2" />
  <Setter Property="StrokeDashArray" Value="2,2" />
</Style>

Step 2: Next create a Style for our DiagramConnectionElement control. Here you can use a setter to set the PathStyle property which will be the style created in Step 1. Like this:

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

Some other properties on the DiagramConnectionElement that you may find useful include PathBuilder, StartArrowTemplate and EndArrowTemplate. The PathBuilder lets you specify how the connection path should rendered such as the radius of the rounded or bevelled corners. The StartArrowTemplate and EndArrowTemplate lets you define whatever you want to be displayed at each end of the connection. You can see examples of this in the DemoStyleConnection.xaml file of the CustomStyle.FlowDiagrams sample that comes with WPF Diagrams. Let me know if you need assistance with these customization details.

Step 3: Now you need a connection style selector. The most basic style selector is the FixedStyleSelector. This will apply your style to all the connections in the diagram.

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

Step 4: Last of all, you need to set the ConnectionStyleSelector of a DiagramFormatter. From the image you posted, it looks like you're already customizing the nodes, so you're probably already familiar with using a DiagramFormatter.

<ms:DiagramFormatter x:Key="Formatter"
                     NodeStyleSelector="{StaticResource NodeStyleSelector}"
                     ConnectionStyleSelector="{StaticResource ConnectionStyleSelector}" />

And of course make sure to set the Formatter property of the DiagramSurface.

As I mentioned, the FixedStyleSelector will apply this dash-array style to all the connections in your diagram. If you only want certain connections to have a dash-array, and other connections to be a black line etc, you'll need to create a custom connection. There are 2 approaches you can take here.

1) Implement a single custom connection which has a property to determine if the connection should have a dash-array. Then in your connection style, you can use a trigger to read this property and change the PathStyle property if necessary.

2) You could implement 2 custom connection types. Then you use a TypeStyleSelector instead of a FixedStyleSelector to pick a different style for each type of custom connection. One of your custom connection types will be given a style that has dash-array lines. The other custom connection type would have a different style.

Please let me know if you have any questions about any of this and I'll be able to help you out.

Jason Fauchelle

Hi Jason,

Thank you for the detailed reply.

Actually I did the same thing. Here is my xaml:

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

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

                             ConnectionStyleSelector="{StaticResource ConnectionStyleSelector}"  />
    </ResourceDictionary>
</Window.Resources>

Now I am not setting the node style property but somehow it changes the node property. How can I preserve the original nodestyle and only change the node connection link.

Please refer the attached Image.

 <ms:DiagramSurface Name="ds" Margin="4,4" 
                           HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                           AllowInfiniteScrolling="True"
                           CanAddOrRemoveNodes="True"
                           CanConnectToConnections="True"
                           SelectionMode="Extended"
                           ZoomMode="ControlMouseWheel"
                           Formatter="{StaticResource Formatter11}"
                           />

this is my diagram surface xaml.

Hello

The blue node styles is the absolute default node style if no node styling has been specified. Now that you are setting a formatter with no node styling, the nodes get styled with this default style. You can use one of our built in node style selectors like this:

<ms:DiagramFormatter x:Key="Formatter"
                     NodeStyleSelector="{StaticResource {x:Static ms:GradientStyle.NodeStyleSelectorKey}}"
                     ConnectionStyleSelector="{StaticResource ConnectionStyleSelector}"
                     />

See I am setting the NodeStyleSelector property to be the GradientStyle node selector. here, 'ms' is the Mindscape namespace. Also make sure to include ms:GradientStyle in the merged dictionary.

Please let me know if you have any questions about this.

Jason Fauchelle

Thanks Jason for reply.

I think this would solve the problem.

-Thank you. Kunjan