バージョン

XAML コードを使用して xamOrgChart を追加

このトピックは、XAML コードを使用して xamOrgChart を追加する方法を説明します。手順を先に進める前に、 「xamOrgChart をアプリケーションに追加」トピックの要件を満たしていることを確認してください。

手順

  1. xamOrgChart コントロールをユーザーのアプリケーションに追加し、データ モデルにバインドします。

    1. 以下の XML 名前空間宣言を XAML ファイルに追加します:

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"
xmlns:data="DATA_MODEL_NAMESPACE"
  1. DataContext を DepartmentViewModel オブジェクトにバインドし、ItemsSource を Departments プロパティにバインドして、xamOrgChart コントロールのインスタンスを追加します。

XAML の場合:

<ig:XamOrgChart ItemsSource="{Binding Departments}">
    <ig:XamOrgChart.DataContext>
        <data:DepartmentViewModel />
    </ig:XamOrgChart.DataContext>
    <ig:XamOrgChart.GlobalNodeLayouts>
        <!--ノード レイアウトを追加します-->
    </ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>
  1. ノード レイアウトを OrgChart に追加します。

XAML の場合:

<ig:XamOrgChart ItemsSource="{Binding Departments}">
    <ig:XamOrgChart.DataContext>
        <data:DepartmentViewModel />
    </ig:XamOrgChart.DataContext>
    <ig:XamOrgChart.GlobalNodeLayouts>
        <ig:OrgChartNodeLayout
                               TargetTypeName="Department"
                               DisplayMemberPath="Name"
                               Key="EmployeePositions" />
        <ig:OrgChartNodeLayout
                               TargetTypeName="EmployeePosition"
                               DisplayMemberPath="JobTitle"
                               Key="Employees" />
        <ig:OrgChartNodeLayout
                               TargetTypeName="Employee"
                               DisplayMemberPath="FirstName" />
    </ig:XamOrgChart.GlobalNodeLayouts>
</ig:XamOrgChart>