|
7 | 7 |
|
8 | 8 | # WPF Accordion Control - Bind to a data source that contains hierarchical data objects of different types |
9 | 9 |
|
10 | | -This example binds the [`AccordionControl`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl) to data objects of different types using the [`AccordionControl.ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector.property) property. |
| 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 | 11 |
|
12 | | -Refer to the [Data Binding](https://documentation.devexpress.com/WPF/118635/Controls-and-Libraries/Navigation-Controls/Accordion-Control/Data-Binding) topic for more information. |
| 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 | 13 |
|
14 | 14 | ## Implementation details |
15 | 15 |
|
16 | | -The [`AccordionControl`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl) control uses the [`ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector) property to bind a flat list of `Category` objects. Each `Category` contains a collection of `Item` objects in its `Items` property. |
| 16 | +### Data Structure |
17 | 17 |
|
18 | | -To build a hierarchical view, the [`AccordionControl`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl) needs to access child items dynamically. However, the data structure uses different object types (`Category` and `Item`) that do not share a common base class with a unified `Children` property. In this reason you cannot use the [`ChildrenPath`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenPath) property to specify the child collection name. |
| 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 | 19 |
|
20 | | -The [`AccordionControl`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl) control uses the [`ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector) property, which accepts a custom implementation of the `IChildrenSelector` interface. This technique allows the control to selectively return child items only for specific types: |
| 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: |
21 | 34 |
|
22 | 35 | ```csharp |
23 | 36 | public class MySelector : IChildrenSelector { |
24 | 37 | public IEnumerable SelectChildren(object item) { |
25 | | - if (item is Category) |
26 | | - return ((Category)item).Items; |
| 38 | + if (item is Category category) |
| 39 | + return category.Items; |
27 | 40 | return null; |
28 | 41 | } |
29 | 42 | } |
30 | 43 | ``` |
31 | 44 |
|
32 | | -In XAML, the selector is declared as a static resource and assigned to the [`AccordionControl.ChildrenSelector`](https://documentation.devexpress.com/WPF/DevExpress.Xpf.Accordion.AccordionControl.ChildrenSelector) property: |
| 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: |
33 | 48 |
|
34 | 49 | ```xaml |
35 | 50 | <local:MySelector x:Key="mySelector" /> |
36 | | - |
37 | 51 | <dxa:AccordionControl |
38 | 52 | ItemsSource="{Binding MyData.Categories}" |
39 | 53 | ChildrenSelector="{StaticResource mySelector}" /> |
40 | 54 | ``` |
41 | 55 |
|
42 | | -The [`AccordionControl`](https://docs.devexpress.com/WPF/118347/controls-and-libraries/navigation-controls/accordion-control) uses data templates to display `Category` and `Item` objects: |
| 56 | +### Data Templates |
| 57 | + |
| 58 | +Define templates to display `Category` and `Item` objects: |
43 | 59 |
|
44 | 60 | ```xaml |
45 | 61 | <DataTemplate DataType="{x:Type local:Category}"> |
46 | 62 | <TextBlock Text="{Binding CategoryName}" /> |
47 | 63 | </DataTemplate> |
48 | | - |
49 | 64 | <DataTemplate DataType="{x:Type local:Item}"> |
50 | 65 | <TextBlock Text="{Binding ItemName}" /> |
51 | 66 | </DataTemplate> |
|
0 commit comments