バージョン

スタイル設定

このトピックは、xamOrgChart のスタイル可能な要素を紹介して、ノード スタイルの設定方法を示します。

トピックは以下のとおりです。

概要

xamOrgChart のノードは、 OrgChartNodeControl を使用して視覚化されます。ノードが組織図の表示領域外に移動されると、それに関連する OrgChartNodeControl は破棄されます。ノードが表示領域内に移動されると、新しい OrgChartNodeControl が作成されます。

ノードのデータは、 OrgChartNode オブジェクトに保存されます。新しい OrgChartNodeControl が作成されると、OrgChartNode オブジェクトにリンクされます。ノードのビジュアル スタイルは OrgChartNode 項目に保存され、直接または Node Layouts から指定できます。

スタイル可能な要素

xamOrgChart Styling 01.png

図 1: xamOrgChart コントロールのスタイル可能な要素

ターゲット プロパティ ターゲットの種類

概要と詳細ペイン

ノード

NodeStyle (OrgChart から設定された場合)

NodeStyle (ノード レイアウトから設定された場合)

Style (OrgChartNode から設定された場合)

展開インジケーター

ExpansionIndicatorStyle (OrgChart から設定された場合)

ExpansionIndicatorStyle (ノード レイアウトから設定された場合)

ExpansionIndicatorStyle (OrgChartNode から設定された場合)

ToggleButton

表 1: スタイル可能な要素とそのタイプ

Note

注:

階層的なノード レイアウトを使用している場合、xamOrgChart はルートのノード レイアウトのように動作し、ノード スタイルおよび展開インジケーター スタイルをそのノードに適用できます。

ノード スタイルの設定

OrgChart でスタイルを設定

XAML の場合:

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

ノード レイアウトでスタイルを設定

XAML の場合:

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

OrgChartNode オブジェクトでスタイルを設定

この例では、ノードをクリックすると OrgChartNode オブジェクトが取得されます。

XAML の場合:

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

C# の場合:

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

Visual Basic の場合:

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

関連トピック

xamOrgChart の使用