WPF › Organisation Tree View › OrganizedTreeNode

OrganizedTreeNode

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WPF.Controls.TreeControls

One box on an OrganizedTree chart – a person, a team, a department, a part – with the nodes beneath it.

public class OrganizedTreeNode

Remarks

A node is drawn either as the chart's built-in card, made from Title, Subtitle, Image or Initials, and AccentBrush; or as an element of your own, given to the constructor that takes a FrameworkElement or set through NodeElement. Build the tree by adding nodes to Children, put the top-level nodes in OrganizedTree.Nodes, and call OrganizedTree.RenderTree.

A node belongs to one chart at a time, and appears once in it. Data carries any object of your own – an employee record, an ID – for when the node is selected.

Examples

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using Binarymission.WPF.Controls.TreeControls;

// A card with a photo and a teal accent.
var director = new OrganizedTreeNode(
    "Grace Okafor", "Operations Director",
    new BitmapImage(new Uri("pack://application:,,,/Photos/gokafor.jpg")),
    Color.FromRgb(0, 128, 128));

// A card with initials (taken from the title: "WS").
director.Children.Add(new OrganizedTreeNode("Warehouse Services", "42 people"));

// An element of your own, 200 by 70.
var vacancy = new Border
{
    Background = Brushes.WhiteSmoke,
    BorderBrush = Brushes.Gray,
    BorderThickness = new Thickness(1),
    CornerRadius = new CornerRadius(6),
    Child = new TextBlock { Text = "Vacancy - Logistics Lead", Margin = new Thickness(10) }
};
director.Children.Add(new OrganizedTreeNode(vacancy, new Size(200, 70)));

orgChart.Nodes.Add(director);
orgChart.RenderTree();

Members at a glance

Constructors
`OrganizedTreeNode`	Creates a node drawn as an element of your own, at a fixed size.
`OrganizedTreeNode`	Creates a node drawn as a built-in card with a title and a second line, in the chart's accent colour.
`OrganizedTreeNode`	Creates a node drawn as a built-in card with a title, a second line and an accent colour of its own.
`OrganizedTreeNode`	Creates a node drawn as a built-in card with a photo, a title, a second line and an accent colour of its own.
Properties
`AccentBrush`	Gets or sets the colour of this node's card stripe and avatar, so that one card – or one department – stands out from the rest.
`Children`	Gets or sets the nodes directly beneath this one – the people who report to this person.
`Data`	Gets or sets an object of your own carried by the node – the employee record, an ID, a department code – for use when the node is selected.
`Image`	Gets or sets the picture in the round avatar of the node's card – typically a photo of the person.
`Initials`	Gets or sets the letters shown in the avatar of a card that has no `Image`.
`IsInCollapsedState`	Gets or sets whether this node's branch is folded away, leaving the node on show with its children and everything below them hidden.
`NodeElement`	Gets or sets the element shown on the chart for this node.
`Parent`	Gets the node this one hangs from on the chart.
`Subtitle`	Gets or sets the second line of the node's card, in smaller grey text – typically a job title.
`Title`	Gets or sets the first line of the node's card, shown in bold – typically a person's name.

Constructors

OrganizedTreeNode

public OrganizedTreeNode(FrameworkElement nodeElement, Size sizeOfTheNodeElement)

Creates a node drawn as an element of your own, at a fixed size.

Parameters

nodeElement: The element to show for the node: any FrameworkElement, such as a Border with a photo and text in it, or a user control. It must not be null, and must not already be in another part of the window.
sizeOfTheNodeElement: The size to give the element, in logical pixels (1/96 inch). It is set as the element's FrameworkElement.Width and FrameworkElement.Height, which is what the chart lays the node out by.

Remarks

The chart's card properties (OrganizedTree.NodeCardWidth and the like) do not apply to the element; it is shown as you made it. Clicks on it still select the node.

OrganizedTreeNode

public OrganizedTreeNode(string title, string subtitle)

Creates a node drawn as a built-in card with a title and a second line, in the chart's accent colour.

Parameters

title: The card's first line, in bold – typically a person's name or a team's. null shows no text.
subtitle: The card's second line – typically a job title or a head count. null or empty leaves the line out and centres the title.

Example

var node = new OrganizedTreeNode("Daniel Moore", "Head of IT");

OrganizedTreeNode

public OrganizedTreeNode(string title, string subtitle, Color accentColour) : this(title, subtitle)

Creates a node drawn as a built-in card with a title, a second line and an accent colour of its own.

Parameters

title: The card's first line, in bold – typically a person's name.
subtitle: The card's second line – typically a job title; null or empty leaves it out.
accentColour: The colour of the card's stripe and avatar circle, in place of the chart's OrganizedTree.NodeCardAccentBrush. Giving each department its own colour makes a large chart easier to read.

OrganizedTreeNode

public OrganizedTreeNode(string title, string subtitle, ImageSource image, Color accentColour) : this(title, subtitle, accentColour)

Creates a node drawn as a built-in card with a photo, a title, a second line and an accent colour of its own.

Parameters

title: The card's first line, in bold – typically a person's name.
subtitle: The card's second line – typically a job title; null or empty leaves it out.
image: The picture shown in the card's round avatar, cropped to a circle and filled edge to edge – a head-and-shoulders photo works best. null shows the initials instead.
accentColour: The colour of the card's stripe and of the ring around the photo.

Properties

AccentBrush

public Brush AccentBrush

Gets or sets the colour of this node's card stripe and avatar, so that one card – or one department – stands out from the rest.

Value: The brush. The default is null: the chart's OrganizedTree.NodeCardAccentBrush.

Remarks

A colour given here is kept whatever skin is in force.

Children

public List<OrganizedTreeNode> Children

Gets or sets the nodes directly beneath this one – the people who report to this person.

Value: The list, drawn in order from left to right (top to bottom when the chart is horizontal). It starts empty; a node with no children is a leaf.

Remarks

Call OrganizedTree.RenderTree after changing the list. Do not set it to null.

Data

public object Data

Gets or sets an object of your own carried by the node – the employee record, an ID, a department code – for use when the node is selected.

Value: Any object; the default is null. The chart does not display it.

Example

orgChart.SelectedNodeChanged += (sender, e) =>
{
    var employee = e.NewValue?.Data as Employee;
    if (employee != null)
    {
        detailsPanel.DataContext = employee;
    }
};

Image

public ImageSource Image

Gets or sets the picture in the round avatar of the node's card – typically a photo of the person.

Value: The picture, cropped to a circle and ringed in the accent colour. The default is null: the avatar shows Initials on the accent colour.

Remarks

Shown only while OrganizedTree.ShowNodeCardAvatar is on.

Initials

public string Initials

Gets or sets the letters shown in the avatar of a card that has no Image.

Value: The letters, in white on the accent colour. The default is null: the first letter of each of the first two words of Title, in capitals – "HC" for "Helen Carter".

Remarks

Set it when the title does not give good initials: a team name, or a name with a prefix such as "Dr".

IsInCollapsedState

public bool IsInCollapsedState

Gets or sets whether this node's branch is folded away, leaving the node on show with its children and everything below them hidden.

Value: true when the branch is collapsed; the default is false.

Remarks

Honoured only while OrganizedTree.IsCollapseExpandOfNodesEnabled is on. The user changes it with the node's collapse / expand button or the keyboard. Set it from code before OrganizedTree.RenderTree to open the chart with the branch folded; a change made after the chart is drawn shows at the next OrganizedTree.RenderTree.

NodeElement

public FrameworkElement NodeElement

Gets or sets the element shown on the chart for this node.

Value: An element of your own, or null (the default for the card constructors) to have the chart draw a built-in card from Title, Subtitle, Image and AccentBrush.

Remarks

Give an element of your own an explicit FrameworkElement.Width and FrameworkElement.Height: the chart lays nodes out by those two values, not by the element's measured size. The constructor that takes a Size sets them for you.

Once the chart is drawn, a card node's NodeElement returns the card the chart made. That card is made afresh by every OrganizedTree.RenderTree, so change the node's properties rather than the card.

Parent

public OrganizedTreeNode Parent

Gets the node this one hangs from on the chart.

Value: The parent node, or null for a top-level node and for a node that has not yet been drawn.

Remarks

Set by OrganizedTree.RenderTree, so it reflects the tree as it was last drawn.

Subtitle

public string Subtitle

Gets or sets the second line of the node's card, in smaller grey text – typically a job title.

Value: The text, trimmed with an ellipsis if it is too wide. The default is null; null or empty leaves the line out.

Remarks

Used only when the node is drawn as a built-in card. Call OrganizedTree.RenderTree after changing it.

Title

public string Title

Gets or sets the first line of the node's card, shown in bold – typically a person's name.

Value: The text, trimmed with an ellipsis if it is wider than the card. The default is null, which shows no text.

Remarks

Used only when the node is drawn as a built-in card. Unless Initials is set, the avatar shows the first letters of the first two words of the title. Call OrganizedTree.RenderTree after changing it.

OrganizedTreeNode

Remarks

Examples

See also

Members at a glance

Constructors

OrganizedTreeNode

Parameters

Remarks

OrganizedTreeNode

Parameters

Example

OrganizedTreeNode

Parameters

OrganizedTreeNode

Parameters

Properties

AccentBrush

Remarks

Children

Remarks

Data

Example

Image

Remarks

Initials

Remarks

IsInCollapsedState

Remarks

NodeElement

Remarks

Parent

Remarks

Subtitle

Remarks

Title

Remarks