Skip to content

Update the Readme file #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: 24.2.1+
Choose a base branch
from
Open
Changes from all 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 a hierarchical data structure.

## Implementation Details

To display hierarchical data in the [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 the name of the collection.

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:

```xaml
<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](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