OrganizedTree

Creates an empty chart.

Nodes starts as an empty list. Add the top-level nodes to it and call RenderTree to draw them.

Gets or sets how long the collapse and expand animation lasts.

Gets or sets the fill of the badge that counts the nodes hidden under a collapsed node.

Gets or sets the colour of the connecting lines – and, unless they are given colours of their own, of the ports, arrowheads, chevrons and collapse / expand buttons.

<org:OrganizedTree ConnectingLineBrush="#9AA5B1" ConnectingLineThickness="2" />

Gets or sets the pattern of dashes and gaps the connecting lines are drawn with.

The chart redraws when a new collection is set, not when the numbers in the current one are changed.

<org:OrganizedTree ConnectingLineStrokeDashArray="3 2" />

Gets or sets a Style for the connecting lines, for effects the line properties do not offer.

Used only while IsUsingCustomLineStyle is true and ConnectorStyle is ConnectorStyle.Elbow. The style then replaces ConnectingLineBrush, ConnectingLineThickness and ConnectingLineStrokeDashArray for the lines, so it should set at least Stroke and StrokeThickness. Call RenderTree after setting it.

<org:OrganizedTree IsUsingCustomLineStyle="True">
    <org:OrganizedTree.ConnectingLineStyle>
        <Style TargetType="Line">
            <Setter Property="Stroke" Value="SlateGray" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="Opacity" Value="0.7" />
        </Style>
    </org:OrganizedTree.ConnectingLineStyle>
</org:OrganizedTree>

Gets or sets the width of the connecting lines.

Arrowheads and, by default, chevrons are sized from it.

Gets or sets the fill of the arrowheads drawn when ShowConnectorArrows is on.

Gets or sets the colour of the direction chevrons.

Gets or sets the size of each direction chevron, from the tip of one arm to the tip of the other.

Gets or sets the width of the strokes the direction chevrons are drawn with.

Gets or sets the chevrons drawn part-way along each connector to show which way the relationship runs.

One or two chevrons are drawn on each line to a child, pointing towards the child (ConnectorChevronStyle.Forward) or back towards the parent (ConnectorChevronStyle.Backward). Their look is set by ConnectorChevronBrush, ConnectorChevronSize and ConnectorChevronThickness. They are drawn even while IsShowConnectingLines is off.

Gets or sets how rounded the corners of ConnectorStyle.RoundedElbow connectors are.

Gets or sets the fill of the connector ports.

Gets or sets the diameter of the connector ports.

Gets or sets the colour of a ring drawn around each connector port – white, say, to lift the ports off the lines.

Gets or sets the width of the ring around each connector port.

Gets or sets the shape of the lines joining parents to children.

ConnectingLineStyle applies only to ConnectorStyle.Elbow. The other styles draw one path per child and round the line ends; ConnectorStyle.RoundedElbow takes its corner size from ConnectorCornerRadius.

<org:OrganizedTree ConnectorStyle="RoundedElbow" ConnectorCornerRadius="12"
                   ShowConnectorPorts="True" ConnectorChevrons="Forward" />

Gets or sets the face colour of the built-in collapse / expand buttons.

The face and the ring change places to show state: a collapsed button, and a button under the pointer, is filled with ExpanderButtonBorderBrush and its sign drawn in this brush.

Gets or sets the ring colour of the built-in collapse / expand buttons, which is also the fill of a collapsed button.

Gets or sets the width of the ring around the built-in collapse / expand buttons.

Gets or sets the colour of the plus and minus signs on the built-in collapse / expand buttons.

Gets or sets the diameter of the collapse / expand buttons.

Gets or sets a Style for the collapse / expand buttons, replacing the chart's own round buttons.

The button's content is the text "+" while its branch is collapsed and a minus sign while it is open, so a style needs only to present that content. Its width and height are always ExpanderButtonSize, and the tooltip says "Collapse" or "Expand (n hidden)".

With a style of your own, ExpanderButtonBackground, ExpanderButtonBorderBrush, ExpanderButtonBorderThickness, ExpanderButtonGlyphBrush and the hidden-node badge are not used.

Gets or sets whether nodes fade and grow into view when a branch is expanded, and fade and shrink away when it is collapsed.

The animation lasts CollapseExpandAnimationDuration. Drawing the chart with RenderTree is never animated.

Gets or sets whether each parent node has a button that collapses its branch out of sight and expands it again.

The button is a small circle where the parent's line meets the bar across its children (for ConnectorStyle.Elbow), or just beyond the parent's edge for the other connector styles. It shows a minus sign while the branch is open and a plus sign when it is folded, with a badge counting the hidden nodes (ShowCollapsedChildCount). The keyboard does the same to the selected node: Enter or Space toggles it, + expands and – collapses. The change is animated unless IsCollapseExpandAnimated is off.

To open the chart with branches already folded, set OrganizedTreeNode.IsInCollapsedState on those nodes before calling RenderTree. Turning this property off expands every node and sets every node's OrganizedTreeNode.IsInCollapsedState back to false.

The buttons are drawn by the chart; see ExpanderButtonSize, ExpanderButtonBackground, ExpanderButtonBorderBrush and ExpanderButtonStyle to change how they look.

Gets or sets whether holding Ctrl and turning the mouse wheel zooms the chart in and out around the pointer.

The wheel without Ctrl is left alone, so an enclosing scroll viewer still scrolls with it.

Gets or sets whether a node rises slightly, and a card's shadow deepens, while the pointer is over it.

An element of your own that already has a UIElement.RenderTransform is not lifted. The highlight of the path to the root is separate: see IsPathToRootHighlighted.

Gets or sets whether the user can select a node by clicking it or with the arrow keys.

Turning it off hides the selection ring and stops the keyboard moving the selection or collapsing nodes. SelectedNode can still be set from code.

Gets or sets whether the line of command from a node up to the top of the chart is drawn in PathHighlightBrush.

The path followed is the one from the node under the pointer or, when the pointer is over no node, from SelectedNode. Every connector, port, arrowhead and chevron on the way up is coloured.

Gets or sets whether the lines joining parents to children are drawn.

Turning the lines off leaves everything else in place: the collapse / expand buttons, and any ports, arrowheads and chevrons that are switched on.

Gets or sets whether the connecting lines are drawn with ConnectingLineStyle rather than with the line properties.

Applies to ConnectorStyle.Elbow connectors only. Call RenderTree after changing it.

Gets or sets the colour of the stripe and avatar on the built-in cards whose node has no OrganizedTreeNode.AccentBrush of its own.

Gets or sets the fill of the built-in cards.

Gets or sets the colour of the thin outline around the built-in cards.

Gets or sets how rounded the corners of the built-in cards are.

Gets or sets the height of the built-in cards.

The avatar is sized from it: 18 less than the height, between 16 and 40 across.

Gets or sets the colour of the second line of text on the built-in cards.

Gets or sets the colour of the first, bold line of text on the built-in cards.

The title is drawn in the chart's Control.FontFamily, one point larger than its Control.FontSize, and the subtitle one point smaller.

Gets or sets the width of the built-in cards.

Applies to every node drawn as a card, not to nodes with an element of their own. A title or subtitle too long for the card is cut short with an ellipsis.

Gets or sets the colour of the ring drawn around the selected node.

The ring is drawn just outside the node, following a card's rounded corners, with a soft glow of the same colour.

Gets or sets the width of the ring drawn around the selected node.

Gets or sets the top-level nodes of the chart – usually one, the head of the organisation; several draw several trees side by side.

A new list, set from code or given through a binding, redraws a chart that is on screen. The list does not report changes to its contents, so call RenderTree after adding, removing or changing nodes in it.

Setting it to null gives an empty list.

Gets or sets the colour of the highlighted path from a node up to its root.

Gets or sets the node that is selected on the chart, ringed in NodeSelectionBrush.

A click on a node selects it. With the keyboard focus in the chart, the arrow keys move the selection: towards the root to the parent, away from it to the child nearest the middle (expanding a collapsed node first), and across to the next node on show on the same level. Home selects the first root node, and the first arrow key press with nothing selected does the same.

When a collapse hides the selected node, the selection moves up to the nearest node still on show. Setting a node that is not on the chart shows no ring. Each change raises SelectedNodeChanged.

// Select the finance director and scroll to the card.
OrganizedTreeNode finance = orgChart.Nodes[0].Children[0];
orgChart.SelectedNode = finance;
orgChart.CenterOnNode(finance);

Gets or sets whether a collapsed node's button carries a small badge counting the nodes hidden beneath it.

The count includes every node in the folded branch, not only the direct children; above 99 it shows "99+". The badge is filled with CollapsedChildCountBrush and is part of the built-in buttons only, so it does not appear with an ExpanderButtonStyle.

Gets or sets whether each connector ends in an arrowhead pointing at the child.

The arrowheads are four times ConnectingLineThickness long, and never less than 9 logical pixels, filled with ConnectorArrowBrush. With ShowConnectorPorts on, the tip stops at the edge of the port.

Gets or sets whether a small round dot is drawn at each point where a connector meets a card.

The ports are ConnectorPortSize across, filled with ConnectorPortBrush and ringed with ConnectorPortStrokeBrush. They are drawn even while IsShowConnectingLines is off.

Gets or sets whether the built-in cards carry a stripe of the accent colour down their left edge.

Gets or sets whether the built-in cards show a round avatar with the node's picture or initials.

Gets or sets whether the built-in cards cast a soft shadow below them.

With IsNodeHoverEffectEnabled on, the shadow deepens under the pointer. A very large chart draws faster without shadows.

Gets or sets the gap between a parent's card and its children's cards – the distance from one level of the chart to the next.

A larger gap gives the connectors, arrowheads, chevrons and collapse buttons more room; 48 or more suits ConnectorStyle.Curved connectors.

Gets or sets the gap between neighbouring cards on the same level, and between one branch and the next.

Gets or sets which way the chart grows from its root nodes: down, up, to the right or to the left.

The cards keep their shape in every direction; only their arrangement turns. In the two horizontal directions SpacingBetweenChildNodeToParent becomes a horizontal gap and SpacingBetweenSiblingNodes a vertical one, and the arrow keys turn with the chart.

<org:OrganizedTree x:Name="orgChart" TreeLayoutDirection="LeftToRight" />

Gets or sets the scale the chart is drawn at: 1 is actual size, 0.5 half size, 2 double.

The chart takes up its scaled size, so an enclosing ScrollViewer scrolls over the right area at any zoom. With IsMouseWheelZoomEnabled on, Ctrl and the mouse wheel change the zoom by 10% a step around the pointer; ZoomToFit chooses the zoom that shows the whole chart.

<Slider Minimum="0.25" Maximum="2" Value="{Binding ZoomFactor, ElementName=orgChart}" />

Scrolls the enclosing ScrollViewer so that a node is in the middle of the visible area – to show a search result, say.

The node is not selected; set SelectedNode as well for that. A node in a collapsed branch is not on show, so expand the branch first. Without an enclosing scroll viewer the node is only brought into view.

OrganizedTreeNode match = FindByName(orgChart.Nodes, searchBox.Text);
if (match != null)
{
    orgChart.SelectedNode = match;
    orgChart.CenterOnNode(match);
}

Takes a picture of the whole chart, for saving to a file, pasting into a report or printing in a layout of your own.

A bitmap of the chart as it is drawn – at the current ZoomFactor, with any branches collapsed, and including the parts scrolled out of view – at the resolution of the screen the chart is on, in Pbgra32. Areas the chart does not cover are transparent.

Draw the chart with RenderTree first. The bitmap is the size of the chart.

using System.IO;
using System.Windows.Media.Imaging;

BitmapSource picture = orgChart.Export();

var encoder = new PngBitmapEncoder();
encoder.Frames.Add(BitmapFrame.Create(picture));
using (FileStream file = File.Create(@"C:\Reports\Organisation.png"))
{
    encoder.Save(file);
}

Moves the selection with the arrow keys and Home, and collapses or expands the selected node with Enter, Space, + and -.

Does nothing while IsNodeSelectionEnabled is off or the chart has no nodes. The arrow keys follow TreeLayoutDirection; the collapse keys act only while IsCollapseExpandOfNodesEnabled is on and the node has children. An override should call the base method to keep this behaviour.

Zooms the chart in or out by 10% around the pointer when Ctrl is held and IsMouseWheelZoomEnabled is on.

Shows the print dialog and prints the whole chart, including the parts scrolled out of view, with margins of 84 logical pixels (7/8 inch) all round.

The same as Print() with a uniform margin of 84. See that overload for how the chart is divided into pages.

Shows the print dialog and prints the whole chart, including the parts scrolled out of view, with the margins you choose.

The print job is named after the control's FrameworkElement.Name. Nothing is printed if the user cancels the dialog.

A chart taller than one page is continued on as many pages as it needs, top to bottom, and a page range chosen in the dialog is honoured. The chart is not divided across the width of the paper: anything wider than the printable width is cut off. For a wide organisation, print in landscape, reduce SpacingBetweenSiblingNodes or NodeCardWidth, or use TreeLayoutDirection.LeftToRight so that the tree grows down the page.

// Half-inch margins.
orgChart.Print(new Thickness(48));

Draws the chart from Nodes, laying out every node and drawing the lines, buttons and selection again.

Call it once the nodes are in place, and again after any change to the nodes themselves – adding or removing a node, changing a node's OrganizedTreeNode.Children, OrganizedTreeNode.Title, picture or element, or setting OrganizedTreeNode.IsInCollapsedState from code. The node lists are plain lists and raise no notifications, so the chart does not redraw on its own when they change. A change to a property of the chart itself redraws it without this call.

Which branches are collapsed and which node is selected are kept. The built-in cards are made afresh on each call.

// A new starter joins the payroll team.
OrganizedTreeNode payroll = orgChart.Nodes[0].Children[0].Children[1];
payroll.Children.Add(new OrganizedTreeNode("Megan Price", "Payroll Assistant"));
orgChart.RenderTree();

Sets ZoomFactor so that the whole chart fits in the visible area, and scrolls back to its top-left corner.

The area is the viewport of the enclosing ScrollViewer or, without one, the chart's parent element, less the chart's FrameworkElement.Margin. A chart smaller than the area is enlarged to fill it, up to 8 times.

Nothing happens before the chart has been drawn and laid out, or while the area has no size; call it from the window's Loaded event, or later, rather than from its constructor.

Loaded += (sender, e) => orgChart.ZoomToFit();

Occurs when the selected node changes – by a click, the keyboard, code, or a collapse that hides the selected node.

The event data's OldValue and NewValue are the nodes selected before and after; either can be null. It is a bubbling routed event, so it can be handled on a parent element too.

orgChart.SelectedNodeChanged += (sender, e) =>
{
    statusText.Text = e.NewValue == null
        ? "No one selected"
        : e.NewValue.Title + " - " + e.NewValue.Subtitle;
};

Identifies the CollapseExpandAnimationDuration dependency property.

Identifies the CollapsedChildCountBrush dependency property.

Identifies the ConnectingLineBrush dependency property.

Identifies the ConnectingLineStrokeDashArray dependency property.

Identifies the ConnectingLineStyle dependency property.

Identifies the ConnectingLineThickness dependency property.

Identifies the ConnectorArrowBrush dependency property.

Identifies the ConnectorChevronBrush dependency property.

Identifies the ConnectorChevronSize dependency property.

Identifies the ConnectorChevronThickness dependency property.

Identifies the ConnectorChevrons dependency property.

Identifies the ConnectorCornerRadius dependency property.

Identifies the ConnectorPortBrush dependency property.

Identifies the ConnectorPortSize dependency property.

Identifies the ConnectorPortStrokeBrush dependency property.

Identifies the ConnectorPortStrokeThickness dependency property.

Identifies the ConnectorStyle dependency property.

Identifies the ExpanderButtonBackground dependency property.

Identifies the ExpanderButtonBorderBrush dependency property.

Identifies the ExpanderButtonBorderThickness dependency property.

Identifies the ExpanderButtonGlyphBrush dependency property.

Identifies the ExpanderButtonSize dependency property.

Identifies the ExpanderButtonStyle dependency property.

Identifies the IsCollapseExpandAnimated dependency property.

Identifies the IsCollapseExpandOfNodesEnabled dependency property.

Identifies the IsMouseWheelZoomEnabled dependency property.

Identifies the IsNodeHoverEffectEnabled dependency property.

Identifies the IsNodeSelectionEnabled dependency property.

Identifies the IsPathToRootHighlighted dependency property.

Identifies the IsShowConnectingLines dependency property.

Identifies the IsUsingCustomLineStyle dependency property.

Identifies the NodeCardAccentBrush dependency property.

Identifies the NodeCardBackground dependency property.

Identifies the NodeCardBorderBrush dependency property.

Identifies the NodeCardCornerRadius dependency property.

Identifies the NodeCardHeight dependency property.

Identifies the NodeCardSubtitleBrush dependency property.

Identifies the NodeCardTitleBrush dependency property.

Identifies the NodeCardWidth dependency property.

Identifies the NodeSelectionBrush dependency property.

Identifies the NodeSelectionThickness dependency property.

Identifies the Nodes dependency property.

Identifies the PathHighlightBrush dependency property.

Identifies the SelectedNodeChanged routed event.

Identifies the SelectedNode dependency property.

Identifies the ShowCollapsedChildCount dependency property.

Identifies the ShowConnectorArrows dependency property.

Identifies the ShowConnectorPorts dependency property.

Identifies the ShowNodeCardAccentStripe dependency property.

Identifies the ShowNodeCardAvatar dependency property.

Identifies the ShowNodeCardShadow dependency property.

Identifies the SpacingBetweenChildNodeToParent dependency property.

Identifies the SpacingBetweenSiblingNodes dependency property.

Identifies the TreeLayoutDirection dependency property.

Identifies the ZoomFactor dependency property.