Tutorial 3: Create a Custom Node Type

This tutorial shows how to define a custom node class that inherits TemplatedNode and adds several new properties. Its appearance is defined using a WPF data template.

1. Right-click the project in Solution Explorer and choose Add -> New Item from the context menu. Create a new WPF Resource Dictionary file called generic.xaml and add the following control template to it. Note that Stroke, Brush and Text are properties of the base DiagramItem class. Image, Title and FullName are new properties defined in the custom class.

Xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:Tutorial3">

    <Style TargetType="local:OrgChartNode">
        <Setter Property="Template">
            <Setter.Value>
                <DataTemplate DataType="local:OrgChartNode">
                    <Grid>

                        <Rectangle
                            Stroke="{Binding Stroke}"
                            Fill="{Binding Brush}" />

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80" />
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>

                            <Image
                                Source="{Binding Path=Image}"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Stretch="Uniform">
                            </Image>

                            <StackPanel Margin="4,8,0,0"  Orientation="Vertical" Grid.Column="1">
                                <TextBlock Text="{Binding Title}" FontWeight="800" />
                                <TextBlock Text="{Binding FullName}" Foreground="Blue" />
                                <TextBlock Text="{Binding Text}" FontSize="9" />
                            </StackPanel>
                        </Grid>

                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</ResourceDictionary>

2. Add to the project a new class called OrgChartNode. Make it derive from TemplatedNode.

C#

using System.Windows;
using System.Windows.Media;
using MindFusion.Diagramming.Wpf;

namespace Tutorial3
{
    public class OrgChartNode : TemplatedNode
    {
    }
}

3. Add a static constructor that overrides the DefaultStyleKey metadata to associate the node class with the data template defined in the resource dictionary. Note that "OrgChartNode" is set as TargetType for both the Style and DataTemplate elements in the Xaml.

C#

static OrgChartNode()
{
    DefaultStyleKeyProperty.OverrideMetadata(
        typeof(OrgChartNode), new FrameworkPropertyMetadata(typeof(OrgChartNode)));
}

4. Define the custom Title, FullName and Image dependency properties.

C#

public string Title
{
    get { return (string)GetValue(TitleProperty); }
    set { SetValue(TitleProperty, value); }
}public static readonly DependencyProperty TitleProperty = DependencyProperty.Register(
    "Title",
    typeof(string),
    typeof(OrgChartNode),
    new PropertyMetadata(""));public string FullName
{
    get { return (string)GetValue(FullNameProperty); }
    set { SetValue(FullNameProperty, value); }
}public static readonly DependencyProperty FullNameProperty = DependencyProperty.Register(
    "FullName",
    typeof(string),
    typeof(OrgChartNode),
    new PropertyMetadata(""));

public ImageSource Image
{
    get { return (ImageSource)GetValue(ImageProperty); }
    set { SetValue(ImageProperty, value); }
}

public static readonly DependencyProperty ImageProperty = DependencyProperty.Register(
    "Image",
    typeof(ImageSource),
    typeof(OrgChartNode),
    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));

5. Add a Loaded event handler to the WPF window.

Xaml

<Window ...
    Loaded="OnWindowLoaded" ...>

C#

private void OnWindowLoaded(object sender, RoutedEventArgs e)
{
}

6. Add a few instances of the OrgChartNode class.

C#

var node1 = new OrgChartNode
{
    Bounds = new Rect(100, 60, 240, 100),
    Title = "CEO",
    FullName = "John Smith",
    Text = "Our beloved leader. \r\n" +
    "The CEO of this great corporation.",
    Image = new BitmapImage(
        new Uri("016.png", UriKind.Relative))
};
diagram.Nodes.Add(node1);var node2 = new OrgChartNode
{
    Bounds = new Rect(220, 220, 240, 100),
    Title = "CIO",
    FullName = "Bob Smith",
    Text = "The CIO of this great corporation.",
    Image = new BitmapImage(
        new Uri("ac0026-64.png", UriKind.Relative))
};
diagram.Nodes.Add(node2);diagram.Factory.CreateDiagramLink(node1, node2);

7. Build and run the project. You should see the custom nodes rendered like this: