Version

Styling

This topic guides you through the styleable elements of the xamOrgChart™ and demonstrates how to set node styles.

The topic is organized as follows:

Introduction

The nodes of the xamOrgChart are visualized using the OrgChartNodeControl. When a node is moved outside of the visible area of the Org Chart, the OrgChartNodeControl related to it is disposed. When a node is moved inside the visible area, a new OrgChartNodeControl is created.

The data for the nodes is stored in OrgChartNode objects. When a new OrgChartNodeControl is created, it is linked to an OrgChartNode object. The visual styles of the nodes are stored in the OrgChartNode items and can be assigned directly or through Node Layouts.

Styleable Elements

xamOrgChart Styling 01.png

Figure 1: The styleable elements of the xamOrgChart control

Target Property Target Type

Overview Plus Detail Pane

Node

NodeStyle (when set from the OrgChart)

NodeStyle (when set from a Node Layout)

Style (when set from an OrgChartNode)

Expansion Indicator

ExpansionIndicatorStyle (when set from the OrgChart)

ExpansionIndicatorStyle (when set from a Node Layout)

ExpansionIndicatorStyle (when set from an OrgChartNode)

ToggleButton

Table 1: Styleable elements and their types

Note
Note:

When using Hierarchical Node Layouts, the xamOrgChart acts as the root Node Layout: it can apply a Node Style and an Expansion Indicator Style to the nodes.

Setting Node Styles

Setting Styles Through the OrgChart

In XAML:

<ig:XamOrgChart
    OverviewPlusDetailPaneStyle="..."
    NodeStyle="..."
    ExpansionIndicatorStyle="...">
</ig:XamOrgChart>

Setting Styles Through a Node Layout

In XAML:

<ig:OrgChartNodeLayout
    NodeStyle="..."
    ExpansionIndicatorStyle="...">
</ig:OrgChartNodeLayout>

Setting Styles Through an OrgChartNode Object

In the example, the OrgChartNode object is acquired when a node is clicked.

In XAML:

<ig:XamOrgChart
    NodeMouseLeftButtonDown="XamOrgChart_NodeMouseLeftButtonDown">
</ig:XamOrgChart>

In C#:

private void XamOrgChart_NodeMouseLeftButtonDown(object sender, OrgChartNodeClickEventArgs e)
{
    e.Node.Node.Style = anOrgChartNodeControlStyle;
    e.Node.Node.ExpansionIndicatorStyle= aToggleButtonStyle;
}

In Visual Basic:

Private Sub XamOrgChart_NodeMouseLeftButtonDown(sender As Object, e As OrgChartNodeClickEventArgs)
    e.Node.Node.Style = anOrgChartNodeControlStyle
    e.Node.Node.ExpansionIndicatorStyle= aToggleButtonStyle
End Sub

Related Topics

Using xamOrgChart