Change arrow color for Shapenode

Hello,

is there a propriety of Arrow Color, or Arrow Line Style or something else (for an Arrow coming from a Shapenode) ? or other Arrow style, to differenciate at least 2 types of arrows?

If no, can you help me by telling me how I could implement something to do this?

Thank you

Hello

Thanks for trying out our WPF Diagrams framework.

WPF Diagrams allows you to customize the connection styles, and select different styles for different scenarios. Below is some basic code to customize the visuals of a connection:

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

  <Style x:Key="ArrowheadPathStyle" TargetType="Path">
    <Setter Property="Fill" Value="Black" />
  </Style>

  <DataTemplate x:Key="EndArrowTemplate">
    <ms:Arrowhead PathStyle="{StaticResource ArrowheadPathStyle}" Length="8" BackWidth="8" />
  </DataTemplate>

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

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

First is a style applied to a Path with defines the look of the connection line. Next is a similar style to define the colors of the arrows. The EndArrowTemplate is to provide visuals to display at the end of the connection. We provide an Arrowhead object which has Length, BackWidth and Notch properties to create the most common connection end shapes such as notched arrows, triangles and diamonds. You don't have to use Arrowhead in the template though, you could use whatever you want to be displayed at the end of a connection. Whatever you put in the template, it will automatically be rotated based on the direction of the connection end.

Next is a path builder, this is used to render the connection line itself and has 2 main uses: to add beveled or rounded corners, and also to provide an EndOffset or StartOffset which cuts the connections short (useful if you have very pointy arrowheads).

Last is the connection style itself which is applied to DiagramConnectionElement and brings all the previous bits together. There is also a StartArrowTemplate property to specify the visuals at the source end of the connection line.

Next you need to create a Style selector. If all your connections are to look the same, you can create an instance of FixedStyleSelector. Or if you want to apply a different style to different implementations of IDiagramConnection, you can use a TypeStyleSelector, and fill it with TypeStyle instances which map Types to the Style you want to apply to them. Or you could use a MatchingStyleSelector, and fill it with custom implementations of IStyleMatcher which will look at the state of the connection (such as what nodes it is connected to), and then select an appropriate style. Or of course you could create a whole new custom IStyleSelector if you have very specific style selecting logic in mind.

Last of all, create an instance of DiagramFormatter, and set it's ConnectionStyleSelector property, then set the Formatter property of your DiagramSurface. (You may also want to set the NodeStyleSelector of the DiagramFormatter to be a ShapeNodeStyleSelector, but this may change later on if you start adding your own custom node implementations that need to be styled).

Examples of customizing the look of diagrams can be found in the ActivityDiagrams sample and the CustomStyle sample.

Let me know if you have questions about any of this.

-Jason Fauchelle

Thank you Jason

Hi Jason,

I just put all my Arrows in a custom style, but I don't know how to use TypeStyleSelector.

in this page : http://www.mindscapehq.com/forums/thread/326823 , you said :

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

Can you please tell me how to use ms:TypeStyleSelector instead of ms:FixedStyleSelector, to set an Arrow Color depending of the ConnectionPoint of the Node? for exemple : if an Arrow comes from a ConnectionPoint[0], it is green. But from a ConnectionPoint[1], it is red.

Thank you

Hello Leon

TypeStyleSelector will work best if you have multiple different connection implementations, but it sounds like for your scenario, it'd be easier if you have a single connection implementation. If so, the best solution would be to use either triggers or a converter within the connection style which will pick the appropriate arrow head color (or an entire arrow head template) based on the situation the connection is in. One way to do this would be to implement a custom connection by extending the DiagramConnection class (if not done already), and add a property to represent which connection point it is connected to. An integer property would probably be fine. When the connection is created or relocated, you can set this property. Then the triggers or converter in the style could use this property to affect the look. Another possibility could be for the triggers or converter to look at a property on the FromConnectionPoint of the connection, such as its Index property.

Please let me know if you have any questions about this. Or attach a small sample project to a forum post and I can more easily point out what to do.

-Jason Fauchelle

Hi Jason,

I'm trying to use a trigger in my XAML file, like this :

        <Style x:Key="ConnectionStyle" TargetType="ms:DiagramConnectionElement">
            <Setter Property="PathStyle" Value="{StaticResource ConnectionPathStyle}" />
            <Setter Property="EndArrowTemplate" Value="{StaticResource EndArrowTemplate}" />
            <Setter Property="PathBuilder" Value="{StaticResource PathBuilder}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding ElementName=FromConnectionPoint , Path=Index}" Value="1">
                    <Setter Property="PathStyle" Value="{StaticResource ConnectionPathStyle2}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

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

But I don't know how to see the Index of FromConnectionPoint. I tried FromConnectionPoint.Index instead of FromConnectionPoint, but it doesn't work. Can you help me?

Leon

Hello

Sorry I did not give examples of how to do this. Here is how you'll want to write the binding:

<DataTrigger Binding="{Binding FromConnectionPoint.Index, RelativeSource={RelativeSource Self}}" Value="1">
    <Setter Property="PathStyle" Value="{StaticResource ConnectionPathStyle2}" />
</DataTrigger>

Knowing to set the RelativeSource in this scenario is the tricky part. The path of this binding is FromConnectionPoint.Index. The binding in the code above will work the same as if you use {Binding Path=FromConnectionPoint.Index, RelativeSource={RelativeSource Self}}. i.e. writing "Path=" is optional.

ElementName is used to reference a named element in the visual tree - which is only possible in a trigger within a template.

Also, make sure you are setting the Index values when you setup the connection points in the constructors of your nodes - like in the ForkNode of the ActivityDiagram sample.

Please let me know if you need help with anything else.

-Jason Fauchelle

Thank you, works fine