OrgChart for UWP
階層化データテンプレートの使用
タスク別ヘルプ > 階層化データテンプレートの使用
全て展開
すべて折りたたむ

このトピックでは、DataTemplateSelector および HierarchicalDataTemplate クラスを使用した高度な連結シナリオについて説明します。このトピックは、Windows ストアアプリケーションが作成されており、アプリケーションに適切な参照が追加されていることを前提とします。

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

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

    マークアップ
    コードのコピー 
    <Page.Resources>
<!-- Team オブジェクト用のテンプレート -->
<DataTemplate x:Key="TeamTemplate" >
<Border Background="LightBlue" Padding="4" >
    <TextBlock FontStyle="Italic" Text="{Binding Name}" />
</Border>
</DataTemplate>

<!-- Division オブジェクト用のテンプレート -->
<Xaml:C1HierarchicalDataTemplate  x:Key="DivisionTemplate" 
ItemTemplate="{StaticResource TeamTemplate}" ItemsSource="{Binding Teams}">
<DataTemplate>
    <Border Background="Gold" >
        <TextBlock Text="{Binding Name}" FontWeight="Bold" 
HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" />
    </Border>
</DataTemplate>
</Xaml:C1HierarchicalDataTemplate >
<!-- League オブジェクト用のテンプレート -->
<Xaml:C1HierarchicalDataTemplate  x:Key="LeagueTemplate"
ItemTemplate="{StaticResource DivisionTemplate}" 
ItemsSource="{Binding Divisions}">
<DataTemplate>
<Border Background="LightCoral" >
    <TextBlock Text="{Binding Name}" FontWeight="Bold" 
HorizontalAlignment="Center" VerticalAlignment="Center" Padding="40" />
</Border>
</DataTemplate>
</Xaml:C1HierarchicalDataTemplate >
</Page.Resources>
  2. 次の XAML マークアップを挿入して、グリッドレイアウト、C1OrgChart コントロール、および ScrollViewer コントロールを作成します。

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

    マークアップ
    コードのコピー 
    
 <Grid x:Name="LayoutRoot" Background="White">
     <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 x:Name="_tbTotal" VerticalAlignment="Bottom" />
     </StackPanel>

     <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto" Padding="0" >
     <OrgChart:C1OrgChart
     Name="_chart" ItemTemplate="{StaticResource
LeagueTemplate}"
     ConnectorDashArray="1 2"
ConnectorStroke="Gray"
     HorizontalAlignment="Center"
VerticalAlignment="Center" />
     </ScrollViewer>
     <Xaml:C1TreeView Name="_tree" Grid.Row="2" 
 ItemTemplate="{StaticResource LeagueTemplate}"/>
     </Grid>
  3. ツールボックスで C1TreeView コントロールを見つけ、アプリケーションの <ScrollViewer>  </ScrollViewer> タグの下に追加します。<Xaml:C1TreeView> タグに次のコードを挿入します。

    コードのコピー 
    Name="_tree" Grid.Row="2" ItemTemplate="{StaticResource LeagueTemplate}"
  4. アプリケーションを右クリックしてコードビューに切り替え、リストから［コードの表示］を選択します。
  5. 次の名前空間をページの先頭に追加します。

    Visual Basic コードの書き方

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

    C# コードの書き方

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

    Visual Basic コードの書き方

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

    C# コードの書き方

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

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

    C# コードの書き方

    C#
    コードのコピー 
    public class League
    {
        public string Name { get; set; }
        public List<Division> Divisions { get; set; }
        public static League GetLeague()
        {
            var league = new League();
            league.Name = "主要リーグ";
            league.Divisions = new List<Division>();
            foreach (var div in "北部,南部,東部,西部".Split(','))
            {
                var d = new Division();
                league.Divisions.Add(d);
                d.Name = div;
                d.Teams = new List<Team>();
                foreach (var team in "第1地区,第2地区,第3地区,第4地区".Split(','))
                {
                    var t = new Team();
                    d.Teams.Add(t);
                    t.Name = string.Format("{0} {1}", team, div);
                }
            }
            return league;
        }
    }
  8. 次のコードを追加して、チームと地区の値を取得または設定するパブリッククラスを作成します。

    Visual Basic コードの書き方

    Visual Basic
    コードのコピー 
    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 = "主要リーグ"
            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

    C# コードの書き方

    C#
    コードのコピー 
    public class Division
    {
        public string Name { get; set; }
        public List<Team> Teams { get; set; }
    }
    public class Team
    {
        public string Name { get; set; }
    }
}
  9. アプリケーションを実行します。アプリケーションは次の図のようになります。

 

 

Copyright © MESCIUS, Inc. All rights reserved.