ContextQMD
Back to Devexpress

Expanding and Collapsing

wpf-119808-controls-and-libraries-navigation-controls-accordion-control-expanding-and-collapsing.md

latest5.7 KB
Original Source

Expanding and Collapsing

  • Jun 07, 2019
  • 2 minutes to read

You can expand and collapse accordion items that contain nested items. The following image shows an expandable accordion item:

This topic contains the following sections:

Expanding and Collapsing in Code

Use the following methods to expand or collapse accordion items in code:

MethodDescription
AccordionControl.ExpandItemExpands an accordion item.
AccordionControl.ExpandAllExpands all accordion items that can be expanded.
AccordionControl.CollapseItemCollapses an accordion item.
AccordionControl.CollapseAllCollapses all accordion items that can be collapsed.

Expanding and Collapsing at Runtime

To expand or collapse accordion item at runtime:

You can set the AccordionControl.ExpandItemOnHeaderClick property to false to prohibit expanding when clicking an item.

Expand-Collapse Button Position

Use the following properties to hide the expand-collapse button or change its position:

PropertyDescription
AccordionItem.ExpandButtonPositionSpecifies the expand-collapse button‘s position for the current accordion item.
AccordionControl.RootItemExpandButtonPositionSpecifies the expand-collapse button‘s position for all root items.
AccordionControl.SubItemExpandButtonPositionSpecifies the expand-collapse button‘s position for all subitems.

The code sample below demonstrates how to show the expand-collapse button at root items’ left side:

xaml
<dxa:AccordionControl RootItemExpandButtonPosition="Left"> ... </dxa:AccordionControl>

The image below shows the result:

Expanding Modes

The AccordionControl supports different expanding modes. Use the AccordionControl.ExpandMode property to specify the mode:

ModeDescription
ExpandMode.MultipleEnd-users can expand multiple items. At least one item is always expanded.
ExpandMode.MultipleOrNoneEnd-users can expand multiple items. Collapsing all items is also possible.
ExpandMode.SingleOne accordion item is always expanded. End-users cannot collapse the expanded item.
ExpandMode.SingleOrNoneEnd-users can expand one accordion item at a time. Collapsing all items is also possible.

The following code sample demonstrates the AccordionControl in Single expanding mode:

xaml
<dxa:AccordionControl ExpandMode="Single"> ... </dxa:AccordionControl>

The image below shows the result:

Expanding and Collapsing Animation

The AccordionControl applies an animation when expanding or collapsing accordion items, by default. You can disable the animation by: