Children Path

• Jun 07, 2019
• 2 minutes to read

This topic describes how to bind the AccordionControl to data if all objects in your data source are the same type.

The table below shows the required properties:

Member	Description
AccordionControl.ItemsSource	Specifies the path to a collection of accordion items.
AccordionControl.ChildrenPath	Specifies the path to the property that contains an accordion item’s children.
AccordionControl.DisplayMemberPath	Specifies the path to the property whose value the accordion item’s header displays.

Complete the following steps to configure the binding:

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

   XAML

   <dxa:AccordionControl Name="accordion" ItemsSource="{Binding AppMenu.MenuItems}"/>
   

   C#

   class ViewModel {
       public Menu AppMenu { get; set; }
       public ViewModel() {
           AppMenu = new Menu();
       }
   }
   public class Menu {
       public List<MenuItem> MenuItems { get; set; }
       public Menu() {
           MenuItems = GetMenuItems();
       }
       private static List<MenuItem> GetMenuItems() { 
           // ...
       }
   }
   public class MenuItem {
       public string Caption { get; set; }
       public List<MenuItem> SubItems { get; set; }
   }
   

   VB.NET

   Class ViewModel
       Public Property AppMenu() As Menu
       Public Sub New()
           AppMenu = New Menu()
       End Sub
   End Class
   Public Class Menu
       Public Property MenuItems() As List(Of MenuItem)
       Public Sub New()
           MenuItems = GetMenuItems()
       End Sub
       Private Shared Function GetMenuItems() As List(Of MenuItem)
           ' ...
       End Function
   End Class
   Public Class MenuItem
       Public Property Caption() As String
       Public Property SubItems() As List(Of MenuItem)
   End Class
   

2. Specify the AccordionControl.ChildrenPath property to build the accordion item hierarchy:

   XAML

   <dxa:AccordionControl Name="accordion" ItemsSource="{Binding AppMenu.MenuItems}" 
       ChildrenPath="SubItems"/>
   

3. Specify the AccordionControl.DisplayMemberPath property to display the required information in accordion item headers:

   XAML

   <dxa:AccordionControl Name="accordion" ItemsSource="{Binding AppMenu.MenuItems}" 
       ChildrenPath="SubItems" 
       DisplayMemberPath="Caption"/>
   

The image below shows the result:

Example

• How to: Bind the AccordionControl to Data Using the ChildrenPath Property