Skip to main content
All docs
V25.1
  • DevExpress v25.1 Update — Your Feedback Matters

    Our What's New in v25.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

    Take the survey Not interested

    AccordionControl.HtmlTemplates Property

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

    Namespace: DevExpress.XtraBars.Navigation

    Assembly: DevExpress.XtraBars.v25.1.dll

    NuGet Package: DevExpress.Win.Navigation

    #Declaration

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

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

    Custom HTML Templates for the Accordion Control

    AccordionControl exposes a set of properties (accessible from the AccordionControl.HtmlTemplates object) to specify HTML-CSS templates to render the control’s elements:

    #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";
        }
    }
    
    See Also