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 Header Customization

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

AccordionItemCustomizationHeaderOverview

This document consists of the following sections:

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

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

AccordionItemCustomizationHeaderSimple

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

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

AccordionItemCustomizationHeader

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.

See Also