C1OrgChart のコアプロパティ

C1OrgChart コントロールは ItemsControl の１つです。通常、このコントロールを使用するには、コントロールの Header または ItemsSource プロパティを設定し、ItemTemplate プロパティを使用して項目の外観を定義します。

いくつかのサブ項目を含む１つのデータ項目がある場合は、Header プロパティを使用します。いくつかのサブ項目を含む項目のコレクションがある場合は、ItemsSource プロパティを使用します。

どちらの方法でも、データ項目にサブ項目を含める必要があります。ほとんどの場合、サブ項目の型はメイン項目と同じになります。たとえば、Person クラスがあるとすると、このクラスは、この人に関するいくつかのプロパティと、この親 Person の部下にあたる従業員のリストを含む Subordinates プロパティを持つことが考えられます。

C#	コードのコピー
public class Person { ObservableCollection<Person> _list = new ObservableCollection<Person>(); #region ** object model public string Name { get; set; } public string Position { get; set; } public string Notes { get; set; } public IList<Person> Subordinates { get { return _list; } }

コードのコピー

public class Person
    {
      ObservableCollection<Person> _list = new    ObservableCollection<Person>();
 
        #region ** object model
 
        public string Name { get; set; }
        public string Position { get; set; }
        public string Notes { get; set; }
        public IList<Person> Subordinates
        {
            get { return _list; }
        }

Header に Person オブジェクトを割り当てると、Subordinates プロパティに Person オブジェクトのコレクションが含まれていることが自動的に検出されます。これだけでデータの階層が確立されます。

データクラスに複数のコレクションプロパティが含まれる場合、またはコレクションが汎用型（IEnumerable など）である場合は、ChildItemsPath プロパティを使用して、子（下位）項目を含むプロパティの名前を指定する必要があります。

項目に含まれるサブ項目の型がそれぞれ異なる場合は、HierarchicalDataTemplate を使用して、レベルごとに項目を指定する必要があります。これについては、このドキュメントの後半で説明します。

ItemTemplate コントロールは、データ項目を表示します。これは標準の DataTemplate で、XAML で次のように定義できます。

マークアップ	コードのコピー
<Page.Resources> <local:PersonTemplateSelector x:Key="_personTplSelector"> <local:PersonTemplateSelector.DirectorTemplate> <!-- 役員用のデータテンプレート --> <DataTemplate> <Border Background="Gold" BorderBrush="Black" BorderThickness="2 2 4 4" CornerRadius="6" Margin="20" MaxWidth="200"> <StackPanel Orientation="Vertical"> <Border CornerRadius="6 6 0 0" Background="Black"> <StackPanel Orientation="Horizontal"> <Ellipse Width="12" Height="12" Fill="Gold" Margin="4" /> <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16" Foreground="Gold" /> </StackPanel> </Border> <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="14" FontStyle="Italic" HorizontalAlignment="Right" /> </StackPanel> </Border> </DataTemplate> </local:PersonTemplateSelector.DirectorTemplate> </local:PersonTemplateSelector> </Page.Resources>

マークアップ

コードのコピー

<Page.Resources>
        <local:PersonTemplateSelector x:Key="_personTplSelector">
          <local:PersonTemplateSelector.DirectorTemplate>
            <!-- 役員用のデータテンプレート -->
            <DataTemplate>
    <Border Background="Gold" BorderBrush="Black" BorderThickness="2 2 4 4" CornerRadius="6" Margin="20" MaxWidth="200">
                 <StackPanel Orientation="Vertical">
    <Border CornerRadius="6 6 0 0" Background="Black">
                     <StackPanel Orientation="Horizontal">
    <Ellipse Width="12" Height="12" Fill="Gold" Margin="4" />
    <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="16" Foreground="Gold" />
                     </StackPanel>
                   </Border>
    <TextBlock Text="{Binding Position}" Padding="6 0" FontSize="14" FontStyle="Italic" HorizontalAlignment="Right" />
                 </StackPanel>
               </Border>
            </DataTemplate>
          </local:PersonTemplateSelector.DirectorTemplate>
        </local:PersonTemplateSelector>
     </Page.Resources>

DataTemplate をリソースとして定義したら、これを C1OrgChart コントロールで次のように使用できます。

マークアップ	コードのコピー
<OrgChart:C1OrgChart Name="_orgChart" Grid.Row="1" ConnectorThickness="2" ItemTemplateSelector="{StaticResource _personTplSelector}" Orientation="Horizontal">

このテンプレートを多少拡張したバージョンと、ランダムに生成された従業員を使用して作成した組織図の例を下に示します。