Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Adding Accordion Items

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

#Adding at Design Time

To add a root item:

AccordionItemsAccordionSmartag

To add subitems to an accordion item:

AccordionItemsAccordionItemSmartag

#Adding in Code

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

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

AccordionItemsExample

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.