Version

Adding xamOrgChart Using XAML Code

This topic explains how to add the xamOrgChart™ using XAML code. Before attempting the procedure, make sure you have met the requirements listed in the Adding xamOrgChart to Your Application topic.

Steps

  1. Add the xamOrgChart control to your application and bind it to the data model.

    1. Add the following XML namespace declaration to your XAML file:

      In XAML:

      xmlns:ig="http://schemas.infragistics.com/xaml"
      xmlns:data="DATA_MODEL_NAMESPACE"
    2. Add an instance of the xamOrgChart control with a DataContext bound to a DepartmentViewModel object and an ItemsSource bound to the Departments property.

      In XAML:

      <ig:XamOrgChart ItemsSource="{Binding Departments}">
          <ig:XamOrgChart.DataContext>
              <data:DepartmentViewModel />
          </ig:XamOrgChart.DataContext>
          <ig:XamOrgChart.GlobalNodeLayouts>
              <!--Add Node Layouts-->
          </ig:XamOrgChart.GlobalNodeLayouts>
      </ig:XamOrgChart>
  1. Add Node Layouts to the Org Chart.

    In 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>