devexpress/agent-skills/devexpress-winforms-accordion

DevExpress WinForms Accordion Control

AccordionControl is a side-navigation control that renders a hierarchical, expandable menu of groups and items. It is the recommended navigation control for new WinForms applications — more flexible than NavBarControl, and capable of serving as a full Hamburger Menu when ViewType = HamburgerMenu.

Groups (ElementStyle.Group) are expandable containers. Items (ElementStyle.Item) are clickable leaves that can optionally embed arbitrary WinForms controls inside an expandable content container. The hierarchy is unlimited in depth.

The control lives in the DevExpress.XtraBars.Navigation namespace and ships with the DevExpress.Win.Navigation NuGet package.

When to Use This Skill

• Setting up a side navigation menu in a WinForms application
• Adding groups, items, and content containers to an AccordionControl
• Generating menu items programmatically from data (lists, database queries, configuration)
• Switching the control to Hamburger Menu style and configuring display modes
• Customizing item headers, icons, appearance, and HTML-CSS templates
• Enabling search / filter functionality in the navigation menu
• Choosing between AccordionControl, NavBarControl, and Hamburger Menu style
• Integrating with NavigationFrame, RibbonForm, or FluentDesignForm

Prerequisites & Installation

NuGet Package

DevExpress.Win.Navigation

Install-Package DevExpress.Win.Navigation

Required Namespace Imports

using DevExpress.XtraBars.Navigation;
using DevExpress.XtraEditors;        // XtraForm
using DevExpress.XtraBars.Ribbon;    // RibbonForm (optional)

Host Form

Always host AccordionControl on XtraForm (or RibbonForm / FluentDesignForm) — not on plain Form — to get correct skin-aware rendering.

Before You Start — Ask the Developer

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

1. Is the navigation structure fixed in code, or generated from data (list/database)?
2. Should the sidebar always be visible, or should it collapse to an icon strip (Hamburger Menu)?
3. Do items need embedded controls (DatePicker, ToggleSwitch, lists) inside them?
4. Does the app have a RibbonControl that should share a title bar with the accordion?
5. How deep is the hierarchy (2 levels → consider NavBarControl; 3+ → AccordionControl)?
6. Is there a search/filter requirement for the navigation items?

Documentation & Navigation Guide

Getting Started — Setup and Installation

Refer to references/getting-started.md (.NET 8+) or references/getting-started-dotnet-fw.md (.NET Framework 4.x) When you need to:

• Add AccordionControl to a project for the first time
• Choose the right host form type (XtraForm, RibbonForm, FluentDesignForm)
• Integrate with RibbonForm.NavigationControl

Data Binding and Populating Items

Refer to references/data-binding.md When you need to:

• Understand that AccordionControl has no DataSource — items are always added manually
• Generate items from a List<T>, database result, or configuration
• Use BeginUpdate() / EndUpdate() for bulk population
• Use Tag to attach data payloads to items
• Refresh items at runtime

When to Use AccordionControl vs NavBarControl vs Hamburger Menu

Refer to references/when-to-use.md When you need to:

• Choose between the three navigation controls
• Understand the feature differences (hierarchy depth, content containers, search, etc.)
• Migrate from NavBarControl to AccordionControl

View Modes

Refer to references/view-modes.md When you need to:

• Switch between Accordion (ViewType = Standard) and Hamburger Menu (ViewType = HamburgerMenu) styles
• Configure Hamburger Menu display modes: Inline, Overlay, Minimal
• Use Footer root-element mode (tab-like root items at the bottom)
• Control expand/collapse behavior, animation, and multi-expand settings

AccordionControlElement Settings and Customization

Refer to references/items-and-customization.md When you need to:

• Configure individual groups and items (text, icons, shortcuts, visibility)
• Embed custom controls inside an item via ContentContainer
• Rearrange header content blocks with HeaderTemplate
• Apply per-element appearance settings
• Use HTML-CSS templates for rich custom rendering
• Add context buttons or custom draw elements

Search and Filtering

Refer to references/search.md When you need to:

• Enable the built-in search panel (ShowFilterControl)
• Connect an external SearchControl to the accordion
• Implement custom filter logic with IFilterContent
• Configure filter delay
• Enable AI-powered Smart Search

Quick Start

Minimal side-navigation with two groups:

using DevExpress.XtraBars.Navigation;
using DevExpress.XtraEditors;
using System.Windows.Forms;
 
public partial class MainForm : XtraForm {
    public MainForm() {
        InitializeComponent();
        BuildNavigation();
    }
 
    void BuildNavigation() {
        var accordion = new AccordionControl {
            Dock = DockStyle.Left,
            Width = 220,
            ShowFilterControl = ShowFilterControl.Auto  // Ctrl+F to search
        };
        Controls.Add(accordion);
 
        accordion.BeginUpdate();
 
        var grpMain = new AccordionControlElement(ElementStyle.Group) {
            Text = "Main",
            Expanded = true
        };
        var itmDashboard = new AccordionControlElement(ElementStyle.Item) {
            Text = "Dashboard",
            Tag  = "dashboard"
        };
        var itmReports = new AccordionControlElement(ElementStyle.Item) {
            Text = "Reports",
            Tag  = "reports"
        };
        grpMain.Elements.AddRange(new[] { itmDashboard, itmReports });
 
        var grpSettings = new AccordionControlElement(ElementStyle.Group) {
            Text = "Settings"
        };
        var itmProfile = new AccordionControlElement(ElementStyle.Item) {
            Text = "Profile",
            Tag  = "profile"
        };
        grpSettings.Elements.Add(itmProfile);
 
        accordion.Elements.AddRange(new[] { grpMain, grpSettings });
        accordion.AllowItemSelection = true;
        accordion.EndUpdate();
 
        accordion.ElementClick += (s, e) => {
            if (e.Element.Style == ElementStyle.Item)
                // Navigate based on Tag
                NavigateTo(e.Element.Tag as string);
        };
    }
 
    void NavigateTo(string route) {
        // Update content area...
    }
}

Key API Surface

AccordionControl

AccordionControlElement

Common Patterns

Pattern 1: Side Navigation with NavigationFrame

var navFrame = new NavigationFrame { Dock = DockStyle.Fill };
var accordion = new AccordionControl { Dock = DockStyle.Left };
Controls.AddRange(new Control[] { navFrame, accordion });
accordion.SendToBack();
 
var page1 = new NavigationPage { Caption = "Dashboard" };
navFrame.Pages.Add(page1);
 
var item1 = new AccordionControlElement(ElementStyle.Item) {
    Text = "Dashboard",
    Tag  = page1
};
accordion.Elements.Add(item1);
 
accordion.ElementClick += (s, e) => {
    if (e.Element.Tag is NavigationPage page)
        navFrame.SelectedPage = page;
};

Authoring this in a `*.Designer.cs`: wrap both the AccordionControl and the NavigationFrame in BeginInit()/EndInit() (both implement ISupportInitialize). Do not wrap the NavigationPage objects — they are panels; a page is added with navFrame.Pages.Add(page) and set up with SuspendLayout()/ResumeLayout(). Casting a NavigationPage to ISupportInitialize compiles but throws InvalidCastException when InitializeComponent runs.

Pattern 2: Hamburger Menu (Overlay)

accordion.ViewType = AccordionControlViewType.HamburgerMenu;
accordion.OptionsHamburgerMenu.DisplayMode = AccordionControlDisplayMode.Overlay;

Pattern 3: Data-Driven Items

accordion.BeginUpdate();
accordion.Elements.Clear();
foreach (var section in GetSections()) {
    var grp = new AccordionControlElement(ElementStyle.Group) {
        Text = section.Name, Expanded = true
    };
    foreach (var item in section.Items) {
        grp.Elements.Add(new AccordionControlElement(ElementStyle.Item) {
            Text = item.Label, Tag = item.Id
        });
    }
    accordion.Elements.Add(grp);
}
accordion.EndUpdate();

Pattern 4: Item with Embedded Control

var container = new AccordionContentContainer();
container.Padding = new Padding(-1);   // skin-aware padding
container.Controls.Add(new ToggleSwitch {
    Dock = DockStyle.Fill,
    Properties = { OnText = "Enabled", OffText = "Disabled" }
});
accordion.Controls.Add(container);
mySettingsItem.ContentContainer = container;

Troubleshooting

Constraints & Rules

Follow these rules in every interaction: