OrgChart for UWP
C1OrgChart ノードの展開と折りたたみ
タスク別ヘルプ > C1OrgChart ノードの展開と折りたたみ
全て展開
すべて折りたたむ

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

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

    XAML でマークアップの書き方

    マークアップ
    コードのコピー 
    <!-- 組織図 -->
<ScrollViewer Grid.Row="2" HorizontalScrollBarVisibility="Auto" 
VerticalScrollBarVisibility="Auto">
<orgchart:C1OrgChart
x:Name="_orgChart"              
Grid.Row="1"
Orientation="Vertical"
HorizontalAlignment="Center" VerticalAlignment="Center"
ConnectorStroke="OrangeRed" ConnectorThickness="{Binding Path=Subordinates.Count}" 
Foreground="#FF39B925" Xaml:C1NagScreen.Nag="True" >

         <!-- スケール変換をスライダに連結する -->
        <orgchart:C1OrgChart.RenderTransform>
        <ScaleTransform
                ScaleX="{Binding Value, ElementName=_sliderZoom}"
                ScaleY="{Binding Value, ElementName=_sliderZoom}" />
        </orgchart:C1OrgChart.RenderTransform>

        <!-- ツリーノードの表示に使用されるテンプレート -->
        <orgchart:C1OrgChart.ItemTemplate>
        <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 を C1OrgChart の IsCollapsed プロパティに連結します -->
        <CheckBox Margin="4 0" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>

        <!-- 項目ヘッダー：人の名前 -->
        <TextBlock Text="{Binding Name}" FontWeight="Bold" FontSize="14" Foreground="WhiteSmoke" 
                                Padding="4 0 0 0" />
            </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>
</orgchart:C1OrgChart.ItemTemplate>
</orgchart:C1OrgChart>
</ScrollViewer>
  2. 次の XAML マークアップを <Grid> タグの下で <Scrollviewer> タグの前に追加します。これはいくつかの Grid 行定義、アプリケーションのタイトル、ボタンとスライダを含むコントロールパネルを追加します。このコントロールパネルを使用して、C1OrgChart のズーム、方向、データを制御できます。

    XAML でマークアップの書き方

    マークアップ
    コードのコピー 
    <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
 
        <!-- サンプルタイトル -->
        <StackPanel Orientation="Horizontal" >
            <TextBlock Text="C1OrgChart: Collapse/Expand Sample" FontSize="16" 
                VerticalAlignment="Bottom" Foreground="Black" />
            <TextBlock x:Name="_tbTotal" VerticalAlignment="Bottom" />
        </StackPanel>
 
        <!-- コントロールパネル -->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Grid.Row="1">
            <Button Content="データを更新" Padding="8 0" Click="Button_Refresh_Click" 
                Foreground="Black" BorderBrush="Black" />
            <TextBlock Text=" ズーム: " VerticalAlignment="Center" />
            <Slider x:Name="_sliderZoom" Minimum=".01" Maximum="1" Value="1" Width="100" 
                SmallChange="0.01" StepFrequency="0.01" Height="44" HorizontalAlignment="Left" 
                Foreground="#FFFF1B1B" Background="#29C91515" VerticalAlignment="Center" />
            <CheckBox Margin="20 0" Content="水平方向" Click="CheckBox_Click" 
                Background="#FF0Cffff" Foreground="Black" />
            <Button Content="3 レベルまで展開する" Padding="8 0" 
                Click="Button_Collapse_Click" Foreground="Black" BorderBrush="Black" />
        </StackPanel>
  3. ページを右クリックし、リストから［コードの表示］を選択します。次の名前空間をコードファイルにインポートします。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Imports C1.Xaml.OrgChart

    C# コードの書き方

    C#
    コードのコピー 
    using C1.Xaml.OrgChart
  4. InitializeComponent() メソッドのすぐ下に、次のコードを挿入します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    CreateData()

    C# コードの書き方

    C#
    コードのコピー 
    CreateData();
  5. 次のように、ボタンクリックイベントとチェックボックスクリックイベントを処理し、C1OrgChart の切り替えを処理するコードを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Private Sub CheckBox_Click(sender As Object, e As RoutedEventArgs)
        _orgChart.Orientation = If(DirectCast(sender, CheckBox).IsChecked.Value, 
                        Orientation.Horizontal, Orientation.Vertical)
    End Sub
    ' 新しいランダムデータを使用して組織図を再構築します
    Private Sub Button_Refresh_Click(sender As Object, e As RoutedEventArgs)
        CreateData()
    End Sub
    ' 組織図をレベル３まで折りたたみます
    Private Sub Button_Collapse_Click(sender As Object, e As RoutedEventArgs)
        ToggleCollapseExpand(_orgChart, 0, 3)
    End Sub
    ' 組織図を指定されたレベルまで折りたたみます
    Private Sub ToggleCollapseExpand(node As C1OrgChart, level As Integer, 
        maxLevel As Integer)
        If level >= maxLevel Then
            node.IsCollapsed = True
        Else
            node.IsCollapsed = False
            For Each subNode In node.ChildNodes
                ToggleCollapseExpand(subNode, level + 1, maxLevel)
            Next
        End If
    End Sub

    C# コードの書き方

    C#
    コードのコピー 
    void CheckBox_Click(object sender, RoutedEventArgs e)
        {
            _orgChart.Orientation = ((CheckBox)sender).IsChecked.Value
                ? Orientation.Horizontal
                : Orientation.Vertical;
        }
        // 新しいランダムデータを使用して組織図を再構築します
        void Button_Refresh_Click(object sender, RoutedEventArgs e)
        {
            CreateData();
        }
        // 組織図をレベル３まで折りたたみます
        void Button_Collapse_Click(object sender, RoutedEventArgs e)
        {
            ToggleCollapseExpand(_orgChart, 0, 3);
        }
        // 組織図を指定されたレベルまで折りたたみます
        void ToggleCollapseExpand(C1OrgChart node, int level, int maxLevel)
        {
            if (level >= maxLevel)
            {
                node.IsCollapsed = true;
            }
            else
            {
                node.IsCollapsed = false;
                foreach (var subNode in node.ChildNodes)
                {
                    ToggleCollapseExpand(subNode, level + 1, maxLevel);
                }
            }
       }
  6. 次のように、新しいランダムデータを作成し、C1OrgChart を展開/折りたたむためのチェックボックスイベントを処理するコードを追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
        ' ランダムデータを作成し、それを組織図に割り当てます
    Private Sub CreateData()
        Dim p = Person.CreatePerson(15)
        _tbTotal.Text = String.Format(" ({0} items total)", p.TotalCount)
        _orgChart.Header = p
    End Sub
    ' OrgChart サンプルに展開/折りたたみのサポートを追加します
    Private Sub CheckBox_Unchecked(sender As Object, e As RoutedEventArgs)
        CheckedChanged(sender)
    End Sub
    Private Sub CheckBox_Checked(sender As Object, e As RoutedEventArgs)
        CheckedChanged(sender)
    End Sub
    Private Sub CheckedChanged(sender As Object)
Dim checkBox As CheckBox = TryCast(sender, CheckBox)
Dim parent As FrameworkElement = TryCast(VisualTreeHelper.GetParent(checkBox), 
        FrameworkElement)
While parent IsNot Nothing AndAlso Not (TypeOf parent Is C1OrgChart)
    parent = TryCast(VisualTreeHelper.GetParent(parent), FrameworkElement)
End While
If parent IsNot Nothing Then
    Dim orgChart As C1OrgChart = TryCast(parent, C1OrgChart)
    If checkBox.IsChecked IsNot Nothing Then
        orgChart.IsCollapsed = checkBox.IsChecked.Value
            End If
        End If
    End Sub

    C# コードの書き方

    C#
    コードのコピー 
    // ランダムデータを作成し、それを組織図に割り当てます
        void CreateData()
        {
            var p = Person.CreatePerson(15);
            _tbTotal.Text = string.Format(" ({0} items total)", p.TotalCount);
            _orgChart.Header = p;
        }
        // OrgChart サンプルに展開/折りたたみのサポートを追加します
        private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
        {
           CheckedChanged(sender);
        }
private void CheckBox_Checked(object sender, RoutedEventArgs e)
        {
            CheckedChanged(sender);
        }
        private void CheckedChanged(object sender)
        {
            CheckBox checkBox = sender as CheckBox;
            FrameworkElement parent = VisualTreeHelper.GetParent(checkBox) 
                    as FrameworkElement;
            while (parent != null && !(parent is C1OrgChart))
            {
                parent = VisualTreeHelper.GetParent(parent) as FrameworkElement;
            }
            if (parent != null)
            {
                C1OrgChart orgChart = parent as C1OrgChart;
                if (checkBox.IsChecked != null)
                {
                    orgChart.IsCollapsed = checkBox.IsChecked.Value;
                }
            }
        }
    }
}
  7. ソリューションエクスプローラで、アプリケーション名を見つけます。名前を右クリックし、リストから［追加］→［新しい項目］を選択します。テンプレートウィンドウで［コードファイル］を選択し、コードファイル名を "Person.cs" または "Person.vb" と指定します。
  8. 次の名前空間を Person コードファイルに追加します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Imports System
Imports System.Collections
Imports System.Collections.Generic
Imports System.Collections.ObjectModel

    C# コードの書き方

    C#
    コードのコピー 
    using System;
using System.Collections;
using System.Collections.Generic;
using System.Collections.ObjectModel;
  9. 名前空間の下に次のコードを挿入して、C1OrgChart のデータを作成するために呼び出される階層化データ項目を作成します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    Namespace Data
    ''' <summary>
    ''' 階層化データ項目：Person は型 Person の Subordinates を持つ。
    ''' </summary>
    PublicClassPerson
        Private _list AsNewObservableCollection(OfPerson)()
#Region"** object model"
        PublicProperty Name() AsString
            Get
                Return m_Name
            EndGet
            Set(value AsString)
                m_Name = Value
            EndSet
        EndProperty
        Private m_Name AsString
        PublicProperty Position() AsString
            Get
                Return m_Position
            EndGet
            Set(value AsString)
                m_Position = Value
            EndSet
        EndProperty
        Private m_Position AsString
        PublicProperty Notes() AsString
            Get
                Return m_Notes
            EndGet
            Set(value AsString)
                m_Notes = Value
            EndSet
        EndProperty
        Private m_Notes AsString
        PublicReadOnlyProperty Subordinates() AsIList(OfPerson)
            Get
                Return _list
            EndGet
        EndProperty
        PublicReadOnlyProperty TotalCount() AsInteger
            Get
                Dim count = 1
                ForEach p In Subordinates
                    count += p.TotalCount
                Next
                Return count
            EndGet
        EndProperty
        PublicOverridesFunction ToString() AsString
            ReturnString.Format("{0}:" & vbCr & vbLf & vbTab & "{1}", Name, Position)
        EndFunction
#EndRegion
#Region"** Person factory"
Shared _rnd AsNewRandom()
Shared _positions AsString() = "アシスタント|部長|ツールデザイナー|設計エンジニア|
        副部長|スペシャリスト".Split("|"c)
Shared _areas AsString() = "開発部|ツール設計部|営業部|マーケティング部|人事部|
        経理部|総務部".Split("|"c)
Shared _first AsString() = "浩|誠|健一|大輔|達也|翔太|浩一|哲也|剛|大介|
        健太|拓也|豊|修|和彦|学|直樹|健太郎|浩二|徹|隆|亮|翔|恵子|久美子|由美子|
        明美|直美|陽子|智子|絵美|恵|裕子|愛|真由美|由美|麻衣|美穂|愛美|彩".Split("|"c)
Shared _last AsString() = "佐藤|鈴木|高橋|田中|伊藤|山本|渡辺|中村|小林|
        加藤|吉田|山田|佐々木|山口|松本|井上|木村|斎藤|林|清水|山崎|阿部|森|池田|
        橋本|山下|石川|中島|前田|藤田".Split("|"c)
Shared _verb AsString() = "likes|reads|studies|hates|exercises|dreams|
        plays|writes|argues|sleeps|ignores".Split("|"c)
Shared _adjective AsString() = "long|short|important|pompous|hard|complex|
        advanced|modern|boring|strange|curious|obsolete|bizarre".Split("|"c)
Shared _noun AsString() = "products|tasks|goals|campaigns|books|computers|
        people|meetings|food|jokes|accomplishments|screens|pages".Split("|"c)
PublicSharedFunction CreatePerson(level AsInteger) AsPerson
    Dim p = CreatePerson()
    If level > 0 Then
        level -= 1
        For i AsInteger = 0 To _rnd.[Next](1, 4) - 1
            p.Subordinates.Add(CreatePerson(_rnd.[Next](level \ 2, level)))
        Next
    EndIf
    Return p
EndFunction
PublicSharedFunction CreatePerson() AsPerson
    Dim p = NewPerson()
    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() < 0.5
        p.Notes += String.Format(" and {0} {1} {2}", GetItem(_verb), 
        GetItem(_adjective), GetItem(_noun))
    EndWhile
    p.Notes += "."
    Return p
EndFunction
PrivateSharedFunction GetItem(list AsString()) AsString
    Return list(_rnd.[Next](0, list.Length))
EndFunction
#EndRegion
    EndClass
EndNamespace

    C# コードの書き方

    C#
    コードのコピー 
    namespace CollapseExpand
{
    /// <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 = "アシスタント|部長|ツールデザイナー|設計
        エンジニア|副部長|スペシャリスト".Split('
static string[] _areas = "開発部|ツール設計部|営業部|マーケティング部|
        人事部|経理部|総務部".Split('
static string[] _first = "浩|誠|健一|大輔|達也|翔太|浩一|哲也|剛|
        大介|健太|拓也|豊|修|和彦|学|直樹|健太郎|浩二|徹|隆|亮|翔|恵子|
        久美子|由美子|明美|直美|陽子|智子|絵美|恵|裕子|愛|真由美|由美|麻衣|
        美穂|愛美|彩".Split('
static string[] _last = "佐藤|鈴木|高橋|田中|伊藤|山本|渡辺|中村|
        小林|加藤|吉田|山田|佐々木|山口|松本|井上|木村|斎藤|林|清水|山崎|
        阿部|森|池田|橋本|山下|石川|中島|前田|藤田".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
    }
}
  10. ［F5］キーを押してアプリケーションを実行します。C1OrgChart は次の図のようになります。

    メイン項目ノードの隅にあるチェックボックスをクリックします。C1OrgChart が折りたたまれることを確認します。
関連トピック
階層化データテンプレートの使用

 

 

Copyright © MESCIUS, Inc. All rights reserved.