# Collapse Mode | WPF Controls | DevExpress Documentation

You can collapse the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) to free up space. The collapsed **AccordionControl** displays its items in a popup window: 

![AccordionCollapseMode](/WPF/images/accordioncollapsemode132168.png)

## Expand-Collapse Button

End users can click the **expand-collapse button** to expand/collapse the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl).

![AccordionCollapseModeButton](/WPF/images/accordioncollapsemodebutton132170.png)

Set the [AccordionControl.IsCollapseButtonVisible](/WPF/DevExpress.Xpf.Accordion.AccordionControl.IsCollapseButtonVisible) property to **true** to show this button:

- XAML

<section id="tabpanel_36ddyX+0h+_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl IsCollapseButtonVisible=&quot;True&quot;&gt; ... &lt;/dxa:AccordionControl&gt;
</code></pre></section>

## Specify Mode in Code

You can use the [AccordionControl.IsExpanded](/WPF/DevExpress.Xpf.Accordion.AccordionControl.IsExpanded) property to expand/collapse the AccordionControl.

The code sample below shows the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl) in the collapse mode:

- XAML

<section id="tabpanel_36ddyX+0h+-1_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl IsExpanded=&quot;False&quot;&gt; ... &lt;/dxa:AccordionControl&gt;
</code></pre></section>

## Summary Item

The **Summary Item** is the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl)‘s element that allows users to invoke a popup window with all accordion items:

![AccordionCollapseModeSummaryItem](/WPF/images/accordioncollapsemodesummaryitem132169.png)

Use the following properties to customize the summary item:

| Property | Description |
| --- | --- |
| [AccordionControl.SummaryItemHeader](/WPF/DevExpress.Xpf.Accordion.AccordionControl.SummaryItemHeader) | Gets or sets the summary item’s header. |
| [AccordionControl.SummaryItemGlyph](/WPF/DevExpress.Xpf.Accordion.AccordionControl.SummaryItemGlyph) | Gets or sets the summary item’s glyph. |
| [AccordionControl.SummaryItemPosition](/WPF/DevExpress.Xpf.Accordion.AccordionControl.SummaryItemPosition) | Gets or sets the summary item’s position. |

The following image shows a custom summary item:

![AccordionCollapseModeSummaryItemElements](/WPF/images/accordioncollapsemodesummaryitemelements132172.png)

The following code sample demonstrates how to customize the summary item as shown in the image above:

- XAML

<section id="tabpanel_36ddyX+0h+-2_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl IsCollapseButtonVisible=&quot;True&quot; 
    SummaryItemHeader=&quot;Items&quot; 
    SummaryItemGlyph=&quot;{dx:DXImage Image=Technology_16x16.png}&quot;&gt;
    ...        
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

## Accordion Items

You can show accordion items in a collapsed [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl):

![AccordionCollapseModeItems](/WPF/images/accordioncollapsemodeitems132176.png)

Tip

End users can click the Summary Item to display all items in a popup window.

Set the [AccordionItem.ShowInCollapsedMode](/WPF/DevExpress.Xpf.Accordion.AccordionItem.ShowInCollapsedMode) property for the items you want to show:

- XAML

<section id="tabpanel_36ddyX+0h+-3_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl IsCollapseButtonVisible=&quot;True&quot;&gt;
   &lt;dxa:AccordionItem Header=&quot;Root Item&quot; Glyph=&quot;{dx:DXImage Image=Image_32x32.png}&quot; ShowInCollapsedMode=&quot;True&quot;&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Image_16x16.png}&quot;/&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Image_16x16.png}&quot;/&gt;
   &lt;/dxa:AccordionItem&gt;
   &lt;dxa:AccordionItem Header=&quot;Root Item&quot; Glyph=&quot;{dx:DXImage Image=Map_32x32.png}&quot;&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Map_16x16.png}&quot; ShowInCollapsedMode=&quot;True&quot;/&gt;
   &lt;/dxa:AccordionItem&gt;
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

You can use the [AccordionControl.CollapsedItemDisplayMode](/WPF/DevExpress.Xpf.Accordion.AccordionControl.CollapsedItemDisplayMode) property to customize the display mode of the items shown in the collapsed mode.

The following example demonstrates how to show the collapsed **AccordionControl** with accordion items’ glyphs:

![Accordion Collapse Mode Items Glyphs](/WPF/images/accordioncollapsemodeitemsglyphes132178.png)

- XAML

<section id="tabpanel_36ddyX+0h+-4_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl IsCollapseButtonVisible=&quot;True&quot; SummaryItemGlyph=&quot;{dx:DXImage Image=Technology_16x16.png}&quot;
      CollapsedItemDisplayMode=&quot;Glyph&quot;&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=Image_16x16.png}&quot; ShowInCollapsedMode=&quot;True&quot;/&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Image_16x16.png}&quot;/&gt;
   &lt;/dxa:AccordionItem&gt;
   &lt;dxa:AccordionItem Header=&quot;Root Item&quot; Glyph=&quot;{dx:DXImage Image=Map_32x32.png}&quot;&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot; Glyph=&quot;{dx:DXImage Image=Map_16x16.png}&quot; ShowInCollapsedMode=&quot;True&quot;/&gt;                
   &lt;/dxa:AccordionItem&gt;
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

## Show Popup on Hover

To display the popup on mouse hover, set the [AccordionControl.ShowPopupOnHover](/WPF/DevExpress.Xpf.Accordion.AccordionControl.ShowPopupOnHover) property to `true`.

The animation below demonstrates an **AccordionControl** that displays all items in a popup window when the mouse hovers over the *All Filters* item.

![](/WPF/images/accordion-showpopuponhover.gif) 

After an end user moves the mouse outside the popup window, the popup window is hidden with a delay. The [AccordionControl.PopupHideDelay](/WPF/DevExpress.Xpf.Accordion.AccordionControl.PopupHideDelay) property specifies the delay.

If an end user selects an accordion item within the popup window, the popup window remains open.