Selection

• Apr 07, 2020
• 3 minutes to read

End-users can select a single accordion item at a time by default:

Use the AccordionControl.SelectedItem property to get or set the selected accordion item.

Restrict Item Selection

Disable Item Selection

Set the AccordionControl.SelectionMode property to SelectionMode.None to prohibit item selection.

Restrict Selection For a Single Item

Set the accordion item’s AccordionItem.CanSelect property to false to prevent this item from being selected.

Restrict Selection Dynamically

To dynamically prevent accordion items from being selected, handle the AccordionControl.CanSelectItem event.

In the event handler, use the CanSelectItemEventArgs.Item property to get the processed item. To prevent this item from being selected, set the CanSelectItemEventArgs.CanSelect property to false.

In Bound Mode

In bound mode, the CanSelectItemEventArgs.Item property returns a bound data object.

The code sample below demonstrates how to prevent an item with the “Application Settings” caption from being selected.

Xaml

<Window ...
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion">
    <Grid>
        <dxa:AccordionControl
            ItemsSource="{Binding AppMenu.MenuItems}"
            DisplayMemberPath="Caption"
            ChildrenPath="SubItems"
            CanSelectItem="AccordionControl_CanSelectItem" />
    </Grid>
</Window>

C#

private void AccordionControl_CanSelectItem(object sender, DevExpress.Xpf.Accordion.CanSelectItemEventArgs e) {
    MenuItem item = (MenuItem)e.Item;
    if (item.Caption == "Application Settings") {
        e.CanSelect = false;
    }
}

VB.NET

Private Sub AccordionControl_CanSelectItem(ByVal sender As Object, ByVal e As DevExpress.Xpf.Accordion.CanSelectItemEventArgs)
    Dim item As MenuItem = CType(e.Item, MenuItem)
    If item.Caption = "Application Settings" Then
        e.CanSelect = False
    End If
End Sub

In Unbound Mode

In unbound mode, the CanSelectItemEventArgs.Item property returns an AccordionItem.

The code sample below demonstrates how to prevent an item with the “Application Settings” header from being selected.

Xaml

<Window ...
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion">
    <Grid>
        <dxa:AccordionControl
            CanSelectItem="AccordionControl_CanSelectItem" >
            <dxa:AccordionItem Header="Start Page"/>
            <dxa:AccordionItem Header="Preferences">
                <dxa:AccordionItem Header="Account Info"/>
                <dxa:AccordionItem Header="Application Settings"/>
            </dxa:AccordionItem>
            <dxa:AccordionItem Header="About"/>
        </dxa:AccordionControl>
    </Grid>
</Window>

C#

using DevExpress.Xpf.Accordion;
...

private void AccordionControl_CanSelectItem(object sender, CanSelectItemEventArgs e) {
    AccordionItem item = (AccordionItem)e.Item;
    if (item.Header.ToString() == "Application Settings") {
        e.CanSelect = false;
    }
}
...

VB.NET

Imports DevExpress.Xpf.Accordion
...

Private Sub AccordionControl_CanSelectItem(ByVal sender As Object, ByVal e As CanSelectItemEventArgs)
    Dim item As AccordionItem = CType(e.Item, AccordionItem)
    If item.Header.ToString() = "Application Settings" Then
        e.CanSelect = False
    End If
End Sub
...

Customize Item Selection

You can specify accordion item types an end-user can select.

Set the AccordionControl.SelectionUnit property to:

• SelectionUnit.SubItem - to allow users to select subitems only.
• SelectionUnit.SubItemOrRootItem - to allow users to select root items and subitems.

The following code sample demonstrates an AccordionControl that allows users to select subitems only:

XAML

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

The image below shows the result:

Customize Item Highlighting

Selectable and expandable accordion items are highlighted when you move the mouse pointer over them. Use the following properties to change this behavior:

Property	Description
AccordionItem.HighlightOnHover	Gets or sets whether the current item is highlighted when an end-user moves the mouse cursor over it.
AccordionItem.HighlightOnPress	Gets or sets whether the current item is highlighted when an end-user clicks and holds the left mouse button.

The following code sample shows an accordion item that you can highlight but not select:

XAML

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

The image below shows the result: