AccordionItem.ItemDisplayMode Property

Gets or sets the display mode of the current accordion item. This is a dependency property.

Namespace : DevExpress.Xpf.Accordion

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

NuGet Package : DevExpress.Wpf.Accordion

Declaration

C#
VB.NET

csharp

public ItemDisplayMode ItemDisplayMode { get; set; }

Public Property ItemDisplayMode As ItemDisplayMode

Property Value

Type	Description
ItemDisplayMode

An ItemDisplayMode enumeration value that specifies the display mode of an accordion item.

Available values:

Name	Description
Default

The accordion item‘s margins are calculated based on the hierarchy level. The item processes mouse input and keyboard navigation.

| | Header |

The accordion item directly renders the content of the header. Margin calculation and mouse processing are bypassed. The glyph and expand button are disabled.

Remarks

You can set the AccordionItem.ItemDisplayMode property to Header to replace the current accordion item with the object its AccordionItem .Header property specifies. In this mode, the glyph and expand-collapse button are disabled, and the item’s margins are ignored.

The following code sample demonstrates the AccordionControl that displays two items with different display modes:

XAML

xaml

<Window ...
        xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/core" >
    <Grid>
        <!-- ... -->
        <dxa:AccordionControl>
            <dxa:AccordionItem Header="Root Item" Glyph="{dxc:DXImage Image=Image_32x32.png}">
                <!-- Track bar editor is used as a subitem -->
                <dxe:TrackBarEdit/>
                <dxa:AccordionItem Header="SubItem" Glyph="{dxc:DXImage Image=Map_16x16.png}"/>
                <dxa:AccordionItem Header="SubItem" Glyph="{dxc:DXImage Image=Map_16x16.png}" >
                    <!-- See how ItemDisplayMode property affects accordion item appearance -->
                    <dxa:AccordionItem ItemDisplayMode="Default">
                        <!-- The header can display custom content -->
                        <dxa:AccordionItem.Header>
                            <Border BorderBrush="Blue" BorderThickness="1" Margin="2">
                                <StackPanel Margin="2">
                                    <Label>Default</Label>
                                    <dxe:SpinEdit/>
                                </StackPanel>
                            </Border>
                        </dxa:AccordionItem.Header>
                    </dxa:AccordionItem>

                    <dxa:AccordionItem ItemDisplayMode="Header">
                        <dxa:AccordionItem.Header>
                            <Border BorderBrush="Black" BorderThickness="1" Margin="2">
                                <StackPanel Margin="2">
                                    <Label>Header</Label>
                                    <dxe:SpinEdit/>
                                </StackPanel>
                            </Border>        
                        </dxa:AccordionItem.Header>
                        </dxa:AccordionItem>
                    </dxa:AccordionItem>
                </dxa:AccordionItem>
        </dxa:AccordionControl>
        <!-- ... -->
    </Grid>
</Window>