This example binds our WPF Accordion Control to a hierarchical data structure.
To display hierarchical data within the DevExpress WPF Accordion Control, bind the ItemsSource
property to a collection populated with child items. Use the ChildrenPath property to specify collection name.
In this example, the Accordion Control is bound to a collection of "departments". Each department contains a collection of employees:
<dxa:AccordionControl
ItemsSource="{Binding Departments}"
ChildrenPath="Employees"
SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}"
SelectionUnit="SubItem" />
MainViewModel
exposes two bindable properties:
Departments
– a collection of EmployeeDepartment
objects grouped by department names.
SelectedEmployee
– the employee selected in the Accordion Control.
At runtime, the view model loads employee data, groups it by department, and assigns the first available employee to the SelectedEmployee
property:
var departments = DataHelper.GetEmployees()
.GroupBy(x => x.GroupName)
.Select(x => CreateEmployeeDepartment(x.Key, x.Take(10).ToArray()))
.ToArray();
Departments = new ObservableCollection<EmployeeDepartment>(departments);
SelectedEmployee = Departments[0].Employees[0];
Each EmployeeDepartment
object includes an Employees
collection:
public class EmployeeDepartment {
public string Name { get; set; }
public ObservableCollection<Employee> Employees { get; set; }
}
- MainViewModel.cs (VB: MainViewModel.vb)
- MainView.xaml (VB: MainView.xaml)
- WPF MVVM Framework - Use View Models Generated at Compile Time
- WPF Dock Layout Manager - Bind the View Model Collection with LayoutAdapters
- WPF Dock Layout Manager - Bind the View Model Collection with IMVVMDockingProperties
- WPF Dock Layout Manager - Populate a DockLayoutManager LayoutGroup with the ViewModels Collection
- Add the Loading Decorator to the Application with the MVVM Structure
- WPF Hamburger Menu Control - Navigate Between the MVVM Views
- Reporting for WPF - How to Use ViewModel Data as Report Parameters in a WPF MVVM Application
- Reporting for WPF - How to Use the DocumentPreviewControl in a WPF MVVM Application to Preview a Report
(you will be redirected to DevExpress.com to submit your response)