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

How to: Bind the AccordionControl to Data Using the ChildrenPath Property

  • 3 minutes to read

This example demonstrates how to bind the AccordionControl to data using the AccordionControl.ChildrenPath property.

The AccordionControl is bound to a collection of menu items. A panel on the right contains the dedicated Expand and Collapse buttons and allows editing a caption of the currently selected item.

The image below shows the result:

Accordion Data Binding

Refer to the Data Binding topic to learn more.

View Example

<dx:DXWindow
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
        xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
        xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
        xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion" 
        xmlns:local="clr-namespace:ChildrenPath" 
        x:Class="ChildrenPath.MainWindow"
        Title="MainWindow" Height="350" Width="525">
    <dx:DXWindow.DataContext>
        <local:ViewModel/>
    </dx:DXWindow.DataContext>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Border Margin="5" Grid.Column="0" BorderBrush="Black" BorderThickness="1">
            <dxa:AccordionControl Name="accordion" ItemsSource="{Binding AppMenu.MenuItems }" 
                                  SelectedItem="{Binding SelectedItem}" 
                                  ChildrenPath="SubItems" DisplayMemberPath="Caption"/>
        </Border>
        <Border Margin="5" Grid.Column="1" BorderBrush="Black" BorderThickness="1">
            <StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Label Margin="5" VerticalAlignment="Center">Item Name</Label>
                    <dxe:TextEdit Margin="5" Text="{Binding SelectedItem.Caption, 
                        UpdateSourceTrigger=PropertyChanged}" Width="150"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button Margin="5" Content="Expand All Items" 
                            Command="{Binding ElementName=accordion, Path=Commands.ExpandAllItems}" />
                    <Button Margin="5" Content="Collapse All Items" 
                            Command="{Binding ElementName=accordion, Path=Commands.CollapseAllItems}" />
                </StackPanel>
            </StackPanel>
        </Border>
    </Grid>
</dx:DXWindow>