|
7 | 7 |
|
8 | 8 | # WPF Accordion Control - Bind to Hierarchical Data Structure
|
9 | 9 |
|
10 |
| -This example binds <a href="https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control">Accordion Control</a> to Hierarchical Data Structure. |
| 10 | +This example binds [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) to hierarchical data structure. |
11 | 11 |
|
12 | 12 | ## Implementation Details
|
13 | 13 |
|
14 |
| -... |
| 14 | +To display hierarchical data in the [AccordionControl](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control), bind the `ItemsSource` property to a collection that contains child items. Use the [ChildrenPath](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenPath) property to specify the name of the child collection. |
| 15 | + |
| 16 | +In this example, the [AccordionControl](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) is bound to the collection of departments. Each department contains the 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 | +The `MainViewModel` exposes two bindable properties: |
| 27 | + |
| 28 | +`Departments` – the collection of `EmployeeDepartment` objects grouped by department name. |
| 29 | + |
| 30 | +`SelectedEmployee` – the employee selected in the [AccordionControl](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 | +``` |
15 | 53 |
|
16 | 54 | ## Files to Review
|
17 | 55 |
|
|
0 commit comments