Set a ShapeNode Style at a ShapeNode creation

Hello Jason

Do you know how I can edit my xaml NodeStyleSelector to select a red-background StepNodeBackground if a specific value of the ShapeNode.Data is "Red" (for exemple Test123, which is a Textbox), a blue-background StepNodeBackground if the value is "Blue", a green if "Green", etc... ?

Exemple (with a ShapeNode sn) :

if the sn.Data.Test123.Text.ToString() equals to "Red" >> the ShapeNode select a StepNodeBackground with a red color property, so it would have a red background

and else if the sn.Data.Test123.Text.ToString() equals to "Blue" >> the ShapeNode would have a blue background.

Thank you

Hello Leon

The style of the Path object within a ShapeNode can be controlled by setting the ms:ShapeTool.ShapePathStyle attached property on the DiagramNodeElement. The easiest way to change the color dynamically, is to create a path style that sets the Fill property based on a binding to the Data of the node. Here is an example that does this:

<Style x:Key="ShapePathStyle" TargetType="Path">
    <Setter Property="Fill" Value="{Binding Node.Data, Converter={StaticResource ColorToBrush}, RelativeSource={RelativeSource AncestorType={x:Type ms:DiagramNodeElement}}}" />
</Style>

This is a style that can be applied to a path. The Fill property is binding to the Data of the node (achieved via the AnscestorType). Then a converter is used to converter the value of the data into a SolidColorBrush. Here I have called the converter ColorToBrush. You will need to create a class that implements IValueConverter, and then in the Convert method implementation, get the value (which in your case will be strings "Red", "Blue" etc), and return an appropriate SolidColorBrush. ColorToBrush in the code above will be an instance of that class.

Next you'll need a style to be applied to the DiagramNodeElement that holds the ShapeNode, like this:

<Style x:Key="ShapeNodeStyle" TargetType="ms:DiagramNodeElement">
    <Setter Property="ms:ShapeTool.ShapePathStyle" Value="{StaticResource ShapePathStyle}" />
</Style>

This simply sets the attached property that I mentioned to be the path style.

Since you are probably using a ShapeNodeStyleSelector as your NodeStyleSelector, you can now set the DefaultStyle of the ShapeNodeStyleSelector to be the ShapeNodeStyle resource I posted above.

Let me know if you have any questions about this.

-Jason Fauchelle

Hello Jason,

thank you for your answer. I just resume my work on graphics today. (but I changed my plan, so I changed the topic Title)

I would like to know if I can set the color properties ('Fill' and 'Stroke') of my ShapeNode at the creation of it ?

for exemple, I'm looking for something like this :

var my_sn = new Shapenode();

my_sn.Fill = new Lineargradientstop(...);
my_sn.Stroke = ...............................................;

Thank you

Hello Leon

This will still be very similar to the approach that I described in the previous post. The only difference really being that the bindings will point to different properties. There are two main ways to do this:

1. Create a new type of node that extends ShapeNode and implement the new properties on it that you need such as Fill and Stroke. Then of course you'll need to use instances of the custom node type in your diagram rather than ShapeNodes. Then the bindings in the ShapePathStyle that I mentioned last time will bind to those properties on your custom node type.

2. Rather than extending ShapeNode, you could put these properties (Fill and Stroke etc) on an object that gets held by the Data property - just like you were describing in your first post in this thread. Then the bindings will be something like Data.Test123.Fill. When you create the ShapeNode instances to add to the diagram, you can set the Data property to hold an instance of the class that contains the Fill and Stroke properties and set them. That way, the colors will be applied when the node is first displayed.

Note that if your Fill and Stroke properties are Brushes rather than Colors, you won't need the converter that I previously mentioned.

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

-Jason Fauchelle

Thank you Jason, it works.