Skip to content
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 63 additions & 7 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,75 @@
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
<!-- default badges end -->
<!-- default file list -->
*Files to look at*:

# WPF Accordion Control - Bind to Hierarchical Data Structure

This example binds [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) to hierarchical data structure.

## Implementation Details

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.

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:

```xaml
<dxa:AccordionControl
ItemsSource="{Binding Departments}"
ChildrenPath="Employees"
SelectedItem="{Binding SelectedEmployee, Mode=TwoWay}"
SelectionUnit="SubItem" />
```

The `MainViewModel` exposes two bindable properties:

`Departments` – the collection of `EmployeeDepartment` objects grouped by department name.

`SelectedEmployee` – the employee selected in the [AccordionControl](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control).

At runtime, the view model loads employee data, groups it by department, and assigns the first available employee to the `SelectedEmployee` property:

```csharp
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:


```csharp
public class EmployeeDepartment {
public string Name { get; set; }
public ObservableCollection<Employee> Employees { get; set; }
}
```

## Files to Review

* [MainViewModel.cs](./CS/DXSample/ViewModels/MainViewModel.cs) (VB: [MainViewModel.vb](./VB/DXSample/ViewModels/MainViewModel.vb))
* **[MainView.xaml](./CS/DXSample/Views/MainView.xaml) (VB: [MainView.xaml](./VB/DXSample/Views/MainView.xaml))**
<!-- default file list end -->
# How to: Bind AccordionControl to Hierarchical Data Structure
* [MainView.xaml](./CS/DXSample/Views/MainView.xaml) (VB: [MainView.xaml](./VB/DXSample/Views/MainView.xaml))

## Documentation

This example demonstrates how to bind <a href="https://documentation.devexpress.com/WPF/CustomDocument118347.aspx">Accordion Control</a> to Hierarchical Data Structure.
- [Accordion Control](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control)
- [AccordionItem](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionItem)
- [AccordionViewMode](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionViewMode)
- [MVVM Framework](https://docs.devexpress.com/WPF/15112/mvvm-framework)

<br/>
## More Examples

- [WPF MVVM Framework - Use View Models Generated at Compile Time](https://github.com/DevExpress-Examples/wpf-mvvm-framework-view-model-generator)
- [WPF Dock Layout Manager - Bind the View Model Collection with LayoutAdapters](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-bind-view-model-collection-with-layoutadapters)
- [WPF Dock Layout Manager - Bind the View Model Collection with IMVVMDockingProperties](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-bind-view-model-collection-with-IMVVMDockingProperties)
- [WPF Dock Layout Manager - Populate a DockLayoutManager LayoutGroup with the ViewModels Collection](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-display-viewmodels-collection-in-layoutgroup)
- [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)
- [WPF Hamburger Menu Control - Navigate Between the MVVM Views](https://github.com/DevExpress-Examples/wpf-hamburger-menu-with-mvvm)
- [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)
- [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)

<!-- feedback -->
## Does this example address your development requirements/objectives?
Expand Down
Loading