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 data template we assigned to the C1OrgChart’s ItemTemplate property:
| Markup |
Copy Code
|
|---|---|
<orgchart:C1OrgChart.ItemTemplate>
<DataTemplate>
<!-- outer border -->
<Border
Background="WhiteSmoke" BorderBrush="Black"
BorderThickness="1 1 2 2" CornerRadius="6"
MaxWidth="200" >
<StackPanel Orientation="Vertical" >
<!-- item header -->
<Border CornerRadius="6 6 0 0" Background="Black" >
<StackPanel Orientation="Horizontal">
<!-- bind CheckBox to containing C1OrgChart's IsCollapsed property -->
<CheckBox Margin="4 0" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>
<!-- item header: person's Name -->
<TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" Foreground="WhiteSmoke" Padding="4 0 0 0" />
</StackPanel>
</Border>
<!-- body: person's details -->
<TextBlock Text="{Binding Notes}" Padding="6 0" FontSize="9.5" TextWrapping="Wrap" />
<TextBlock Text="{Binding Position}" Padding="6 0" FontSize="12" FontStyle="Italic" HorizontalAlignment="Right" />
</StackPanel>
</Border>
</DataTemplate>
</orgchart:C1OrgChart.ItemTemplate>
|
|
The effect of this change is shown below:
Clicking the checkboxes on the Sarah Williams and Larry Doe nodes collapses the branches, resulting in this more compact display:
See Also