AccordionControl.HtmlTemplates Property

Contains HTML-CSS templates used to render the control’s UI elements.

Namespace: DevExpress.XtraBars.Navigation

Assembly: DevExpress.XtraBars.v22.1.dll

NuGet Package: DevExpress.Win.Navigation

Declaration

C#

[Browsable(false)]
[DXCategory("Layout")]
[EditorBrowsable(EditorBrowsableState.Never)]
public AccordionControlHtmlTemplates HtmlTemplates { get; }

VB.NET

<DXCategory("Layout")>
<EditorBrowsable(EditorBrowsableState.Never)>
<Browsable(False)>
Public ReadOnly Property HtmlTemplates As AccordionControlHtmlTemplates

Property Value

Type	Description
AccordionControlHtmlTemplates	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.GroupHeader — 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}".

${Tag} — Inserts a string representation of the object stored in the AccordionControlElementBase.Tag property.

${MyField1} — Inserts a ‘MyField1’ property value of a custom object stored in an element’s AccordionControlElementBase.Tag property.

For example, the following HTML markup defines a div container that displays an element’s image followed by its text:

HTML#

<div class="item">
    <div class="item_layout">
        <img class="item_image" src="${Image}">
        <div class="item_text">${Text}</div>
    </div>
</div>