OrgChart for WPF/Silverlight
ノードの展開と折りたたみ
タスク別ヘルプ > ノードの展開と折りたたみ

C1OrgChart では、TreeView コントロールと同様に動作する折りたたみ可能な C1OrgChart を作成できます。C1OrgChart ノードを展開/折りたたむには、次の手順に従います。

  1. Visual Studio の［ファイル］メニューから、［新規作成］を選択し、［プロジェクト］を選択します。

  2. ［新しいプロジェクト］ダイアログボックスで、左側のメニューから言語を選択します。［フレームワーク］ドロップダウンリストで［。NET Framework 4］を選択し、プロジェクトの名前として「OrgChart」と入力します。

  3. ソリューションエクスプローラで、プロジェクト名を右クリックし、［参照の追加］を選択します。［参照の追加］ダイアログボックスで、以下のアセンブリを見つけて選択し、［OK］をクリックしてプロジェクトに参照を追加します。

    • C1.WPF および C1.WPF.OrgChart

    • C1.Silverlight および C1.Silverlight.OrgChart

  4. xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 名前空間を <Window> タグの名前空間宣言に追加します。これは、ほとんどの WPF コントロールで機能する一般的な名前空間です。

  5. 次の名前空間をアプリケーションの <Window> タグに追加します。

    xmlns:local="clr-namespace:OrgChart"

  6. 次の XAML マークアップを <c1:C1OrgChart> </c1:C1OrgChart> タグの直前に挿入して、C1OrgChart データテンプレートを作成します。

    XAML
    コードのコピー 
    <Window.Resources>
        <!--テンプレートセレクタ：_tplDirectorまたは _tlpOther を選択します -->
        <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">
                                    <CheckBox Margin="4 0" IsChecked="{Binding IsCollapsed, Mode=TwoWay, 

　　　　　　　　　　　　　　　　　　　　　　　RelativeSource={RelativeSource AncestorType=c1:C1OrgChart}}"/>
                                    <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.OtherTemplate>
                <!--その他の従業員用のデータテンプレート -->
                <DataTemplate>
                    <Border Background="WhiteSmoke" BorderBrush="Black" BorderThickness="1 1 2 2" 　　　　　　　　　　　　　CornerRadius="6" MaxWidth="200">
                        <StackPanel Orientation="Vertical">
                            <Border CornerRadius="6 6 0 0" Background="Black">
                                <StackPanel Orientation="Horizontal">
                                    <CheckBox Margin="4 0" IsChecked="Binding IsCollapsed, Mode=TwoWay, 

　　　　　　　　　　　　　　　　　　　　　　　RelativeSource={RelativeSource AncestorType=c1:C1OrgChart}}"/>
                                    <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" 

　　　　　　　　　　　　　　　　　　　　　　　foreground="WhiteSmoke" Padding="4 0 0 0"></TextBlock>
                                </StackPanel>
                            </Border>
                            <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>
            </local:PersonTemplateSelector.OtherTemplate>
        </local:PersonTemplateSelector>
    </Window.Resources>

  7. 次のマークアップを挿入して、C1OrgChart コントロールとそのコントロールパネルを作成します。次の XAML は、C1OrgChart コントロールに加えて、ScrollViewer コントロールを追加します。

    XAML
    コードのコピー 
    <!--組織図 -->
        <ScrollViewer Background="White" Grid.Row="1" HorizontalScrollBarVisibility="Auto" 

         VerticalScrollBarVisibility="Auto" Padding="0">
            <c1:C1OrgChart x:Name="_orgChart" Grid.Row="1" Orientation="Horizontal" 

             ItemTemplateSelector="{StaticResource _personTplSelector}" 
                           ConnectorStroke="Black" ConnectorThickness="2" IsCollapsed="False">
                <!--スケール変換をスライダに連結する -->
                <c1:C1OrgChart.RenderTransform>
                    <ScaleTransform ScaleX="{Binding Value, ElementName=_sliderZoom}" 

                     ScaleY="{Binding Value, ElementName=_sliderZoom}" />
                </c1:C1OrgChart.RenderTransform> 
                <!--ツリーノードの表示に使用されるテンプレート -->
                <!--テンプレートセレクタを使用するため、このサンプルでは使用しません -->
                <!--<c1:C1OrgChart.ItemTemplate />-->
            </c1:C1OrgChart>
        </ScrollViewer>

  8. 次の XAML マークアップを </Window.Resources> タグと <c1:C1OrgChart> タグの間に追加します。

    XAML
    コードのコピー 
    <!--レイアウトルート -->
    <Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
       <!--コントロールパネル -->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 8">
            <Button Content="新しいデータ" Padding="8 0" Click="Button_Click" />
            <TextBlock Text="  ズーム: " VerticalAlignment="Center" />
            <Slider x:Name="_sliderZoom" VerticalAlignment="Center" Minimum=".01" Maximum="1" Value="1" Width="200" />
        </StackPanel>

  9. ページを右クリックし、リストから［コードの表示］を選択します。次の名前空間をコードファイルにインポートします。

    VisualBasic
    コードのコピー 
    Imports C1.WPF.OrgChart

    C#
    コードのコピー 
    using C1.WPF.OrgChart;

    VisualBasic
    コードのコピー 
    Imports C1.Silverlight.OrgChart

    C#
    コードのコピー 
    using C1.Silverlight.OrgChart;

  10. InitializeComponent() メソッドのすぐ下に、次のコードを挿入します。

    コードのコピー 
    CreateData()
    End Sub
    Private Sub Button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
        CreateData()
    End Sub
    Private Sub CreateData()
        Dim p = Data.Person.CreatePerson(10)
        _orgChart.Header = p
    End Sub
    Public Property DEMO_Orientation As Orientation
        Get
            Return _orgChart.Orientation
        End Get
        Set(value As Orientation)
            _orgChart.Orientation = value
        End Set
    End Property
    Public Property DEMO_HorizontalContentAlignment As HorizontalAlignment
        Get
            Return _orgChart.HorizontalContentAlignment
        End Get
        Set(value As HorizontalAlignment)
            _orgChart.HorizontalContentAlignment = value
        End Set
    End Property
    Public Property DEMO_VerticalContentAlignment As VerticalAlignment
        Get
            Return _orgChart.VerticalContentAlignment
        End Get
        Set(value As VerticalAlignment)
            _orgChart.VerticalContentAlignment = value
        End Set
            End Property
End Class
    コードのコピー 
    CreateData();
        }
        void Button_Click(object sender, RoutedEventArgs e)
        {
            CreateData();
        }
        void CreateData()
        {
            var p = Data.Person.CreatePerson(10);
            _orgChart.Header = p;
        }
        public Orientation DEMO_Orientation
        {
               get
            {
                return _orgChart.Orientation;
            }
            set
            {
                _orgChart.Orientation = value;
            }
        }        
        public HorizontalAlignment DEMO_HorizontalContentAlignment
        {
            get
            {
                return _orgChart.HorizontalContentAlignment;
            }
            set
            {
                _orgChart.HorizontalContentAlignment = value;
            }
        }
        public VerticalAlignment DEMO_VerticalContentAlignment
        {
            get
            {
                return _orgChart.VerticalContentAlignment;
            }
            set
            {
                _orgChart.VerticalContentAlignment = value;
            }
        }
    }

  11. 次のコードを追加して、作成される項目のテンプレートを選択します。

    コードのコピー 
    ' 作成される項目のテンプレートを選択するために使用されるクラス。
Public Class PersonTemplateSelector
    Inherits DataTemplateSelector
    Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate
        Dim p = TryCast(item, Data.Person)
        'var e = Application.Current.RootVisual as FrameworkElement;
        'return p.Position.IndexOf("Director") > -1
        '    ? e.Resources["_tplDirector"] as DataTemplate
        '    : e.Resources["_tplOther"] as DataTemplate;
        Return If(p.Position.IndexOf("Director") > -1, DirectorTemplate, OtherTemplate)
    End Function
    ' 組織図を指定されたレベルまで折りたたみます
    Private Sub CollapseExpand(node As C1.WPF.OrgChart.C1OrgChart, level As Integer, maxLevel As Integer)
        If level >= maxLevel Then
            node.IsCollapsed = True
        Else
            node.IsCollapsed = False
            For Each subNode In node.ChildNodes
                CollapseExpand(subNode, level + 1, maxLevel)
            Next
        End If
    End Sub
    Public Property DirectorTemplate() As DataTemplate
        Get
            Return m_DirectorTemplate
        End Get
        Set(value As DataTemplate)
            m_DirectorTemplate = Value
        End Set
    End Property
    Private m_DirectorTemplate As DataTemplate
    Public Property OtherTemplate() As DataTemplate
        Get
            Return m_OtherTemplate
        End Get
        Set(value As DataTemplate)
            m_OtherTemplate = Value
        End Set
    End Property
    Private m_OtherTemplate As DataTemplate
End Class
    コードのコピー 
    /// 作成される項目のテンプレートを選択するために使用されるクラス。
    /// </summary>
    public class PersonTemplateSelector : DataTemplateSelector
    {
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            var p = item as Data.Person;
            //var e = Application.Current.RootVisual as FrameworkElement;
            //return p.Position.IndexOf("Director") > -1
            //    ? e.Resources["_tplDirector"] as DataTemplate
            //    : e.Resources["_tplOther"] as DataTemplate;
            return p.Position.IndexOf("Director") > -1
                ? DirectorTemplate
                : OtherTemplate;
        }
        // 組織図を指定されたレベルまで折りたたみます
        void CollapseExpand(C1OrgChart node, int level, int maxLevel)
        {
            if (level >= maxLevel)
            {
                node.IsCollapsed = true;
            }
            else
            {
                node.IsCollapsed = false;
                foreach (var subNode in node.ChildNodes)
                {
                    CollapseExpand(subNode, level + 1, maxLevel);
                }
            }
        }
        public DataTemplate DirectorTemplate { get; set; }
        public DataTemplate OtherTemplate { get; set; }
    }
}

  12. ソリューションエクスプローラで、アプリケーション名を見つけます。名前を右クリックし、リストから［追加］→［新しい項目］を選択します。テンプレートウィンドウで［コードファイル］を選択し、コードファイル名を「Person。cs」または「Person。vb」と指定します。

  13. 次の名前空間を Person コードファイルに追加します。

    コードのコピー 
    Imports System
Imports System.Collections
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
    コードのコピー 
    using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;

  14. 名前空間の下に次のコードを挿入して、C1OrgChart のデータを作成するために呼び出される階層化データ項目を作成します。

    コードのコピー 
    '''作成される項目のテンプレートを選択するために使用されるクラス。
Public Class PersonTemplateSelector
    Inherits DataTemplateSelector
    Public Overrides Function SelectTemplate(item As Object, container As DependencyObject) As DataTemplate
        Dim p = TryCast(item, Data.Person)
        'var e = Application.Current.RootVisual as FrameworkElement;
        'return p.Position.IndexOf("Director") > -1
        '    ? e.Resources["_tplDirector"] as DataTemplate
        '    : e.Resources["_tplOther"] as DataTemplate;
        Return If(p.Position.IndexOf("Director") > -1, DirectorTemplate, OtherTemplate)
    End Function
    ' 組織図を指定されたレベルまで折りたたみます
    Private Sub CollapseExpand(node As C1.WPF.OrgChart.C1OrgChart, level As Integer, maxLevel As Integer)
        If level >= maxLevel Then
            node.IsCollapsed = True
        Else
            node.IsCollapsed = False
            For Each subNode In node.ChildNodes
                CollapseExpand(subNode, level + 1, maxLevel)
            Next
        End If
    End Sub
    Public Property DirectorTemplate() As DataTemplate
        Get
            Return m_DirectorTemplate
        End Get
        Set(value As DataTemplate)
            m_DirectorTemplate = Value
        End Set
    End Property
    Private m_DirectorTemplate As DataTemplate
    Public Property OtherTemplate() As DataTemplate
        Get
            Return m_OtherTemplate
        End Get
        Set(value As DataTemplate)
            m_OtherTemplate = Value
        End Set
    End Property
    Private m_OtherTemplate As DataTemplate
End Class
    コードのコピー 
    namespace Data
{
    /// <summary>
    /// 階層化データ項目：Person は型 Person の Subordinates を持つ。
    /// </summary>
    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 int TotalCount
        {
            get
            {
                var count = 1;
                foreach (var p in Subordinates)
                {
                    count += p.TotalCount;
                }
                return count;
            }
        }
        public override string ToString()
        {
            return string.Format("{0}:\r\n\t{1}", Name, Position);
        }
        #endregion
        #region ** Person factory
        static Random _rnd = new Random();
        static string[] _positions = "Director|Manager|Designer|Developer|Writer|Assistant".Split('
        static string[] _areas = "Development|Marketing|Sales|Support|Accounting".Split('
        static string[] _first = 

"John|Paul|Dan|Dave|Rich|Mark|Greg|Erin|Susan|Sarah|Tim|Trevor|Kevin|Mark|Dewey|Huey|Larry|Moe|Curly|Adam|Albert".Split('
        static string[] _last = 

"Smith|Doe|Williams|Sorensen|Hansen|Mandela|Johnson|Ward|Woodman|Jordan|Mays|Kevorkian|Trudeau|Hendrix|Clinton".Split('
        static string[] _verb = 

"likes|reads|studies|hates|exercises|dreams|plays|writes|argues|sleeps|ignores".Split('
        static string[] _adjective = 

"long|short|important|pompous|hard|complex|advanced|modern|boring|strange|curious|obsolete|bizarre".Split('
        static string[] _noun = 

"products|tasks|goals|campaigns|books|computers|people|meetings|food|jokes|accomplishments|screens|pages".Split('
        public static Person CreatePerson(int level)
        {
            var p = CreatePerson();
            if (level > 0)
            {
                level--;
                for (int i = 0; i < _rnd.Next(1, 4); i++)
                {
                    p.Subordinates.Add(CreatePerson(_rnd.Next(level / 2, level)));
                }
            }
            return p;
        }
        public static Person CreatePerson()
        {
            var p = new Person();
            p.Position = string.Format("{0} of {1}", GetItem(_positions), GetItem(_areas));
            p.Name = string.Format("{0} {1}", GetItem(_first), GetItem(_last));
            p.Notes = string.Format("{0} {1} {2} {3}", p.Name, GetItem(_verb), GetItem(_adjective), GetItem(_noun));
            while (_rnd.NextDouble() < .5)
            {
                p.Notes += string.Format(" and {0} {1} {2}", GetItem(_verb), GetItem(_adjective), GetItem(_noun));
            }
            p.Notes += ".";
            return p;
        }
        static string GetItem(string[] list)
        {
            return list[_rnd.Next(0, list.Length)];
        }
        #endregion
    }
}

  15. ［F5］キーを押してアプリケーションを実行します。C1OrgChart は次の図のようになります。

    メイン項目ノードの隅にあるチェックボックスをクリックします。C1OrgChart が折りたたまれることを確認します。

 

 

Copyright © GrapeCity, Inc. All rights reserved.