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.