# Item Header Customization | WPF Controls | DevExpress Documentation

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

![AccordionItemCustomizationHeaderOverview](/WPF/images/accordionitemcustomizationheaderoverview132097.png)

This document consists of the following sections:

- Customize Header Text
- Customize Header Content

## Customize Header Text

Use the [AccordionItem](/WPF/DevExpress.Xpf.Accordion.AccordionItem)**.Header** property to specify the accordion item header’s text. The following code sample demonstrates how to use this property:

- XAML

<section id="tabpanel_FLvNgTQImM_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl&gt;
   &lt;dxa:AccordionItem Header=&quot;Root Item&quot;&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot;/&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot;/&gt;
   &lt;/dxa:AccordionItem&gt;
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

The image below shows the result:

![AccordionItemCustomizationHeaderSimple](/WPF/images/accordionitemcustomizationheadersimple132092.png)

## Customize Header Content

You can customize the header’s content. The following code sample demonstrates how to put a custom object in the [AccordionItem](/WPF/DevExpress.Xpf.Accordion.AccordionItem)**.Header**:

- XAML

<section id="tabpanel_FLvNgTQImM-1_tabid-xaml" role="tabpanel" data-tab="tabid-xaml">
<pre><code class="lang-xaml">&lt;dxa:AccordionControl&gt;
   &lt;dxa:AccordionItem Header=&quot;Root Item&quot;&gt;
      &lt;dxa:AccordionItem Header=&quot;SubItem&quot;/&gt;
      &lt;dxa:AccordionItem&gt;
         &lt;dxa:AccordionItem.Header&gt;
            &lt;StackPanel Orientation=&quot;Horizontal&quot;&gt;
               &lt;Label Foreground=&quot;Red&quot;&gt;SubItem&lt;/Label&gt;
               &lt;dxe:SpinEdit Margin=&quot;20, 0&quot; Value=&quot;1&quot; /&gt;
            &lt;/StackPanel&gt;
         &lt;/dxa:AccordionItem.Header&gt;
      &lt;/dxa:AccordionItem&gt;
   &lt;/dxa:AccordionItem&gt;
&lt;/dxa:AccordionControl&gt;
</code></pre></section>

The image below shows the result:

![AccordionItemCustomizationHeader](/WPF/images/accordionitemcustomizationheader132090.png)

You can set the [AccordionItem.ItemDisplayMode](/WPF/DevExpress.Xpf.Accordion.AccordionItem.ItemDisplayMode) property to **Header** to replace the current accordion item with the object its [AccordionItem](/WPF/DevExpress.Xpf.Accordion.AccordionItem)**.Header** property specifies. In this mode, the glyph and expand-collapse button are disabled, and the item’s margins are ignored.

See Also

[Adding Accordion Items](/WPF/119831/controls-and-libraries/navigation-controls/accordion-control/accordion-items/adding-accordion-items)

[Item Glyph Customization](/WPF/119848/controls-and-libraries/navigation-controls/accordion-control/accordion-items/item-glyph-customization)

[Item Content Customization](/WPF/119849/controls-and-libraries/navigation-controls/accordion-control/accordion-items/item-content-customization)