[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)

Element Header Layout

Accordion elements of both group and item styles can display four types of content within their headers:

Prior to version 16.1, this list also reflected the only available order for header content blocks. The figure below illustrates this default header layout: the topmost accordion element has a glyph, a text block, a ComboBoxEdit editor as a header control and two context buttons, 'Reset' and 'Lock'.

Starting with version 16.1, you can re-arrange these content blocks as you please. Each accordion element can have its own unique header layout, not shared with other elements. The following figure illustrates the same 'Color Balance' element with a modified header layout.

To customize the header layout for an accordion element, you need to modify its template. There are multiple ways to do this.

  1. The simplest way to modify an element header template at design time is to use the flyout panel that pops up when you select this element. The panel displays an icon for each possible content block and two buttons at both sides (see the figure below). Icons within this panel are arranged in the exact same order as the parent accordion element places its header content blocks.

    To re-arrange header content blocks, click a desired icon to select them, then press an arrow button to dock the related blocks to either the left or right side of the header.

  2. Another way to modify a header layout template at design time is using the collection editor. To invoke this dialog, locate the AccordionControlElement.HeaderTemplate property in the Visual Studio's property grid and click its ellipsis button. In this editor, you can click up and down arrows to re-arrange header content blocks.

    By utilizing this editor not only you can set the header blocks' order, but also modify the Alignment property value for each block. This property allows you to align content blocks to either the left or right side of a header without modifying their order. This setting gives a noticeable effect when an element header is wider than the total width of its content blocks and thus, a white space appears. By setting different alignment patterns, you move this gap accordingly. The figure below illustrates the accordion element with same header layout, but different alignment patterns.


    Once you have aligned a content block to the header's right side, all following blocks should be aligned to the right as well. Do not mix content blocks with left and right alignment settings. Otherwise, your header layout template will be violated and content blocks will appear in the wrong order.

  3. To customize the header layout in code, access the element's AccordionControlElement.HeaderTemplate collection and use its Set...Position methods. These methods place the desired content blocks to the specific position in the template collection and set alignment for these blocks. The code sample below illustrates an example.

The distance between all neighboring header content blocks is the same and managed by the AccordionControlElement.HeaderIndent property.

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