|
4 | 4 | [](https://docs.devexpress.com/GeneralInformation/403183) |
5 | 5 | [](#does-this-example-address-your-development-requirementsobjectives) |
6 | 6 | <!-- default badges end --> |
7 | | -<!-- default file list --> |
8 | | -*Files to look at*: |
| 7 | + |
| 8 | +# WPF Accordion Control - Bind to Hierarchical Data Structure |
| 9 | + |
| 10 | +This example binds our WPF [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) to a hierarchical data structure. |
| 11 | + |
| 12 | +## Implementation Details |
| 13 | + |
| 14 | +To display hierarchical data within the DevExpress WPF [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control), bind the `ItemsSource` property to a collection populated with child items. Use the [ChildrenPath](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenPath) property to specify collection name. |
| 15 | + |
| 16 | +In this example, the [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) is bound to a collection of "departments". Each department contains a collection of employees: |
| 17 | + |
| 18 | +```xaml |
| 19 | +<dxa:AccordionControl |
| 20 | + ItemsSource="{Binding Departments}" |
| 21 | + ChildrenPath="Employees" |
| 22 | + SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}" |
| 23 | + SelectionUnit="SubItem" /> |
| 24 | +``` |
| 25 | + |
| 26 | +`MainViewModel` exposes two bindable properties: |
| 27 | + |
| 28 | +`Departments` – a collection of `EmployeeDepartment` objects grouped by department names. |
| 29 | + |
| 30 | +`SelectedEmployee` – the employee selected in the [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control). |
| 31 | + |
| 32 | +At runtime, the view model loads employee data, groups it by department, and assigns the first available employee to the `SelectedEmployee` property: |
| 33 | + |
| 34 | +```csharp |
| 35 | +var departments = DataHelper.GetEmployees() |
| 36 | + .GroupBy(x => x.GroupName) |
| 37 | + .Select(x => CreateEmployeeDepartment(x.Key, x.Take(10).ToArray())) |
| 38 | + .ToArray(); |
| 39 | + |
| 40 | +Departments = new ObservableCollection<EmployeeDepartment>(departments); |
| 41 | +SelectedEmployee = Departments[0].Employees[0]; |
| 42 | +``` |
| 43 | + |
| 44 | +Each `EmployeeDepartment` object includes an `Employees` collection: |
| 45 | + |
| 46 | + |
| 47 | +```csharp |
| 48 | +public class EmployeeDepartment { |
| 49 | + public string Name { get; set; } |
| 50 | + public ObservableCollection<Employee> Employees { get; set; } |
| 51 | +} |
| 52 | +``` |
| 53 | + |
| 54 | +## Files to Review |
9 | 55 |
|
10 | 56 | * [MainViewModel.cs](./CS/DXSample/ViewModels/MainViewModel.cs) (VB: [MainViewModel.vb](./VB/DXSample/ViewModels/MainViewModel.vb)) |
11 | | -* **[MainView.xaml](./CS/DXSample/Views/MainView.xaml) (VB: [MainView.xaml](./VB/DXSample/Views/MainView.xaml))** |
12 | | -<!-- default file list end --> |
13 | | -# How to: Bind AccordionControl to Hierarchical Data Structure |
| 57 | +* [MainView.xaml](./CS/DXSample/Views/MainView.xaml) (VB: [MainView.xaml](./VB/DXSample/Views/MainView.xaml)) |
14 | 58 |
|
| 59 | +## Documentation |
15 | 60 |
|
16 | | -This example demonstrates how to bind <a href="https://documentation.devexpress.com/WPF/CustomDocument118347.aspx">Accordion Control</a> to Hierarchical Data Structure. |
| 61 | +- [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) |
| 62 | +- [AccordionItem](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionItem) |
| 63 | +- [AccordionViewMode](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionViewMode) |
| 64 | +- [MVVM Framework](https://docs.devexpress.com/WPF/15112/mvvm-framework) |
17 | 65 |
|
18 | | -<br/> |
| 66 | +## More Examples |
19 | 67 |
|
| 68 | +- [WPF MVVM Framework - Use View Models Generated at Compile Time](https://github.com/DevExpress-Examples/wpf-mvvm-framework-view-model-generator) |
| 69 | +- [WPF Dock Layout Manager - Bind the View Model Collection with LayoutAdapters](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-bind-view-model-collection-with-layoutadapters) |
| 70 | +- [WPF Dock Layout Manager - Bind the View Model Collection with IMVVMDockingProperties](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-bind-view-model-collection-with-IMVVMDockingProperties) |
| 71 | +- [WPF Dock Layout Manager - Populate a DockLayoutManager LayoutGroup with the ViewModels Collection](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-display-viewmodels-collection-in-layoutgroup) |
| 72 | +- [Add the Loading Decorator to the Application with the MVVM Structure](https://github.com/DevExpress-Examples/wpf-display-loading-decorator-in-manual-mode-with-mvvm) |
| 73 | +- [WPF Hamburger Menu Control - Navigate Between the MVVM Views](https://github.com/DevExpress-Examples/wpf-hamburger-menu-with-mvvm) |
| 74 | +- [Reporting for WPF - How to Use ViewModel Data as Report Parameters in a WPF MVVM Application](https://github.com/DevExpress-Examples/reporting-wpf-mvvm-viewmodel-data-to-report) |
| 75 | +- [Reporting for WPF - How to Use the DocumentPreviewControl in a WPF MVVM Application to Preview a Report](https://github.com/DevExpress-Examples/reporting-wpf-mvvm-show-report-document-preview) |
20 | 76 |
|
21 | 77 | <!-- feedback --> |
22 | 78 | ## Does this example address your development requirements/objectives? |
|
0 commit comments