AccordionControl.HtmlTemplates Property
Contains HTML-CSS templates used to render the control’s UI elements.
Namespace: DevExpress.XtraBars.Navigation
Assembly: DevExpress.XtraBars.v24.2.dll
NuGet Package: DevExpress.Win.Navigation
#Declaration
#Property Value
| Type | Description |
|---|---|
| Accordion |
An object that contains HTML-CSS templates used to render the control’s UI elements. |
#Remarks
#Use HTML-CSS Templates to Render UI Elements
AccordionControl allows you to use your knowledge of HTML and CSS markup to render the control’s UI elements. A template’s HTML markup specifies an element’s contents, while the template’s CSS code specifies style, display, and layout settings applied to the element.
AccordionControl exposes a set of properties (accessible from the AccordionControl.HtmlTemplates object) to specify HTML-CSS templates to render the control’s elements:
- AccordionControlHtmlTemplates.Item — Specifies the default HTML-CSS template used to render items.
- AccordionControlHtmlTemplates.ItemContent — Specifies the HTML-CSS template used to render an item’s client area.
- AccordionControlHtmlTemplates.Group — Specifies the default HTML-CSS template used to render a group’s header.
- AccordionControlHtmlTemplates.GroupContent — Specifies the HTML-CSS template used to render a group’s client area (the group’s background that hosts the group’s children).
- AccordionControlHtmlTemplates.FooterElement — Specifies the default HTML-CSS template used to render elements when they are displayed within the control’s footer.
- AccordionControlHtmlTemplates.FooterOverflowButton — Specifies the HTML-CSS template used to render the Overflow button in the control’s footer.
- AccordionControlHtmlTemplates.FooterPanel — Specifies the HTML-CSS template used to render the control’s footer.
- AccordionControlHtmlTemplates.HamburgerHeaderPanel — Specifies the HTML-CSS template used to render the control’s header panel when the Hamburger Menu view style is applied.
- AccordionControlHtmlTemplates.HamburgerMenuButton — Specifies the HTML-CSS template used to render the Menu button in the control’s header when the Hamburger Menu view style is applied.
- AccordionControlHtmlTemplates.MinimizedElement — Specifies the default HTML-CSS template used to render AccordionControl elements when the control is minimized.
- AccordionControlHtmlTemplates.MinimizedGroupPopup — Specifies the HTML-CSS template used to render a group’s popup window (which is displayed on a group click when the control is in the minimized state).
- AccordionControlHtmlTemplates.Separator — Specifies the HTML-CSS template used to render element separators.
#Display Element’s Text, Images, and Custom Data
When you specify templates for AccordionControl elements, you can use the data binding syntax (${PropertyName}) to display text, images, and custom values (AccordionControlElementBase.Tag) of these elements.
${Text} — Inserts an element’s text (AccordionControlElementBase.Text).
${Image} — Inserts an element’s image specified in the AccordionControlElementBase.ImageOptions object. Use the img tag to insert an image, for example, as follows: <img src="${Image}".
For example, the following HTML markup defines a div container that displays an element’s image followed by its text:
<div class="item">
<div class="item_layout">
<img class="item_image" src="${Image}">
<div class="item_text">${Text}</div>
</div>
</div>
You can also use the ${MyField1} syntax to mark an element as bound to a custom data source. The actual data for this element is set in the QueryHtmlElementData event handler.
<div class="acc_item">${MyField1}</div>
private void OnQueryHtmlElementData(object sender, QueryAccordionHtmlElementDataEventArgs e) {
if (e.FieldName == "MyField1") {
e.Value = "CustomData";
}
}