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, a Person class may contain properties about the person, and the Subordinates property may contains a list of employees who report to the parent Person:

public class Person
    {
      ObservableCollection<Person> _list = new    ObservableCollection<Person>();

        #region ** object model

        public string Name { get; set; }
        public string Position { get; set; }
        public string Notes { get; set; }
        public IList<Person> Subordinates
        {
            get { return _list; }
        }

If you assign a Person object to the Header property, the C1OrgChart will automatically detect that the Subordinates property contains a collection of Person 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 DataTemplate, which you can define in XAML as follows:

<Page.Resources> 
    <local:PersonTemplateSelector x:Key="_personTplSelector">
      <local:PersonTemplateSelector.DirectorTemplate>
        <!-- data template for Directors -->
        <DataTemplate>
          <Border Background="Gold" BorderBrush="Black" BorderThickness="2 2 4 4" CornerRadius="6" Margin="20" MaxWidth="200">
             <StackPanel Orientation="Vertical">
               <Border CornerRadius="6 6 0 0" Background="Black">
                 <StackPanel Orientation="Horizontal">
                 <Ellipse Width="12" Height="12" Fill="Gold" Margin="4" />
                 <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16" Foreground="Gold" />
                 </StackPanel>
               </Border>
                 <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="14" FontStyle="Italic" HorizontalAlignment="Right" />
             </StackPanel>
           </Border>
        </DataTemplate>
      </local:PersonTemplateSelector.DirectorTemplate>
    </local:PersonTemplateSelector>
 </Page.Resources>

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

<OrgChart:C1OrgChart Name="_orgChart" Grid.Row="1" ConnectorThickness="2" ItemTemplateSelector="{StaticResource _personTplSelector}" Orientation="Horizontal"></OrgChart:C1OrgChart>

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

Copyright (c) GrapeCity, inc. All rights reserved.