Hierarchical Data Template

• Aug 12, 2021
• 2 minutes to read

This topic describes how to bind the AccordionControl to data using System.Windows.HierarchicalDataTemplate objects.

The table below shows the required properties:

Member	Description
AccordionControl.ItemsSource	Specifies the path to a collection of accordion items.
AccordionControl.ItemTemplate	Specifies the template that defines the presentation of accordion items and the path to their children.

Complete the following steps to configure the binding:

1. Specify the AccordionControl.ItemsSource property to bind the AccordionControl to data:

   XAML

   <dxa:AccordionControl x:Name="accordion" ItemsSource="{Binding MyData.Categories}"/>
   

   C#

   public class ViewModel {
       public Data MyData { get; set; }
       public ViewModel() {
           MyData = new Data();
       }
   }
   public class Data {
       public ObservableCollection<Category> Categories { get; set; }
       public Data() {
           Categories = GetCategories();
       }
       private static ObservableCollection<Category> GetCategories() { 
           // ... 
       }
   }
   public class Category {
       public string CategoryName { get; set; }
       public string Description { get; set; }
       public ObservableCollection<Item> Items { get; set; }
   }
   public class Item {
       public string ItemName { get; set; }
       public string Description { get; set; }
   }
   

   VB.NET

   Public Class ViewModel
       Public Property MyData() As Data
       Public Sub New()
           MyData = New Data()
       End Sub
   End Class
   Public Class Data
       Public Property Categories() As ObservableCollection(Of Category)
       Public Sub New()
           Categories = GetCategories()            
       End Sub
       Private Shared Function GetCategories() As ObservableCollection(Of Category)
           ' ... 
       End Function 
   End Class
   Public Class Category
       Public Property CategoryName() As String
       Public Property Description() As String
       Public Property Items() As ObservableCollection(Of Item)
   End Class
   Public Class Item
       Public Property ItemName() As String
       Public Property Description() As String
   End Class
   

2. Create a hierarchical data template and assign it to the AccordionControl.ItemTemplate property to display the required information in accordion item headers:

   XAML

   <dxa:AccordionControl x:Name="accordion" ItemsSource="{Binding MyData.Categories}">
       <dxa:AccordionControl.ItemTemplate>
           <HierarchicalDataTemplate DataType="{x:Type local:Category}" ItemsSource="{Binding Items}">
               <TextBlock Text="{Binding CategoryName}"/>
               <HierarchicalDataTemplate.ItemTemplate>
                   <DataTemplate DataType="{x:Type local:Item}">
                       <TextBlock Text="{Binding ItemName}"/>
                   </DataTemplate>
               </HierarchicalDataTemplate.ItemTemplate>
           </HierarchicalDataTemplate>
       </dxa:AccordionControl.ItemTemplate>
   </dxa:AccordionControl>
   

The image below shows the result:

Example

• How to: Bind the AccordionControl to Data Using the HierarchicalData Template