C1OrgChart Core Properties

The C1OrgChart control is an ItemsControl. To use it, you will normally populate the control with the Header or ItemsSource properties and define the appearance of the items using the ItemTemplate property.

Use the Header property if you have a single data item that contains sub-items. Use the ItemsSource property if you have a collection of items with sub-items.

Either way, the data items must contain sub-items. In most cases, the sub-items are of the same type as the main items. For example, an Employee class may contain properties about the employee and a Subordinates property that contains a list of employees who report to the parent Employee:

C#	Copy Code
public class Employee { List<Employee> _list = new List<Employee>(); public string Name { get; set; } public string Position { get; set; } public string Notes { get; set; } public IEnumerable<Employee> Subordinates{ get; set; } }

Copy Code

public class Employee
 {
   List<Employee> _list = new List<Employee>();
   public string Name { get; set; }
   public string Position { get; set; }
   public string Notes { get; set; }
   public IEnumerable<Employee> Subordinates{ get; set; }
 }

If you assign an Employee object to the Header property, the C1OrgChart will automatically detect that the Subordinates property contains a collection of Employee objects, and that is enough to establish the hierarchy of the data.

If your data class contains multiple collection properties, or if the collection is of a generic type (for example IEnumerable), then you should use the ChildItemsPath property to specify the name of the property that contains the child (subordinate) items.

If the items contain sub-items of different types, then you should use a HierarchicalDataTemplate to specify the items at each level. This is discussed later in this document.

The ItemTemplate property specifies how the C1OrgChart control should display the data items. This is a standard Silverlight/WPF DataTemplate, which you can define in XAML as follows:

XAML	Copy Code
<Window.Resources> <!-- C1OrgChart node content --> <DataTemplate x:Key="EmployeeTemplate" > <Border Background="WhiteSmoke" BorderBrush="Black" BorderThickness="1 1 2 2" CornerRadius="6" MaxWidth="200" > <StackPanel Orientation="Vertical" > <TextBlock Text="{Binding Name}" FontSize="14" /> <TextBlock Text="{Binding Notes}" FontSize="9.5" /> <TextBlock Text="{Binding Position}" FontSize="12" /> </StackPanel> </Border> </DataTemplate> </Window.Resources>

XAML

Copy Code

<Window.Resources>
   <!-- C1OrgChart node content -->
   <DataTemplate x:Key="EmployeeTemplate" >
     <Border
       Background="WhiteSmoke" BorderBrush="Black"
       BorderThickness="1 1 2 2" CornerRadius="6"
       MaxWidth="200" >
       <StackPanel Orientation="Vertical" >
         <TextBlock Text="{Binding Name}" FontSize="14" />
         <TextBlock Text="{Binding Notes}" FontSize="9.5" />
         <TextBlock Text="{Binding Position}" FontSize="12" />
       </StackPanel>
     </Border>
  </DataTemplate>
 </Window.Resources>

Once you have a DataTemplate defined as a resource, you can use it in a C1OrgChart control as follows:

XAML	Copy Code
<c1:C1OrgChart x:Name="_orgChart" ItemTemplate="{StaticResource EmployeeTemplate }" > </c1:C1OrgChart>

To illustrate, the chart below was created with a slightly enhanced version of this template and some randomly-generated employees: