Using Bindings in C1OrgChart Properties

The ItemTemplate used in the examples above use bindings to show properties of the Employee class as visual elements. But you can also bind elements to properties of the C1OrgChart.

The most useful of these scenarios is binding a CheckBox.IsChecked property to the C1OrgChart’s IsCollapsed property. This allows you to create collapsible C1OrgCharts that behave similarly to a TreeView control.

For example, here is a slightly modified version of the data template we assigned to the C1OrgChart’s ItemTemplate property:

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" > <!-- CheckBox bound to C1OrgChart's IsCollapsed property --> <CheckBox Margin="4 0" IsChecked="{Binding IsCollapsed, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=c1:C1OrgChart}}"/> <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" >
         <!-- CheckBox bound to C1OrgChart's IsCollapsed property -->
         <CheckBox Margin="4 0"
           IsChecked="{Binding IsCollapsed, Mode=TwoWay,
           RelativeSource={RelativeSource AncestorType=c1:C1OrgChart}}"/>
        <TextBlock Text="{Binding Name}" FontSize="14" />
         <TextBlock Text="{Binding Notes}" FontSize="9.5" />
         <TextBlock Text="{Binding Position}" FontSize="12" />
       </StackPanel>
     </Border>
  </DataTemplate>
 </Window.Resources

The effect of this change is shown below:

Clicking the checkboxes collapses the branches, resulting in this more compact display:

You can also use bindings to customize the connector lines. For example, the XAML below generates a chart where the thickness of the connector line corresponds to the number of child nodes:

XAML	Copy Code
<c1:C1OrgChart x:Name="_orgChart" ConnectorThickness="{Binding Path=Subordinates.Count}" ItemTemplate="{StaticResource EmployeeTemplate }" > </c1:C1OrgChart>

Since John Doe has only one direct subordinate, his connector line is one pixel thick. Kevin Smith has three direct subordinates, so his connector lines are tree pixels thick.