OrgChart for WPF/Silverlight
階層化データテンプレートの使用
タスク別ヘルプ > 階層化データテンプレートの使用

このトピックでは、DataTemplateSelector および HierarchicalDataTemplate クラスを使用した高度な連結シナリオについて説明します。

  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> タグの名前空間宣言に追加します。これは、ほとんどの ComponentOne WPF コントロールで機能する一般的な名前空間です。

  5. 次の XAML マークアップを名前空間宣言の下に追加して、データテンプレートを作成します。

    XAML
    コードのコピー 
    <UserControl.Resources>
        <!-- Team オブジェクト用のテンプレート -->
        <DataTemplate x:Key="TeamTemplate" >
            <Border Background="LightBlue" Padding="4" >
                <TextBlock FontStyle="Italic" Text="{Binding Path=Name}" />
            </Border>
        </DataTemplate>
        <!-- Division オブジェクト用のテンプレート -->
        <sdk:HierarchicalDataTemplate x:Key="DivisionTemplate" 
            ItemsSource="{Binding Path=Teams}" 
            ItemTemplate="{StaticResource TeamTemplate}">
            <Border Background="Gold" >
                <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" HorizontalAlignment="Center" 

                 VerticalAlignment="Center" Padding="20" />
            </Border>
        </sdk:HierarchicalDataTemplate>
        <!-- League オブジェクト用のテンプレート -->
        <sdk:HierarchicalDataTemplate x:Key="LeagueTemplate" 
            ItemsSource="{Binding Path=Divisions}" 
            ItemTemplate="{StaticResource DivisionTemplate}">
            <Border Background="LightCoral" >
                <TextBlock Text="{Binding Path=Name}" FontWeight="Bold" HorizontalAlignment="Center" 

                 VerticalAlignment="Center" Padding="40" />
            </Border>
        </sdk:HierarchicalDataTemplate>
</UserControl.Resources>

  6. 次の XAML マークアップを挿入して、グリッドレイアウト、C1OrgChart コントロール、および ScrollViewer コントロールを作成します。

    XAML
    コードのコピー 
    <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="118*" />
            <RowDefinition Height="158*" />
        </Grid.RowDefinitions>
        <!--サンプルタイトル -->
        <StackPanel Orientation="Horizontal" >
            <TextBlock Text="C1OrgChart: HierarchicalDataTemplate" FontSize="16" VerticalAlignment="Bottom" />
            <TextBlock Name="_tbTotal" VerticalAlignment="Bottom" />
        </StackPanel>
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Padding="0" >
            <c1:C1OrgChart
                Name="_chart" ItemTemplate="{StaticResource LeagueTemplate}" 
                ConnectorDashArray="1 2" ConnectorStroke="Gray" 
                HorizontalAlignment="Center" VerticalAlignment="Center" />
        </ScrollViewer>

  7. ツールボックスで通常の TreeView コントロールを見つけ、アプリケーションの <ScrollViewer> </ScrollViewer> タグの下に追加します。<sdk:TreeView> タグに次のコードを挿入します。

    Name="_tree" Grid.Row="2" ItemTemplate="{StaticResource LeagueTemplate}"

  8. アプリケーションを右クリックしてコードビューに切り替え、リストから［コードの表示］を選択します。

  9. InitializeComponent() メソッドのすぐ下に、次のコードを追加します。

    コードのコピー 
    'データオブジェクトを作成します
        Dim league__1 = League.GetLeague()
        'それを C1OrgChartで表示します
        _chart.Header = league__1
        '次のコードでも同じです
        '_chart.ItemsSource = new object[] { league };
        'それを TreeViewで表示します
        _tree.ItemsSource = New Object() {league__1}
    コードのコピー 
    //データオブジェクトを作成します
            var league = League.GetLeague();
            //それを C1OrgChartで表示します
            _chart.Header = league;
            //次のコードでも同じです
            //_chart.ItemsSource = new object[] { league };
            //それを TreeViewで表示します
            _tree.ItemsSource = new object[] { league };
        }
    }

  10. 次のコードを挿入して、C1OrgChart と TreeView コントロールに表示されるチーム、リーグ、地区を作成します。

    コードのコピー 
    Public Class League
        Public Property Name() As String
            Get
                Return m_Name
            End Get
            Set(value As String)
                m_Name = Value
            End Set
        End Property
        Private m_Name As String
        Public Property Divisions() As List(Of Division)
            Get
                Return m_Divisions
            End Get
            Set(value As List(Of Division))
                m_Divisions = Value
            End Set
        End Property
        Private m_Divisions As List(Of Division)
        Public Shared Function GetLeague() As League
            Dim league = New League()
            league.Name = "Main League"
            league.Divisions = New List(Of Division)()
            For Each div In "North,South,East,West".Split(","c)
                Dim d = New Division()
                league.Divisions.Add(d)
                d.Name = div
                d.Teams = New List(Of Team)()
                For Each team In "t1,t2,t3,t4".Split(","c)
                    Dim t = New Team()
                    d.Teams.Add(t)
                    t.Name = String.Format("{0} {1}", team, div)
                Next
            Next
            Return league
        End Function
    End Class
    コードのコピー 
    public class League
    {
        public string Name { get; set; }
        public List<Division> Divisions { get; set; }
        public static League GetLeague()
        {
            var league = new League();
            league.Name = "Main League";
            league.Divisions = new List<Division>();
            foreach (var div in "North,South,East,West".Split(','))
            {
                var d = new Division();
                league.Divisions.Add(d);
                d.Name = div;
                d.Teams = new List<Team>();
                foreach (var team in "t1,t2,t3,t4".Split(','))
                {
                    var t = new Team();
                    d.Teams.Add(t);
                    t.Name = string.Format("{0} {1}", team, div);
                }
            }
            return league;

  11. 次のコードを追加して、チーム、地区、およびリーグの値を取得または設定するパブリッククラスを作成します。

    コードのコピー 
    Public Class Division
        Public Property Name() As String
            Get
                Return m_Name
            End Get
            Set(value As String)
                m_Name = Value
            End Set
        End Property
        Private m_Name As String
        Public Property Teams() As List(Of Team)
            Get
                Return m_Teams
            End Get
            Set(value As List(Of Team))
                m_Teams = Value
            End Set
        End Property
        Private m_Teams As List(Of Team)
    End Class
    Public Class Team
        Public Property Name() As String
            Get
                Return m_Name
            End Get
            Set(value As String)
                m_Name = Value
            End Set
        End Property
        Private m_Name As String
    End Class
    コードのコピー 
    public class Division
    {
        public string Name { get; set; }
        public List <Team> Teams { get; set; }
    }
    public class Team
    {
        public string Name { get; set; }
    }
}

  12. アプリケーションを実行します。アプリケーションは次の図のようになります。

 

 

Copyright © GrapeCity, Inc. All rights reserved.