Styles and Control Templates

DiagramItem ultimately derives from the Control class, and so diagram items can be styled and templated. For example, you can define the following style in a ResourceDictionary inside the page xaml:

XAML

<Style x:Key="MyNodeStyle" TargetType="diaglite:ShapeNode">
    <Setter Property="Brush" Value="White" />
    <Setter Property="Stroke" Value="Blue" />
</Style>

Then you can assign the style to a new node as shown in this example:

C#

var node = new ShapeNode();
node.Style = (Style)Resources["MyNodeStyle"];
node.Text = "test";
diagram.Nodes.Add(node);

At the time of writing this, nodes that are created interactively have some local values set for their dependency properties, since they are initialized from the Diagram default-value properties such as ShapeBrush. To apply a style to such nodes, you might have to clear their local values first:

C#

private void OnNodeCreated(object sender, NodeEventArgs e)
{
    var shapeNode = e.Node as ShapeNode;
    if (shapeNode != null)
    {
        shapeNode.ClearValue(DiagramItem.BrushProperty);
        shapeNode.ClearValue(DiagramItem.StrokeProperty);
        shapeNode.Style = (Style)Resources["MyNodeStyle"];
    }
}

Using styles, it is also possible to define new control templates for diagram nodes. For example the code below defines a more light-weight template for ShapeNode objects:

XAML

<Style x:Key="MyNodeTemplate" TargetType="diaglite:ShapeNode">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="diaglite:ShapeNode">
                <Canvas x:Name="Adorner">                    <Path x:Name="Shape"
                        Data="{TemplateBinding ShapeGeometry}"
                        Fill="{TemplateBinding Brush}">
                    </Path>                    <TextBlock
                        Width="{TemplateBinding Width}"
                        Height="{TemplateBinding Height}"
                        Text="{TemplateBinding Text}"
                        Foreground="{TemplateBinding TextBrush}"
                        TextAlignment="Center">
                    </TextBlock>                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Unlike WPF, Silverlight does not support implicit styles that could be defined once in your application and used automatically for all nodes. Instead, the style must be explicitly assigned to each node. However, at this time there is a preview ImplicitStyleManager add-on provided with the Silverlight Toolkit that enables implicit control styles.

The DiagramItem class also defines two visual state groups. The group SelectionStates contains the Unselected and Selected states. The MouseStates group contains the MouseOut, MouseOver and MouseDown states. Note that the control does not provide any built-in animations for transitions between these states. If that's required, it can be implemented through custom Xaml templates where Storyboard objects are associated with states through the VisualStateManager.VisualStateGroups property. For example, in a node template defines a named UI element called "rect", its color can be animated when a node is selected as shown below:

XAML

<VisualStateManager.VisualStateGroups>
  <VisualStateGroup Name="SelectionStates">
    <VisualState Name="Unselected" />
    <VisualState Name="Selected">
      <Storyboard>
        <ColorAnimation To="Red" Storyboard.TargetName="rect" Storyboard.TargetProperty="(Stroke).(Color)" />
      </Storyboard>
    </VisualState>
  </VisualStateGroup>
</VisualStateManager.VisualStateGroups>