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.

Overview

Conceptual overview of the adding procedure:

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

  1. Adding Node Layouts to the Org Chart.

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>

Related Topics

Adding xamOrgChart to Your Application

Adding xamOrgChart Using Procedural Code

Understanding xamOrgChart

Using xamOrgChart

API Overview