AccordionControl.HtmlTemplates Property

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

Namespace : DevExpress.XtraBars.Navigation

Assembly : DevExpress.XtraBars.v25.2.dll

NuGet Package : DevExpress.Win.Navigation

Declaration

C#
VB.NET

csharp

[DXCategory("Layout")]
public AccordionControlHtmlTemplates HtmlTemplates { get; }

<DXCategory("Layout")>
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.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: ` <div class="item_layout">

    <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.

HTML#

html

<div class="acc_item">${MyField1}</div>

C#
VB.NET

csharp

private void OnQueryHtmlElementData(object sender, QueryAccordionHtmlElementDataEventArgs e) {
    if (e.FieldName == "MyField1") {
        e.Value = "CustomData";
    }
}

Private Sub OnQueryHtmlElementData(ByVal sender As Object, ByVal e As QueryAccordionHtmlElementDataEventArgs)
    If e.FieldName = "MyField1" Then
        e.Value = "CustomData"
    End If
End Sub