# Using Bindings in C1OrgChart Properties

## Content



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](/componentone/api/wpf/online-orgchart/dotnet-framework-api/C1.WPF.OrgChart.4.6.2/C1.WPF.OrgChart.C1OrgChart.html).

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:

```xml
<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:

![C1OrgChart for WPF](https://cdn.mescius.io/document-site-files/images/282d56f4-1ae7-4585-bed7-ef71b36e32f5/imagesext/image12_1.jpg)

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

![C1OrgChart for WPF](https://cdn.mescius.io/document-site-files/images/282d56f4-1ae7-4585-bed7-ef71b36e32f5/imagesext/image12_2.jpg)

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:

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

![C1OrgChart for WPF](https://cdn.mescius.io/document-site-files/images/282d56f4-1ae7-4585-bed7-ef71b36e32f5/imagesext/image12_3.jpg)

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.