Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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}">
        <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