Children Selector

  • 2 min 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:

    <dxa:AccordionControl 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 class that implements the IChildrenSelector interface and assign its instance to the AccordionControl.ChildrenSelector property:

    <dxa:AccordionControl Name="accordion" ItemsSource="{Binding MyData.Categories}" 
            ChildrenSelector="{StaticResource mySelector}"/>
    
    public class MySelector : IChildrenSelector {
        public IEnumerable SelectChildren(object item) {
            if(item is Category) {
                return ((Category)item).Items;
            } else {
                return null;
            }
        }
    }
    
  3. Create a data template for each data source type to display the required information in accordion item headers:

    <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:

AccordionDataBindingChildrenSelector

Example