Item Header Customization

• Apr 01, 2021

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

This document consists of the following sections:

• Customize Header Text
• Customize Header Content

Customize Header Text

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

XAML

<dxa:AccordionControl>
   <dxa:AccordionItem Header="Root Item">
      <dxa:AccordionItem Header="SubItem"/>
      <dxa:AccordionItem Header="SubItem"/>
   </dxa:AccordionItem>
</dxa:AccordionControl>

The image below shows the result:

Customize Header Content

You can customize the header’s content. The following code sample demonstrates how to put a custom object in the AccordionItem.Header:

XAML

<dxa:AccordionControl>
   <dxa:AccordionItem Header="Root Item">
      <dxa:AccordionItem Header="SubItem"/>
      <dxa:AccordionItem>
         <dxa:AccordionItem.Header>
            <StackPanel Orientation="Horizontal">
               <Label Foreground="Red">SubItem</Label>
               <dxe:SpinEdit Margin="20, 0" Value="1" />
            </StackPanel>
         </dxa:AccordionItem.Header>
      </dxa:AccordionItem>
   </dxa:AccordionItem>
</dxa:AccordionControl>

The image below shows the result:

You can set the AccordionItem.ItemDisplayMode property to Header to replace the current accordion item with the object its AccordionItem.Header property specifies. In this mode, the glyph and expand-collapse button are disabled, and the item’s margins are ignored.