Children Selector

• Jun 07, 2019
• 2 minutes to read

This topic describes how to bind the AccordionControl to data if your data source contains objects of different types.

The table below shows the required properties:

Member	Description
AccordionControl.ItemsSource	Specifies the path to a collection of accordion items.
AccordionControl.ChildrenSelector	Allows choosing the item’s children based on custom logic.

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 MyData.Categories}"/>
   

   C#

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

   VB.NET

   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 List(Of Category)
       Public Sub New()
           Categories = GetCategories()            
       End Sub
       Private Shared Function GetCategories() As List(Of Category)
           ' ... 
       End Function 
   End Class
   Public Class Category
       Public Property CategoryName() As String
       Public Property Description() As String
       Public Property Items() As List(Of Item)
   End Class
   Public Class Item
       Public Property ItemName() As String
       Public Property Description() As String
   End Class
   

2. Create a class that implements the IChildrenSelector interface and assign its instance to the AccordionControl.ChildrenSelector property:

   XAML

   <dxa:AccordionControl Name="accordion" ItemsSource="{Binding MyData.Categories}" 
           ChildrenSelector="{StaticResource mySelector}"/>
   

   C#

   public class MySelector : IChildrenSelector {
       public IEnumerable SelectChildren(object item) {
           if(item is Category) {
               return ((Category)item).Items;
           } else {
               return null;
           }
       }
   }
   

   VB.NET

   Public Class MySelector Implements IChildrenSelector
       Public Function SelectChildren(item As Object) As IEnumerable Implements IChildrenSelector.SelectChildren
           If TypeOf item Is Category Then
               Return DirectCast(item, Category).Items
           Else
               Return Nothing
           End If
       End Function
   End Class
   

3. Create a data template for each data source type to display the required information in accordion item headers:

   XAML

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

The image below shows the result:

Example

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