C1OrgChart コントロールは、データテンプレートや連結によって提供される柔軟性に加えて、２つの標準クラス（DataTemplateSelector および HierarchicalDataTemplate）を使用する高度な連結シナリオもサポートします。
DataTemplateSelector クラス：このクラスは、データオブジェクトとデータ連結要素に基づいて、異なるテンプレートを選択する方法を提供します。たとえば、役員、管理職、一般社員を、それぞれ異なるテンプレートを使用して表示できます。
それには、DataTemplateSelector から継承されるカスタムクラスを作成し、SelectTemplate オブジェクトをオーバーライドします。次に、このクラスのインスタンスを作成し、それを C1OrgChart コントロールの ItemTemplateSelector プロパティに割り当てます。
次の例は、簡単な DataTemplateSelector の実装を示します。
C# コードの書き方
| C# |
コードのコピー
|
|---|---|
/// <summary>
/// 作成される項目のテンプレートを選択するために使用されるクラス。
/// </summary>
public class PersonTemplateSelector : C1.Xaml.OrgChart.DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
var p = item as Person;
if (p.Position.IndexOf("Director") > -1)
{
return DirectorTemplate;
}
else if (p.Position.IndexOf("Manager") > -1)
{
return ManagerTemplate;
}
else if (p.Position.IndexOf("Designer") > -1)
{
return DesignerTemplate;
}
else
{
return OtherTemplate;
}
}
|
|
カスタム DataTemplateSelector を作成したら、通常どおり、XAML で使用できます。
XAML でマークアップの書き方
| マークアップ |
コードのコピー
|
|---|---|
| <Page.Resources> <!-- テンプレートセレクタ：_tplDirector または _tlpOther を選択します --> <local:PersonTemplateSelector x:Key="_personTplSelector"> <local:PersonTemplateSelector.DirectorTemplate> <!-- 役員用のデータテンプレート --> <DataTemplate> ... </DataTemplate> </local:PersonTemplateSelector.DirectorTemplate> <local:PersonTemplateSelector.ManagerTemplate> <!-- 管理職用のデータテンプレート --> <DataTemplate> ... </DataTemplate> </local:PersonTemplateSelector.ManagerTemplate> <local:PersonTemplateSelector.DesignerTemplate> <!-- 設計者用のデータテンプレート --> <DataTemplate> ... </DataTemplate> </local:PersonTemplateSelector.DesignerTemplate> <local:PersonTemplateSelector.OtherTemplate> <!-- その他の従業員用のデータテンプレート --> <DataTemplate> ... </DataTemplate> </local:PersonTemplateSelector.OtherTemplate> </local:PersonTemplateSelector> </Page.Resources> |
|
次の図に、この結果を示します。
ItemTemplateSelector は、これらのデータ項目が同じ型である場合に使用できますが、特定のデータ項目のプロパティに基づいて一部の項目を異なる表示にすることもできます。
HierarchicalDataTemplate クラス：このクラスを使用すると、C1OrgChart コントロールを複数の型の項目を含む項目に連結できます。たとえば、リーグ、各リーグ内の地区、および各地区内のチームを表示する組織図を作成できます。
それには、サブ項目を含むクラスごとに HierarchicalDataTemplate を作成し、階層内の最後のクラス用に通常のデータテンプレートを作成します。この例では、リーグ用と地区用にそれぞれ HierarchicalDataTemplate を作成し、さらにチーム用に通常のデータテンプレートを作成します。
XAML でマークアップの書き方
| マークアップ |
コードのコピー
|
|---|---|
<Page.Resources>
<!-- Team オブジェクト用のテンプレート -->
<DataTemplate x:Key="TeamTemplate" >
<Border Background="LightBlue" Padding="4" >
<TextBlock FontStyle="Italic" Text="{Binding Name}" />
</Border>
</DataTemplate>
<!-- Division オブジェクト用のテンプレート -->
<Xaml:C1HierarchicalDataTemplate x:Key="DivisionTemplate"
ItemTemplate="{StaticResource TeamTemplate}" ItemsSource="{Binding Teams}">
<DataTemplate>
<Border Background="Gold" >
<TextBlock Text="{Binding Name}" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" />
</Border>
</DataTemplate>
</Xaml:C1HierarchicalDataTemplate >
<!-- League オブジェクト用のテンプレート -->
<Xaml:C1HierarchicalDataTemplate x:Key="LeagueTemplate"
ItemTemplate="{StaticResource DivisionTemplate}" ItemsSource="{Binding Divisions}">
<DataTemplate>
<Border Background="LightCoral" >
<TextBlock Text="{Binding Name}" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="40" />
</Border>
</DataTemplate>
</Xaml:C1HierarchicalDataTemplate >
</Page.Resources>
|
|
最上位のテンプレートは、LeagueTemplate です。ItemsSource プロパティは、League オブジェクトの表示方法（通常のテンプレート表示）を定義することに加えて、下位オブジェクトを League.Divisions プロパティから取得する必要があることを指定します。最後に、ItemTemplate プロパティは、下位オブジェクトの表示に使用されるテンプレートを指定します。
この例では、この ItemTemplate は DivisionTemplate です。これもまた別の HierarchicalDataTemplate です。これは、Division オブジェクトの表示方法、下位オブジェクトが Division.Teams プロパティによって公開されること、さらにその下位オブジェクトを TeamTemplate（通常の非階層化データテンプレート）を使用して表示する必要があることを指定します。
次の点が重要です。
- HierarchicalDataTemplate クラスは、標準の DataTemplate クラスから派生され、２つのプロパティを追加します。ItemsSource は、サブ項目を含むプロパティを指定し、ItemTemplate は、下位項目で使用されるテンプレートを指定します。
テンプレートを定義したら、これらを使用するには、通常どおり、ItemTemplate プロパティを設定します。
|
コードのコピー
|
|
|---|---|
<OrgChart:C1OrgChart Name="_chart" ItemTemplate="{StaticResource LeagueTemplate}" ConnectorDashArray="1 2" ConnectorStroke="Gray"
HorizontalAlignment="Center" VerticalAlignment="Center" />
|
|
C1OrgChart が階層化データテンプレートを使用して、適切な子コレクションおよびデータテンプレートを選択しながら階層を組み立てていることがわかります。