# Adding Accordion Items | WPF Controls | DevExpress Documentation

This topic describes how to add [accordion items](/WPF/118546/controls-and-libraries/navigation-controls/accordion-control/visual-elements/accordion-item) to the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl):

- Adding at Design Time
- Adding in Code

## Adding at Design Time

To add a **root item**:

- Invoke the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl)‘s [Quick Actions](/WPF/18095/whats-installed/smart-tags).
- Click **Add Item**.

![AccordionItemsAccordionSmartag](/WPF/images/accordionitemsaccordionsmartag132075.png)

To add **subitems** to an **accordion item**:

- Invoke the [AccordionItem](/WPF/DevExpress.Xpf.Accordion.AccordionItem)‘s Quick Actions.
- Click **Add SubItem**.

![AccordionItemsAccordionItemSmartag](/WPF/images/accordionitemsaccordionitemsmartag132076.png)

## Adding in Code

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

- XAML

<section id="tabpanel_zLGyZkZEff_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl&gt;
   &lt;dxa:AccordionItem Header=&quot;Root Item&quot; Glyph=&quot;{dx:DXImage Image=Image_32x32.png}&quot;&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Map_16x16.png}&quot;/&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Map_16x16.png}&quot; &gt;
         &lt;dxa:AccordionItem Header=&quot;SubItem&quot; /&gt;
      &lt;/dxa:AccordionItem&gt;
   &lt;/dxa:AccordionItem&gt;
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

The image below shows the result:

![AccordionItemsExample](/WPF/images/accordionitemsexample132077.png)

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

- [AccordionControl.Items](/WPF/DevExpress.Xpf.Accordion.AccordionControl.Items) for root items.
- [AccordionItem.Items](/WPF/DevExpress.Xpf.Accordion.AccordionItem.Items) for subitems.

You can specify the [AccordionControl.ItemsSource](/WPF/DevExpress.Xpf.Accordion.AccordionControl.ItemsSource) property to bind the **AccordionControl** to data. Refer to the [Data Binding](/WPF/118635/controls-and-libraries/navigation-controls/accordion-control/data-binding) topic to learn more.