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

• Dec 28, 2020
• 2 minutes to read

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

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.

C#

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

VB.NET

Me.NavigationControl = accordionControl1
Me.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:

• AccordionControl.ShowGroupExpandButtons
• AccordionControl.ExpandGroupOnHeaderClick

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.

C#

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;
    }
}

VB.NET

Private Sub AccordionControl1_CustomDrawElement(ByVal sender As Object, ByVal e As CustomDrawElementEventArgs)
    If e.Element.Style = ElementStyle.Group Then
        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
    End If
End Sub

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

Search Panel

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

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.