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

• Jun 07, 2019
• 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:

Refer to the Data Binding topic to learn more.

View Example

MainWindow.xaml

<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>

ViewModel.cs

using System.Collections.Generic;

namespace ChildrenPath {

    class ViewModel {
        public Menu AppMenu { get; set; }
        public MenuItem SelectedItem { get; set; }
        public ViewModel() {
            AppMenu = new Menu();
            SelectedItem = AppMenu.MenuItems[0];
        }
    }

    public class Menu {
        public List<MenuItem> MenuItems { get; set; }
        public Menu() {
            MenuItems = GetMenuItems();
        }
        private static List<MenuItem> GetMenuItems() {
            List<MenuItem> items = new List<MenuItem>();
            List<MenuItem> subitems = new List<MenuItem>();
            subitems.Add(new MenuItem() { Caption = "SubItem3" });
            items.Add(new MenuItem() {
                Caption = "Item1",
                SubItems = new List<MenuItem>() { new MenuItem() { Caption = "SubItem1" },
                    new MenuItem() { Caption = "SubItem2", SubItems=subitems }
                }
            });
            items.Add(new MenuItem() {
                Caption = "Item2",
                SubItems = new List<MenuItem>() { new MenuItem() { Caption = "SubItem1" },
                    new MenuItem() { Caption = "SubItem2" }
                }
            });
            return items;
        }
    }

    public class MenuItem {
        public string Caption { get; set; }
        public List<MenuItem> SubItems { get; set; }
    }
}

ViewModel.vb

Imports System.Collections.Generic

Namespace ChildrenPath

    Friend Class ViewModel
        Public Property AppMenu() As Menu
        Public Property SelectedItem() As MenuItem
        Public Sub New()
            AppMenu = New Menu()
            SelectedItem = AppMenu.MenuItems(0)
        End Sub
    End Class

    Public Class Menu
        Public Property MenuItems() As List(Of MenuItem)
        Public Sub New()
            MenuItems = GetMenuItems()
        End Sub
        Private Shared Function GetMenuItems() As List(Of MenuItem)
            Dim items As New List(Of MenuItem)()
            Dim subitems As New List(Of MenuItem)()
            subitems.Add(New MenuItem() With {.Caption = "SubItem3"})
            items.Add(New MenuItem() With { _
                .Caption = "Item1", _
                .SubItems = New List(Of MenuItem)() From { _
                    New MenuItem() With {.Caption = "SubItem1"}, _
                    New MenuItem() With { _
                        .Caption = "SubItem2", _
                        .SubItems=subitems _
                    } _
                } _
            })
            items.Add(New MenuItem() With { _
                .Caption = "Item2", _
                .SubItems = New List(Of MenuItem)() From { _
                    New MenuItem() With {.Caption = "SubItem1"}, _
                    New MenuItem() With {.Caption = "SubItem2"} _
                } _
            })
            Return items
        End Function
    End Class

    Public Class MenuItem
        Public Property Caption() As String
        Public Property SubItems() As List(Of MenuItem)
    End Class
End Namespace