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

AccordionControl.CollapsedItemDisplayMode Property

Gets or sets the display mode for accordion items in the collapsed AccordionControl. This is a dependency property.

Namespace: DevExpress.Xpf.Accordion

Assembly: DevExpress.Xpf.Accordion.v24.2.dll

NuGet Package: DevExpress.Wpf.Accordion

#Declaration

public CollapsedItemDisplayMode CollapsedItemDisplayMode { get; set; }

#Property Value

Type Description
CollapsedItemDisplayMode

A CollapsedItemDisplayMode enumeration value.

Available values:

Name Description
ContentAndGlyph

Both the item’s header and glyph are shown.

Content

Only the item’s header is shown.

Glyph

Only the item’s glyph is shown.

#Remarks

You can show accordion items in a collapsed AccordionControl:

AccordionCollapseModeItems

Tip

End-users can click the Summary Item to display all items in a popup window.

Set the AccordionItem.ShowInCollapsedMode property for the items you want to show:

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

You can customize the display mode of the items shown in the collapsed mode using the CollapsedItemDisplayMode property.

The following example demonstrates how to show the collapsed AccordionControl with accordion items’ glyphs:

AccordionCollapseModeItemsGlyphes

<dxa:AccordionControl IsCollapseButtonVisible="True" SummaryItemGlyph="{dx:DXImage Image=Technology_16x16.png}"
      CollapsedItemDisplayMode="Glyph">
   <dxa:AccordionItem Header="Root Item" Glyph="{dx:DXImage Image=Image_32x32.png}">
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Image_16x16.png}" ShowInCollapsedMode="True"/>
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Image_16x16.png}"/>
   </dxa:AccordionItem>
   <dxa:AccordionItem Header="Root Item" Glyph="{dx:DXImage Image=Map_32x32.png}">
      <dxa:AccordionItem Header="SubItem" Glyph="{dx:DXImage Image=Map_16x16.png}" ShowInCollapsedMode="True"/>                
   </dxa:AccordionItem>
</dxa:AccordionControl>

Refer to the Collapse Mode topic to learn more.

See Also