Log In
[Expand]Welcome to DevExpress .NET Documentation
[Collapse]WinForms Controls
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Collapse]Accordion Control
     Element Header Layout
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]TileNav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]PDF Viewer
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Accordion Control


The AccordionControl extends the capabilities of the NavBarControl for creating navigation menus. The control's items can be combined into groups. Groups can contain nested groups, so you can create an advanced navigation hierarchy.

Features include:

Expanded Accordion Elements

All elements within the accordion control are AccordionControlElement class objects. You can add elements to the AccordionControl using the control's context menu and smart tags.

Additionally, the AccordionControl's Designer provides means to manipulate the control elements.

To access root elements in code, use the AccordionControl.Elements collection.

Depending on the AccordionControlElement.Style property value, an element is considered either a group or an item (see below). There are multiple settings common to both group and item elements.

However, certain element properties may be ignored depending on whether this element is a group or an item. For instance, groups can only display other groups and items, so the AccordionControlElementBase.ContentContainer property has no effect on groups. Vice versa, items can display custom content and cannot have child elements; thus, the AccordionControlElement.Elements collection is not in effect for items.

Expanded Groups

A group is an AccordionControlElement object of the Group style. It is an expandable element that can only display items and other groups. Thus, you can create a navigation hierarchy consisting of multiple levels using groups. The following image shows the Properties group. It has three immediate children.

Group elements can be accessed using the AccordionControlElement.Elements collection. For elements of the Item style, this property is ignored.

At design time, you can add elements to a group using its smart tag.

Unlike items, groups cannot be associated with content containers. Thus, the AccordionControlElementBase.ContentContainer property and the AccordionControl.GetContentContainer event are not in effect for groups.

Expanded Items

An item is an element whose AccordionControlElement.Style property is set to Item. These elements serve two purposes.

To add a content container to an item at design time, use the "Add ContentContainer" link in the item's smart tag.


An accordion content container's Padding property initially equals 0. Set it to -1 to force the container to use paddings according to the currently applied skin.

The added container can be vertically resized and customized at design time. You can drop custom controls onto the container.

By default, items are not drawn as selected when clicked. You can set the AccordionControl.AllowItemSelection property to true to change this behavior.

Expanded Search Panel

Accordion elements can be grouped into a complex multi-level hierarchy. Thus, to quickly find the required element, you can use the embedded search panel. A search panel is docked to the control's top and displays a filter control. The figure below illustrates the default filter control.

Text entered to this filter control is used to find elements of both group and item types. Found items are displayed together with their parent groups. Appropriate groups in turn are displayed with their child elements. The figure below illustrates an example.

When the AccordionControl.ShowFilterControl property is set to Always, a built-in filter control is always visible. If the property is set to Auto, an end-user can display the built-in filter control by pressing the CTRL+F shortcut. The filter control is closed on pressing ESC.

You can also replace the built-in filter control with your own custom one. To do so, you need to assign an object of a class that implements the DevExpress.XtraBars.Navigation.IFilterContent interface to the AccordionControl.FilterControl property. To provide filtering capabilities in an external filter control, use SearchControl.

Is this topic helpful?​​​​​​​