このトピックは、組織図をデータにバインドする方法を示します。
トピックは以下のとおりです。
データを xamOrgChart コントロールにパスする時は、コントロールはバインド方法を認識する必要があります。これは ノード レイアウトで実行されます。データにバインドするために使用されるプロパティは以下のとおりです。
DisplayMemberPath - ソース オブジェクトの視覚的表現として機能する値へのパス
Key - 列挙可能なオブジェクトを公開するプロパティ
TargetTypeName - ノード レイアウトが一致しようとするオブジェクトのタイプ
NodeLayouts - 子 OrgChartNodeLayout 項目のコレクション
階層ノード レイアウトで作業をする時、xamOrgChart コントロールがルート ノード レイアウトとなります。データ ソースがオブジェクトのリストであることを前提として、以下に示すコードはフラットな展開不可能なリストを表示します(図 1)
図 1: フラットな展開不可能なリストを表示
XAML の場合:
<ig:XamOrgChart DisplayMemberPath="ClassName">
</ig:XamOrgChart>階層的な組織を作成するために (図 2)、ネストされたノード レイアウトは Node Layouts コレクションで定義できます。この場合、Key プロパティの値は親ノードのコレクションを参照します。TargetTypeName プロパティは使用されません。
図 2: 階層ノード レイアウトを使用して階層を表示
XAML の場合:
<ig:XamOrgChart DisplayMemberPath="ClassName">
<ig:XamOrgChart.NodeLayouts>
<ig:OrgChartNodeLayout
Key="Methods"
DisplayMemberPath="MethodName" />
</ig:XamOrgChart.NodeLayouts>
</ig:XamOrgChart>図 3 は複数の階層ノード レイアウトの例を示します。
図 3: 複数の階層ノード レイアウトを使用して階層を表示
XAML の場合:
<ig:XamOrgChart DisplayMemberPath="ClassName">
<ig:XamOrgChart.NodeLayouts>
<ig:OrgChartNodeLayout
Key="Methods"
DisplayMemberPath="MethodName">
<ig:OrgChartNodeLayout.NodeLayouts>
<!--ここで子ノード レイアウトを定義します-->
</ig:OrgChartNodeLayout.NodeLayouts>
</ig:OrgChartNodeLayout>
<ig:OrgChartNodeLayout
Key="Interfaces"
DisplayMemberPath="InterfaceName">
<ig:OrgChartNodeLayout.NodeLayouts>
<!--ここで子ノード レイアウトを定義します-->
</ig:OrgChartNodeLayout.NodeLayouts>
</ig:OrgChartNodeLayout>
</ig:XamOrgChart.NodeLayouts>
</ig:XamOrgChart>データ ソースがネストされた従業員の階層セットであることを前提として、 Global Node Layouts コレクションに追加された単一のノード レイアウトはすべてのネストされた項目と再帰的に一致します(図 4)
図 4: グローバル ノード レイアウトを使用して階層を表示
XAML の場合:
<ig:XamOrgChart>
<ig:XamOrgChart.GlobalNodeLayouts>
<ig:OrgChartNodeLayout
TargetTypeName="Employee"
DisplayMemberPath="Name"
Key="Subordinates" />
</ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>グローバル ノード レイアウトで作業をする時、TargetTypeName プロパティはタイプに応じてデータ ソースからの項目と一致させるために使用されます。Key プロパティは使用されません。
図 5 は複数のグローバル ノード レイアウトの例を示します。
図 5: 複数のグローバル ノード レイアウトを使用して階層を表示
XAML の場合:
<ig:XamOrgChart>
<ig:XamOrgChart.GlobalNodeLayouts>
<ig:OrgChartNodeLayout
TargetTypeName="Department"
DisplayMemberPath="DepartmentName"
Key="EmployeePositions" />
<ig:OrgChartNodeLayout
TargetTypeName="EmployeePosition"
DisplayMemberPath="PositionName"
Key="Employees" />
<ig:OrgChartNodeLayout
TargetTypeName="Employee"
DisplayMemberPath="FullName" />
</ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>データ ソースからの項目が Node Layout オブジェクトと一致する場合常に、 NodeLayoutAssigned イベントが発生します。これによって、項目のタイプの評価と異なる Node Layout オブジェクトの割り当てが可能となります。
XAML の場合:
<ig:XamOrgChart NodeLayoutAssigned="OrgChart_NodeLayoutAssigned">
</ig:XamOrgChart>C# の場合:
private void OrgChart_NodeLayoutAssigned(object sender, NodeLayoutAssignedEventArgs e)
{
if (e.DataType.Name == "Employee")
{
//異なるノード レイアウトを割り当てます
e.NodeLayout = differentNodeLayout;
}
}
Visual Basic の場合:
Private Sub OrgChart_NodeLayoutAssigned(sender As Object, e As NodeLayoutAssignedEventArgs)
If e.DataType.Name = "Employee" Then
'異なるノード レイアウトを割り当てます
e.NodeLayout = differentNodeLayout
End If
End Sub