ComponentOne WPF Edition
C1OrgChart Task-Based Help / Using a Hierarchical Data Template
Using a Hierarchical Data Template

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

  1. From the Visual Studio File menu select New and choose Project.
  2. In the New Project dialog box choose a language in the left-side menu, choose .NET 6.0 in the Framework drop-down list, and enter OrgChart as a name for the project.
  3. In the Solution Explorer, right-click the project name and choose Add Reference. In the Add Reference dialog box, locate and select the following assemblies and click OK to add references to your project:
    • C1.Silverlight
    • C1.Silverlight.OrgChart
  4. Add the xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" namespace to your namespace declarations in the <Window> tag. This is a more general namespace that will work with most of the WPF Edition controls.
  5. Add the following XAML markup below the namespace declarations to create the Data Templates:

    XAML
    Copy Code 
    <UserControl.Resources>
        <!-- template for Team objects -->
        <DataTemplate x:Key="TeamTemplate" >
            <Border Background="LightBlue" Padding="4" >
                <TextBlock FontStyle="Italic" Text="{Binding Path=Name}" />
            </Border>
        </DataTemplate>
        <!-- template for Division objects -->
        <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>
        <!-- template for League objects -->
        <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. Insert the XAML markup below to create your Grid layout, the C1OrgChart control, and the ScrollViewer control:

    XAML
    Copy Code 
    <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 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. Locate a general TreeView control in your ToolBox and add that to your application below the <ScrollViewer></ScrollViewer> tags. Insert the following into the <sdk:TreeView> tag: 

    Name="_tree" Grid.Row="2" ItemTemplate="{StaticResource LeagueTemplate}"
  8. Switch to your code view by right-clicking your application and selecting View Code from the list.
  9. 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 };
        }
    }
  10. Insert the following code to create the teams, Leagues, and Divisions that will appear in the C1OrgChart and in the TreeView 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;
  11. Add the code below to create the Public Class that will Get and Set the values for the Teams, Divisions, and Leagues:

    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; }
    }
}
  12. Run your application. Your application should resemble the following image:

     

    C1OrgChart for WPF