Element Header Layout

• Oct 29, 2020
• 3 minutes to read

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

• icon (the AccordionControlElementBase.Image property);
• caption (the AccordionControlElementBase.Text property);
• custom header control (the AccordionControlElementBase.HeaderControl property);
• a set of context buttons (the AccordionControlElementBase.ContextButtons property).

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.

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.

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.