Adding Accordion Items

• Aug 15, 2021

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

• Adding at Design Time
• Adding in Code

Adding at Design Time

To add a root item :

• Invoke the AccordionControl‘s Quick Actions.
• Click Add Item.

To add subitems to an accordion item :

• Invoke the AccordionItem‘s Quick Actions.
• Click Add SubItem.

Adding in Code

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

• XAML

<dxa:AccordionControl>
   <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" />
      </dxa:AccordionItem>
   </dxa:AccordionItem>
</dxa:AccordionControl>

The image below shows the result:

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

• AccordionControl.Items for root items.
• AccordionItem.Items for subitems.

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