Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [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]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [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]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Accordion Control

Overview


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

The following features are included:

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 allows you 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). Multiple settings are common to both group and item elements.

Note, however, that 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. Items can display custom content and cannot have child elements, so 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, which has three immediate children.

You can access group elements can be accessed via the AccordionControlElement.Elements collection. This property is ignored for elements of the Item style.

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

Unlike items, groups cannot be associated with content containers, so 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 menu.

Tip

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

An 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. 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. Use the embedded search panel to quickly locate a required element. The search panel is docked to the control's top and displays a filter control.

Text entered into this filter control is used to find elements of both group and item types. Results for items are displayed with their parent groups. Group results, in turn, are displayed with their child elements.

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

You can also replace the built-in filter control with a custom one by assigning an object of your class that implements the DevExpress.XtraBars.Navigation.IFilterContent interface to the AccordionControl.FilterControl property.

Expanded Control Footer

By default, the Accordion control's root elements (groups and items) are displayed directly in the control's main area (see the 'Mail' and 'Calendar' root elements in the image below).

It is possible to move root elements to the control's footer, so that they act like tabs in a Tabbed UI. When you click a specific root item embedded in the footer, the control displays its child items in the main area. In the following figure, root items are displayed in the control's footer. The 'Mail' item is active.

To enable this item display style, use the AccordionControl.RootDisplayMode property.

Additional API

  • AccordionOptionsFooter.ActiveGroupDisplayMode - Gets or sets whether the accordion control's main menu displays the active group's content, but not the header, or both the content and the header.
  • AccordionControlElement.ControlFooterAlignment - Gets or sets whether the element is aligned at the near or far side of the control footer in the accordion control's expanded state.

  • OptionsMinimizing.FooterHeight - Gets or sets the control footer height in the accordion control's minimized state.
  • OptionsMinimizing.AllowFooterResizing - Gets or sets whether it is allowed to resize the control footer when the accordion control is minimized.

Expanded Office Navigation Bar

Use the OfficeNavigationBar.NavigationClient property to attach an Office Navigation Bar to an Accordion control. The navigation bar will display root elements of the attached Accordion control.

Expanded Hamburger Menu

The Accordion control supports the Hamburger Menu view style, which, compared to the default view (Accordion Control), provides a Hamburger button (which expands/collapses the menu), and three display modes (Inline, Overlay and Minimal).

  • Inline — The Hamburger Menu is displayed as a side bar when collapsed, and in-line with form content when expanded.

  • Overlay — The Hamburger Menu is displayed as a side bar when collapsed, and in an overlay above the content area when expanded.

  • Minimal — The Hamburger Menu is rendered as a small Hamburger button when collapsed (if DockStyle is set to Left, Right or None), or as a top-aligned bar containing the Hamburger button (if DockStyle is set to Top). When expanded, the menu is shown as an overlay above the content area.

To enable this view style, set the AccordionControl.ViewType property to HamburgerMenu. The AccordionOptionsHamburgerMenu.DisplayMode option specifies the menu's display mode.

Expanded Options

The following properties provide access to additional settings:

Expanded Interaction with Fluent Design Form

The FluentDesignForm is a Windows 10-inspired form that features:

  • Embedded Hamburger Menu (AccordionControl with the HamburgerMenu view type)
  • Adaptive Layout mode for the Hamburger Menu (automatically switches between Inline, Overlay and Minimal display modes when you resize the form)
  • Acrylic Material effect (a partially transparent texture)
  • Reveal Highlight visual effect
See Fluent Design Form to learn more.

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