Skip to main content

Adding Accordion Items

This topic describes how to add accordion items to the AccordionControl:

Adding at Design Time

To add a root item:


To add subitems to an accordion item:


Adding in Code

The code sample below demonstrates how to add accordion items in markup:

   <dxa:AccordionItem Header="Root Item" Glyph="{dx:DXImage Image=Image_32x32.png}">
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}"/>
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}" >
         <dxa:AccordionItem Header="SubItem" />

The image below shows the result:


Use the following properties to add, remove, or access individual accordion items in code-behind:

You can specify the AccordionControl.ItemsSource property to bind the AccordionControl to data. Refer to the Data Binding topic to learn more.