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 List<Category> Categories { get; set; }
        public Data() {
            Categories = GetCategories();
        }
        private static List<Category> GetCategories() { 
            // ... 
        }
    }
    public class Category {
        public string CategoryName { get; set; }
        public string Description { get; set; }
        public List<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}">
        <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:

AccordionDataBindingChildrenSelector

Example