Skip to main content

Hierarchical Data Template

  • 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:

    <dxa:AccordionControl x:Name="accordion" ItemsSource="{Binding MyData.Categories}"/>
    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; }
  2. Create a hierarchical data template and assign it to the AccordionControl.ItemTemplate property to display the required information in accordion item headers:

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

The image below shows the result: