This example demonstrates how to create a WPF Accordion Control and bind it to data using the ChildrenPath property.
Implementation Details
- Bind the accordion control to a data source. To do this, use the AccordionControl.ItemsSource property.
- Specify the AccordionControl.ChildrenPath property to create item hierarchy.
- Set the AccordionControl.DisplayMemberPath property to a data field with strings to display them in item headers.
Files to Review
- MainWindow.xaml (VB: MainWindow.xaml)
- ViewModel.cs (VB: ViewModel.vb)
Documentation
Related Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
ChildrenPath/MainWindow.xaml
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>
ChildrenPath/ViewModel.cs(vb)
C#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; }
}
}