|
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 a data source that contains hierarchical data objects of different types |
| 9 | + |
| 10 | +This example binds the WPF [`AccordionControl`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl) to a hierarchical data structure that includes objects of different types. Use this technique when your data model does not expose a unified child collection (for instance, when parent and child objects do not share a common base class). |
| 11 | + |
| 12 | +The implementation leverages the [`ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector) property to retrieve child items at runtime. The standard [`ChildrenPath`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenPath) property cannot traverse mixed-type hierarchies. The [`ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector) property delegates child resolution to your custom logic. |
| 13 | + |
| 14 | +## Implementation details |
| 15 | + |
| 16 | +### Data Structure |
| 17 | + |
| 18 | +The [`AccordionControl`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl) binds to a flat list of `Category` objects. Each `Category` contains a collection of `Item` objects in its `Items` property. |
| 19 | + |
| 20 | +```csharp |
| 21 | +public class Category { |
| 22 | + public string CategoryName { get; set; } |
| 23 | + public ObservableCollection<Item> Items { get; set; } |
| 24 | +} |
| 25 | + |
| 26 | +public class Item { |
| 27 | + public string ItemName { get; set; } |
| 28 | +} |
| 29 | +``` |
| 30 | + |
| 31 | +### Custom Children Selector |
| 32 | + |
| 33 | +The custom selector (`MySelector`) implements the `IChildrenSelector` interface. The selector returns child items only for `Category` objects: |
| 34 | + |
| 35 | +```csharp |
| 36 | +public class MySelector : IChildrenSelector { |
| 37 | + public IEnumerable SelectChildren(object item) { |
| 38 | + if (item is Category category) |
| 39 | + return category.Items; |
| 40 | + return null; |
| 41 | + } |
| 42 | +} |
| 43 | +``` |
| 44 | + |
| 45 | +### XAML Configuration |
| 46 | + |
| 47 | +Register the selector as a resource and assign it to the [`AccordionControl.ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector) property: |
| 48 | + |
| 49 | +```xaml |
| 50 | +<local:MySelector x:Key="mySelector" /> |
| 51 | +<dxa:AccordionControl |
| 52 | + ItemsSource="{Binding MyData.Categories}" |
| 53 | + ChildrenSelector="{StaticResource mySelector}" /> |
| 54 | +``` |
| 55 | + |
| 56 | +### Data Templates |
| 57 | + |
| 58 | +Define templates to display `Category` and `Item` objects: |
| 59 | + |
| 60 | +```xaml |
| 61 | +<DataTemplate DataType="{x:Type local:Category}"> |
| 62 | + <TextBlock Text="{Binding CategoryName}" /> |
| 63 | +</DataTemplate> |
| 64 | +<DataTemplate DataType="{x:Type local:Item}"> |
| 65 | + <TextBlock Text="{Binding ItemName}" /> |
| 66 | +</DataTemplate> |
| 67 | +``` |
| 68 | + |
| 69 | +## Files to Review |
9 | 70 |
|
10 | 71 | * [MainWindow.xaml](./CS/ChildrenSelector/MainWindow.xaml) (VB: [MainWindow.xaml](./VB/ChildrenSelector/MainWindow.xaml)) |
11 | 72 | * [ViewModel.cs](./CS/ChildrenSelector/ViewModel.cs) (VB: [ViewModel.vb](./VB/ChildrenSelector/ViewModel.vb)) |
12 | | -<!-- default file list end --> |
13 | | -# WPF Accordion Control - Bind to a data source that contains hierarchical data objects of different types |
14 | 73 |
|
15 | | -This example demonstrates how to bind the <a href="https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.class">AccordionControl</a> to data using the <a href="https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector.property">AccordionControl.ChildrenSelector</a> property.<br>Refer to the <a href="https://documentation.devexpress.com/WPF/118635/Controls-and-Libraries/Navigation-Controls/Accordion-Control/Data-Binding">Data Binding</a> topic to learn more. |
| 74 | +## Documentation |
| 75 | + |
| 76 | +- [AccordionControl](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) |
| 77 | +- [AccordionItem](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionItem) |
| 78 | +- [AccordionViewMode](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionViewMode) |
| 79 | +- [AccordionControl.ChildrenSelector](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector.property) |
| 80 | +- [Data Binding](https://documentation.devexpress.com/WPF/118635/Controls-and-Libraries/Navigation-Controls/Accordion-Control/Data-Binding) |
| 81 | +- [MVVM Framework](https://docs.devexpress.com/WPF/15112/mvvm-framework) |
16 | 82 |
|
17 | | -<br/> |
| 83 | +## More Examples |
18 | 84 |
|
| 85 | +- [ WPF Accordion Control - Bind to Hierarchical Data Structure](https://github.com/DevExpress-Examples/wpf-accordion-bind-to-hierarchical-data-structure) |
| 86 | +- [WPF MVVM Framework - Use View Models Generated at Compile Time](https://github.com/DevExpress-Examples/wpf-mvvm-framework-view-model-generator) |
| 87 | +- [WPF Dock Layout Manager - Bind the View Model Collection with LayoutAdapters](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-bind-view-model-collection-with-layoutadapters) |
| 88 | +- [WPF Dock Layout Manager - Bind the View Model Collection with IMVVMDockingProperties](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-bind-view-model-collection-with-IMVVMDockingProperties) |
| 89 | +- [WPF Dock Layout Manager - Populate a DockLayoutManager LayoutGroup with the ViewModels Collection](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-display-viewmodels-collection-in-layoutgroup) |
19 | 90 |
|
20 | 91 | <!-- feedback --> |
21 | 92 | ## Does this example address your development requirements/objectives? |
|
0 commit comments