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

  • 2 minutes to read

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

Accordion 2018 - Demo Center

Parent 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.

If you want to use the RibbonForm instead, assign your Accordion to the RibbonForm.NavigationControl property and enable the form's EnableAcrylicAccent setting.

this.NavigationControl = accordionControl1;
this.EnableAcrylicAccent = true;

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:

Separators

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

Accordion 2018 - Demo Center Separators

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

private void AccordionControl1_CustomDrawElement(object sender, CustomDrawElementEventArgs e) {
    if (e.Element.Style == ElementStyle.Group) {
        e.DrawImage();
        e.DrawText();
        e.DrawContextButtons();
        e.Cache.DrawLine(e.Cache.GetPen(e.Appearance.ForeColor),
            new Point(e.ObjectInfo.HeaderBounds.Left, e.ObjectInfo.HeaderBounds.Bottom),
            new Point(e.ObjectInfo.HeaderBounds.Right, e.ObjectInfo.HeaderBounds.Bottom));
        e.Handled = true;
    }
}

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

Accordion 2018 - Add Elements

Search Panel

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

Accordion 2018 - Demo Center Search

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.