Item Glyph Customization

• Jun 07, 2019
• 2 minutes to read

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

This document consists of the following sections:

• Specify Glyph
• Specify Glyph Template

Specify Glyph

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

XAML

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

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:

XAML

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

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.