Element Header Layout
- 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.
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.
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.
Important
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.
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.
accordionControlElement1.HeaderTemplate.SetHeaderControlPosition(0, DevExpress.XtraBars.Navigation.HeaderElementAlignment.Left); accordionControlElement1.HeaderTemplate.SetContextButtonsPosition(1, DevExpress.XtraBars.Navigation.HeaderElementAlignment.Right); accordionControlElement1.HeaderTemplate.SetTextPosition(2, DevExpress.XtraBars.Navigation.HeaderElementAlignment.Right); accordionControlElement1.HeaderTemplate.SetImagePosition(3, DevExpress.XtraBars.Navigation.HeaderElementAlignment.Right);
The distance between all neighboring header content blocks is the same and managed by the AccordionControlElement.HeaderIndent property.