OrgChart for WPF/Silverlight
高度な連結シナリオ
OrgChart for WPFの使い方 > 高度な連結シナリオ

C1OrgChart コントロールは、データテンプレートや連結によって提供される柔軟性に加えて、2つの標準クラス(DataTemplateSelector および HierarchicalDataTemplate)を使用する高度な連結シナリオもサポートします。

DataTemplateSelector クラス:このクラスを使用すると、特定のデータ項目の特性に基づいて、異なるテンプレートを選択できます。たとえば、役員、管理職、一般社員を、それぞれ異なるテンプレートを使用して表示できます。

それには、DataTemplateSelector から継承されるカスタムクラスを作成し、SelectTemplate オブジェクトをオーバーライドします。次に、このクラスのインスタンスを作成し、それを C1OrgChart コントロールの ItemTemplateSelector プロパティに割り当てます。

次の例は、簡単な DataTemplateSelector の実装を示します。

C#
コードのコピー
 /// <summary>
 /// 作成される項目のテンプレートを動的に選択するために使用されるクラス。
 /// </summary>
public class EmployeeTemplateSelector : DataTemplateSelector
 {
   public override DataTemplate SelectTemplate(object item, DependencyObject ctnr)
   {
     var p = item as Employee;
     var e = Application.Current.RootVisual as FrameworkElement;
     return p.Position.IndexOf("Director") > -1
       ? e.Resources["DirectorTemplate"] as DataTemplate
       : e.Resources["EmployeeTemplate"] as DataTemplate;
   }
 }

次の点が重要です。

カスタム DataTemplateSelector を作成したら、通常どおり、XAML で使用できます。

XAML
コードのコピー
<Window.Resources>
   <!-- 従業員の役職に基づくテンプレートの選択 -->
   <local:PersonTemplateSelector x:Key="TemplateSelector" />
   <!-- 役員用のデータテンプレート -->
   <DataTemplate x:Key="DirectorTemplate" ></DataTemplate>
   <!-- 他の従業員用のデータテンプレート -->
   <DataTemplate x:Key="EmployeeTemplate" ></DataTemplate>
 </Window.Resources><c1:C1OrgChart
     ItemTemplateSelector="{StaticResource TemplateSelector}"
     ConnectorStroke="Black" ConnectorThickness="3" />

次の図に、この結果を示します。

ItemTemplateSelector は、これらのデータ項目が同じ型である場合に使用できますが、特定のデータ項目のプロパティに基づいて一部の項目を異なる表示にすることもできます。

HierarchicalDataTemplate クラス:このクラスを使用すると、C1OrgChart コントロールを複数の型の項目を含む項目に連結できます。たとえば、リーグ、各リーグ内の地区、および各地区内のチームを表示する組織図を作成できます。

それには、サブ項目を含むクラスごとに HierarchicalDataTemplate を作成し、階層内の最後のクラス用に通常のデータテンプレートを作成します。この例では、リーグ用と地区用にそれぞれ HierarchicalDataTemplate を作成し、さらにチーム用に通常のデータテンプレートを作成します。

XAML
コードのコピー
<Window.Resources>
   <!-- Team オブジェクト用の通常のテンプレート -->
   <DataTemplate x:Key="TeamTemplate" >
     <Border Background="LightBlue" Padding="4" >
       <TextBlock FontStyle="Italic" Text="{Binding Path=Name}" />
     </Border>
   </DataTemplate>
   <!-- Division オブジェクト用の階層化テンプレート -->
   <c1:HierarchicalDataTemplate x:Key="DivisionTemplate"
     ItemsSource="{Binding Path=Teams}"
     ItemTemplate="{StaticResource TeamTemplate}">
    <Border Background="Gold" >
       <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Padding="20" />
     </Border>
   </c1:HierarchicalDataTemplate>
   <!-- League オブジェクト用の階層化テンプレート -->
   <c1:HierarchicalDataTemplate x:Key="LeagueTemplate"
     ItemsSource="{Binding Path=Divisions}"
     ItemTemplate="{StaticResource DivisionTemplate}">
     <Border Background="LightCoral" >
       <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" Padding="40" />
     </Border>
   </c1:HierarchicalDataTemplate>
 </Window.Resources>

最上位のテンプレートは、LeagueTemplate です。ItemsSource プロパティは、League オブジェクトの表示方法(通常のテンプレート表示)を定義することに加えて、下位オブジェクトを League.Divisions プロパティから取得する必要があることを指定します。最後に、ItemTemplate プロパティは、下位オブジェクトの表示に使用されるテンプレートを指定します。

この例では、この ItemTemplateDivisionTemplate です。これもまた別の HierarchicalDataTemplate です。これは、Division オブジェクトの表示方法、下位オブジェクトが Division.Teams プロパティによって公開されること、さらにその下位オブジェクトを TeamTemplate(通常の非階層化データテンプレート)を使用して表示する必要があることを指定します。

次の点が重要です。

テンプレートを定義したら、これらを使用するには、通常どおり、ItemTemplate プロパティを設定します。

<c1:C1OrgChart ItemTemplate="{StaticResource LeagueTemplate}" >

C1OrgChart が階層化データテンプレートを使用して、適切な子コレクションおよびデータテンプレートを選択しながら階層を組み立てていることがわかります。これは、MenuTreeView などの WPF HeaderedItemControl クラスで使用されているメカニズムと同じです。