OrgChart for WinRT
Using a Hierarchical Data Template
OrgChart for WinRT > OrgChart for WinRT Task- Based Help > Using a Hierarchical Data Template

This topic will demonstrate advanced binding scenarios using the DataTemplateSelector and HierarchicalDataTemplate classes.

This topic assumes that you have created a Windows Store application and added the appropriate references to it.

  1. Add the following XAML markup below the namespace declarations to create the Data Templates:
Markup
Copy Code 
<Page.Resources>
        <!-- template for Team objects -->
        <DataTemplate x:Key="TeamTemplate" >
            <Border Background="LightBlue" Padding="4" >
                <TextBlock FontStyle="Italic" Text="{Binding Name}" />
            </Border>
        </DataTemplate>
        <!-- template for Division objects -->
        <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 >
        <!-- template for League objects -->
        <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>

 

  1. Insert the XAML markup below to create your Grid layout, the C1OrgChart control, and the ScrollViewer control:
Markup
Copy Code 
<Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="118*" />
            <RowDefinition Height="158*" />
        </Grid.RowDefinitions>
        <!-- sample title -->
        <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>
  1. Locate a C1TreeView control in your ToolBox and add that to your application below the <ScrollViewer>  </ScrollViewer> tags. Insert the following into the <Xaml:C1TreeView> tag:
Markup
Copy Code 
Name="_tree" Grid.Row="2" ItemTemplate="{StaticResource LeagueTemplate}"
  1. Switch to your code view by right-clicking your application and selecting View Code from the list.
  2. Add the following namespace to the top of your page:
Visual Basic
Copy Code 
Imports C1.Xaml.OrgChart

C#
Copy Code 
using C1.Xaml.OrgChart;
  1. Add the following code directly below the InitializeComponent() method:
Visual Basic
Copy Code 
' create data object
        Dim league__1 = League.GetLeague()
 
        ' show it in C1OrgChart
        _chart.Header = league__1
        ' this has the same effect:
        '_chart.ItemsSource = new object[] { league };
 
        ' show it in TreeView
        _tree.ItemsSource = New Object() {league__1}

C#
Copy Code 
// create data object
            var league = League.GetLeague();
           
            // show it in C1OrgChart
            _chart.Header = league;
            // this has the same effect:
            //_chart.ItemsSource = new object[] { league };
            // show it in TreeView
            _tree.ItemsSource = new object[] { league };
  1. Insert the following code to create the teams, Leagues, and Divisions that will appear in the C1OrgChart and in the C1TreeView control:
Visual Basic
Copy Code 
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

C#
Copy Code 
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;
        }
    }
  1. Add the code below to create the Public Class that will Get and Set the values for the Teams and Divisions:
Visual Basic
Copy Code 
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

C#
Copy Code 
public class Division
    {
        public string Name { get; set; }
        public List<Team> Teams { get; set; }
    }
    public class Team
    {
        public string Name { get; set; }
    }
}
  1. Run your application. Your application should resemble the following image:

 

 

 

Copyright (c) GrapeCity, inc. All rights reserved.

Product Support Forum  |  Documentation Feedback