Organisation Tree View

Use it to show who reports to whom, how a business is divided into divisions and teams, a product's bill of materials, a family tree, or any parent-and-child structure that reads best as a picture rather than an indented list.

Nodes

Each box on the chart is an OrganizedTreeNode. Put the top-level nodes in Nodes and each node's children in its own OrganizedTreeNode.Children, as deep as you like; more than one top-level node draws several trees side by side. A node can be drawn in either of two ways:

• As a built-in card. Give the node a OrganizedTreeNode.Title and OrganizedTreeNode.Subtitle – a name and a role, say – and optionally a picture and an accent colour. The chart draws a rounded card with a coloured stripe, a round avatar showing the picture or the person's initials, and the two lines of text. The cards are NodeCardWidth by NodeCardHeight.
• As an element of your own. Give the node any FrameworkElement – a Border holding a photo and three lines of text, a Button, a user control – with an explicit width and height. The chart places it and joins it to the rest.

The two can be mixed in one chart.

Drawing the chart

The chart is drawn when RenderTree is called. Call it once the nodes are in Nodes, and again after adding, removing or rearranging nodes or changing what a card shows: the node lists are plain lists, so the chart cannot see them change. Properties of the chart itself – the spacing, the direction, the connector style, the colours – redraw it as they are set.

The chart grows to the size of the tree and has no scroll bars of its own: put it in a ScrollViewer with both scroll bars on Auto so that a large organisation can be panned. ZoomFactor, ZoomToFit and Ctrl with the mouse wheel scale it, and CenterOnNode brings one node into the middle of the view. The control's Control.Padding is left clear around the chart.

Layout and connectors

TreeLayoutDirection chooses which way the tree grows. SpacingBetweenChildNodeToParent sets the gap between one level and the next, and SpacingBetweenSiblingNodes the gap between neighbours; a parent is centred over its children. The lines are drawn in one of four shapes (ConnectorStyle), solid or dashed, and can carry small round ports where they meet the cards, arrowheads, and direction chevrons.

Interaction

A click selects a node (SelectedNode, SelectedNodeChanged) and draws a ring around it; the arrow keys then move the selection around the chart. The path from the node under the pointer – or, with none, the selected node – up to its root is drawn in PathHighlightBrush. With IsCollapseExpandOfNodesEnabled turned on, every parent gets a round button that folds its branch away, with a badge counting the nodes it hides.

Appearance

Every colour is a brush property of the chart, and a card can take its own accent through OrganizedTreeNode.AccentBrush. The default given for each brush is the one used with no Binarymission skin in force; while a skin is applied through BinarySkinManager it supplies the card, line, selection and expander colours, and any brush set on the chart itself still wins. With no skin the connecting lines default to a mid grey, which shows on light and dark surfaces alike.

Print() sends the chart to a printer and Export returns it as a bitmap.

A chart in XAML, inside a scroll viewer, with the nodes built in the code-behind. The assembly is Binarymission.WPF.Controls.TreeControls.OrganizedTreeView.

<Window x:Class="People.OrgChartWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:org="clr-namespace:Binarymission.WPF.Controls.TreeControls;assembly=Binarymission.WPF.Controls.TreeControls.OrganizedTreeView"
        Title="Organisation" Width="1000" Height="640">

    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
        <org:OrganizedTree x:Name="orgChart"
                           Padding="24"
                           ConnectorStyle="RoundedElbow"
                           ConnectingLineBrush="#9AA5B1"
                           ConnectingLineThickness="2"
                           SpacingBetweenChildNodeToParent="48"
                           SpacingBetweenSiblingNodes="16"
                           IsCollapseExpandOfNodesEnabled="True"
                           SelectedNodeChanged="OnSelectedPersonChanged" />
    </ScrollViewer>
</Window>

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

public partial class OrgChartWindow : Window
{
    public OrgChartWindow()
    {
        InitializeComponent();

        var ceo = new OrganizedTreeNode("Helen Carter", "Chief Executive");
        var finance = new OrganizedTreeNode("Raj Patel", "Finance Director", Color.FromRgb(16, 150, 120));
        var sales = new OrganizedTreeNode("Sophie Martin", "Sales Director", Color.FromRgb(214, 120, 30));

        finance.Children.Add(new OrganizedTreeNode("Tom Hughes", "Financial Controller"));
        finance.Children.Add(new OrganizedTreeNode("Aisha Khan", "Payroll Manager"));
        sales.Children.Add(new OrganizedTreeNode("Ben Wright", "Key Accounts") { Data = 1042 });
        sales.Children.Add(new OrganizedTreeNode("Lucy Evans", "Inside Sales") { Data = 1077 });

        ceo.Children.Add(finance);
        ceo.Children.Add(sales);

        orgChart.Nodes.Add(ceo);
        orgChart.RenderTree();
    }

    private void OnSelectedPersonChanged(object sender, RoutedPropertyChangedEventArgs<OrganizedTreeNode> e)
    {
        if (e.NewValue != null)
        {
            Title = "Organisation - " + e.NewValue.Title;
        }
    }
}