Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 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

Item Glyph Customization

  • 2 minutes to read

This topic describes how to customize the accordion item’s glyph:

AccordionItemCustomizationGlyphOverview

This document consists of the following sections:

#Specify Glyph

Use the AccordionItem.Glyph property to specify the accordion item’s glyph. The following code sample demonstrates how to use this property:

<dxa:AccordionControl>
   <dxa:AccordionItem Header="Root Item" Glyph="{dx:DXImage Image=Image_32x32.png}">
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}"/>
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}"/>                    
   </dxa:AccordionItem>
</dxa:AccordionControl>

The image below shows the result:

AccordionItemCustomizationGlyph

#Specify Glyph Template

Specify the AccordionItem.GlyphTemplate property to customize the accordion item’s glyph. If you have more than one template that can be used to render the glyph, specify the AccordionItem.GlyphTemplateSelector property to implement custom logic for selecting the required template.

The following code sample demonstrates how to add a custom image to the root item:

<dxa:AccordionControl>
   <dxa:AccordionItem Header="Root Item" Glyph="{dx:DXImage Image=Walking_16x16.png}" GlyphPosition="Right">
      <dxa:AccordionItem.GlyphTemplate>
         <DataTemplate>
            <Border BorderThickness="1" BorderBrush="Black" Background="LightYellow">
               <Image Source="{Binding}" Margin="5"></Image>
            </Border>
         </DataTemplate>
      </dxa:AccordionItem.GlyphTemplate>
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}"/>
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}"/>
   </dxa:AccordionItem>
</dxa:AccordionControl>

The image below shows the result:

AccordionItemCustomizationGlyph

In the demonstrated code sample, the accordion item displays the glyph at the right side. Use the AccordionItem.GlyphPosition property to specify the glyph’s position. You can specify the glyph’s position for all items within the accordion control using the AccordionControl.ItemGlyphPosition property.

See Also