Skip to end of metadata
Go to start of metadata

UXAccordion is a headered selection control with collapsible content and fluid drag and drop support.

On this page:

Selection Control

UXAccordion is inherited from ISMultipleSelectionControl, which means it can be used to perform a single selection and multiple selection depending on the mode. For more information about selection control, see ItemsControl Overview and Content Model Overview respectively.

Configuring SelectionMode

UXAccordion has four selection modes, which are described in the following list.

Using Keyboard to Perform Selection

You can navigate between the items using arrow keys in the keyboard. In the One mode, navigating between items will change the selection immediately.

In other modes, you use SpaceBar to select or unselect an item, while using arrow keys to navigate between the items.

Data Binding

You can bind a collection of data to UXAccordion or to any ItemsControl. To learn more about data binding, see Data Binding Overview.

To bind the data, you can either use ItemTemplate or the member path properties such as described in the following.

  • DisplayMemberPath
    Used to bind the Content property.
  • ImageMemberPath
    Used to bind the Icon property.
  • CollectionMemberPath
    Used to bind the data to UXAccordionItem items collection.
  • OptionDisplayMemberPath
    Used to bind the Content property of UXAccordionOption
  • OptionImageMemberPath
    Used to bind the Icon property of UXAccordionOption.

UXAccordion have two levels of items. UXAccordion contains a collection of UXAccordionItem, while UXAccordionItem contains a collection of UXAccordionOption. To simplify the data binding process, UXAccordion also introduces additional member paths for UXAccordionOption and UXAccordionItem.

The following example shows how to perform binding to UXAccordion using the member path properties.

Contact Group (Model)
Contact (Model)
View Model

This example is using MVVM pattern that uses an advanced data binding concept. To learn more about MVVM pattern, see MVVM Pattern Overview.

Understanding UXAccordionItem and UXAccordionOption

The item container type of UXAccordion is UXAccordionItem, while the item container type for UXAccordionItem is UXAccordionOption. Both of these item types supports ImageContent model.

Consequently, you can use the ImageMemberPath and OptionImageMemberPath to bind image to the image element of UXAccordionItem and UXAccordionOption respectively.

Drag Drop Capability

UXAccordion also supports drag and drop capability that powered by ClientUI DragDrop Framework. To learn more how to enable drag and drop capability to UXAccordion, see ItemsControl Overview and Drag-drop Framework Overview respectively.