Using a Hierarchical Data Template
In This Topic
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.
- 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>
|
- 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>
|
- 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}"
|
- Switch to your code view by right-clicking your application and selecting View Code from the list.
- 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;
|
- 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 };
|
- 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;
}
}
|
- 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; }
}
}
|
- Run your application. Your application should resemble the following image:
