前の例で使用した ItemTemplate は、連結を使用して Employee クラスのプロパティをビジュアル要素として表示しますが、ビジュアル要素を C1OrgChart のプロパティに連結することもできます。
このような例として、CheckBox。IsChecked プロパティを C1OrgChart の IsCollapsed プロパティに連結するとたいへん便利です。これにより、TreeView のように動作する折りたたみ可能な C1OrgChart を作成できます。
たとえば、次は、C1OrgChart の ItemTemplate プロパティに割り当てたデータテンプレートを多少変更したバージョンです。
| XAML |
コードのコピー
|
|---|---|
<Window.Resources> <!-- C1OrgChart ノードコンテンツ --> <DataTemplate x:Key="EmployeeTemplate" > <Border Background="WhiteSmoke" BorderBrush="Black" BorderThickness="1 1 2 2" CornerRadius="6" MaxWidth="200" > <StackPanel Orientation="Vertical" > <!-- CheckBox を C1OrgChart IsCollapsed プロパティに連結する --> <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 は、子ノードの数に応じて接続線の太さが変わる組織図を生成します。
| XAML |
コードのコピー
|
|---|---|
<c1:C1OrgChart x:Name="_orgChart" > ConnectorThickness="{Binding Path=Subordinates.Count}" ItemTemplate="{StaticResource EmployeeTemplate }" > <c1:C1OrgChart> |
|
John Doe には直属の部下が１人しかいないため、接続線は１ピクセルの太さになります。Kevin Smith には直属の部下が３人いるため、接続線は３ピクセルの太さになります。