# Hierarchical Data Template | WPF Controls | DevExpress Documentation

This topic describes how to bind the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) to data using [System.Windows.HierarchicalDataTemplate](https://learn.microsoft.com/dotnet/api/system.windows.hierarchicaldatatemplate) objects.

The table below shows the required properties:

| Member | Description |
| --- | --- |
| [AccordionControl.ItemsSource](/WPF/DevExpress.Xpf.Accordion.AccordionControl.ItemsSource) | Specifies the path to a collection of accordion items. |
| [AccordionControl.ItemTemplate](/WPF/DevExpress.Xpf.Accordion.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](/WPF/DevExpress.Xpf.Accordion.AccordionControl.ItemsSource) property to bind the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) to data:

- XAML

<section id="tabpanel_+wbs608OQa_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl x:Name=&quot;accordion&quot; ItemsSource=&quot;{Binding MyData.Categories}&quot;/&gt;
</code></pre></section>

- C#
    - VB.NET

<section id="tabpanel_+wbs608OQa-1_tabid-csharp" role="tabpanel" data-tab="tabid-csharp">
<pre><code class="lang-csharp">public class ViewModel {
    public Data MyData { get; set; }
    public ViewModel() {
        MyData = new Data();
    }
}
public class Data {
    public ObservableCollection&lt;Category&gt; Categories { get; set; }
    public Data() {
        Categories = GetCategories();
    }
    private static ObservableCollection&lt;Category&gt; GetCategories() { 
        // ... 
    }
}
public class Category {
    public string CategoryName { get; set; }
    public string Description { get; set; }
    public ObservableCollection&lt;Item&gt; Items { get; set; }
}
public class Item {
    public string ItemName { get; set; }
    public string Description { get; set; }
}
</code></pre></section>
<section id="tabpanel_+wbs608OQa-1_tabid-vb" role="tabpanel" data-tab="tabid-vb" aria-hidden="true" hidden="hidden">
<pre><code class="lang-vb">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)
        &#39; ... 
    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
</code></pre></section>
2. Create a hierarchical data template and assign it to the [AccordionControl.ItemTemplate](/WPF/DevExpress.Xpf.Accordion.AccordionControl.ItemTemplate) property to display the required information in accordion item headers:

- XAML

<section id="tabpanel_+wbs608OQa-2_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl x:Name=&quot;accordion&quot; ItemsSource=&quot;{Binding MyData.Categories}&quot;&gt;
    &lt;dxa:AccordionControl.ItemTemplate&gt;
        &lt;HierarchicalDataTemplate DataType=&quot;{x:Type local:Category}&quot; ItemsSource=&quot;{Binding Items}&quot;&gt;
            &lt;TextBlock Text=&quot;{Binding CategoryName}&quot;/&gt;
            &lt;HierarchicalDataTemplate.ItemTemplate&gt;
                &lt;DataTemplate DataType=&quot;{x:Type local:Item}&quot;&gt;
                    &lt;TextBlock Text=&quot;{Binding ItemName}&quot;/&gt;
                &lt;/DataTemplate&gt;
            &lt;/HierarchicalDataTemplate.ItemTemplate&gt;
        &lt;/HierarchicalDataTemplate&gt;
    &lt;/dxa:AccordionControl.ItemTemplate&gt;
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

The image below shows the result:

![AccordionDataBindingChildrenSelector](/WPF/images/accordiondatabindingchildrenselector132244.png)

## Example

- [How to: Bind the AccordionControl to Data Using the HierarchicalData Template](/WPF/119899/controls-and-libraries/navigation-controls/accordion-control/examples/how-to-bind-the-accordioncontrol-to-data-using-the-hierarchicaldata-template)