[Expand]General Information
[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]Property 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
     Hamburger Menu View Style
     Element Header Layout
     How To: Create AccordionControl in code
     How To: Replicate the appearance and behavior of the DevExpress Demo Center's Accordion Control
    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]Sunburst 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]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How To: Replicate the appearance and behavior of the DevExpress Demo Center's Accordion Control

This topic explains how to make the AccordionControl appear and behave like the Accordion Control in the DevExpress Demo Center (v18.2.5).

Expanded Fluent Design Form

The Fluent Design Form allows the Accordion to occupy the entire form's height and support the Acrylic Material and Reveal Highlight effects. Both features are supported if:

  • the application runs under Windows 10 Version 1803 (OS build 17134) or newer;
  • the application uses "The Bezier" or an "Office 2016" skin.

Expanded Static Groups

You cannot click groups in the DevExpress Demo Center, and groups do not show expand\collapse buttons. To implement this behavior in your Accordion, disable the following settings:

Expanded Separators

"The Bezier" skin automatically draws separators under root Accordion groups.

If you use any "Office 2016" skin, you need to handle the AccordionControl.CustomDrawElement event and paint these separators manually.

You can also add separators in the Accordion Control Designer’s "Elements" tab.

Expanded Search Panel

Set the AccordionControl.ShowFilterControl to Always to show the search panel.

Expanded Touch Scroll Bar

To enable a thin scroll bar that is visible only when a user hovers a mouse pointer over the Accordion, set the AccordionControl.ScrollBarMode setting to Touch.

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