AccordionControlHtmlTemplates.Item Property
Specifies the default HTML-CSS template used to render items.
Namespace: DevExpress.XtraBars.Navigation
Assembly: DevExpress.XtraBars.v22.1.dll
NuGet Package: DevExpress.Win.Navigation
Declaration
Property Value
Type | Description |
---|---|
HtmlTemplate | The default HTML-CSS template used to render items. |
Remarks
AccordionControl can render its UI elements from HTML-CSS templates. Use the Item property to specify the default template for AccordionControl items (elements that have the AccordionControlElement.Style property set to Item).
You can also specify different templates for different elements (items and groups). For this purpose, use the AccordionControl.HtmlTemplates.Templates collection to create templates beforehand. Then, handle the AccordionControl.QueryItemTemplate event to supply templates to elements dynamically.
Display an 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:
<div class="item">
<div class="item_layout">
<img class="item_image" src="${Image}">
<div class="item_text">${Text}</div>
</div>
</div>