Getting Started
- 7 minutes to read
This tutorial provides step-by-step instructions on how to create a simple application with the AccordionControl.
Add a Data Model
The AccordionControl can be bound to any object that implements the IEnumerable interface or its descendant (for example, IList, ICollection).
The code sample below demonstrates a simple data model that is used in this tutorial:
using System.Collections.Generic;
namespace DxAccordionGettingStarted {
public class Employee {
public int ID { get; set; }
public string Name { get; set; }
public string Position { get; set; }
public string Department { get; set; }
public override string ToString() {
return Name;
}
}
public static class Staff {
public static List<Employee> GetStaff() {
List<Employee> employees = new List<Employee>();
employees.Add(new Employee() { ID = 1, Name = "Gregory S. Price", Department = "Management", Position = "President" });
employees.Add(new Employee() { ID = 2, Name = "Irma R. Marshall", Department = "Marketing", Position = "Vice President" });
employees.Add(new Employee() { ID = 3, Name = "John C. Powell", Department = "Operations", Position = "Vice President" });
employees.Add(new Employee() { ID = 4, Name = "Christian P. Laclair", Department = "Production", Position = "Vice President" });
employees.Add(new Employee() { ID = 5, Name = "Karen J. Kelly", Department = "Finance", Position = "Vice President" });
employees.Add(new Employee() { ID = 6, Name = "Brian C. Cowling", Department = "Marketing", Position = "Manager" });
employees.Add(new Employee() { ID = 7, Name = "Thomas C. Dawson", Department = "Marketing", Position = "Manager" });
employees.Add(new Employee() { ID = 8, Name = "Angel M. Wilson", Department = "Marketing", Position = "Manager" });
employees.Add(new Employee() { ID = 9, Name = "Bryan R. Henderson", Department = "Marketing", Position = "Manager" });
employees.Add(new Employee() { ID = 10, Name = "Harold S. Brandes", Department = "Operations", Position = "Manager" });
employees.Add(new Employee() { ID = 11, Name = "Michael S. Blevins", Department = "Operations", Position = "Manager" });
employees.Add(new Employee() { ID = 12, Name = "Jan K. Sisk", Department = "Operations", Position = "Manager" });
employees.Add(new Employee() { ID = 13, Name = "Sidney L. Holder", Department = "Operations", Position = "Manager" });
employees.Add(new Employee() { ID = 14, Name = "James L. Kelsey", Department = "Production", Position = "Manager" });
employees.Add(new Employee() { ID = 15, Name = "Howard M. Carpenter", Department = "Production", Position = "Manager" });
employees.Add(new Employee() { ID = 16, Name = "Jennifer T. Tapia", Department = "Production", Position = "Manager" });
employees.Add(new Employee() { ID = 17, Name = "Judith P. Underhill", Department = "Finance", Position = "Manager" });
employees.Add(new Employee() { ID = 18, Name = "Russell E. Belton", Department = "Finance", Position = "Manager" });
return employees;
}
}
}
Add a View Model
Create a view model that retrieves data from the data model:
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
namespace DxAccordionGettingStarted {
public class MainWindowViewModel {
public MainWindowViewModel() {
var employeeDepartments = Staff.GetStaff()
.GroupBy(x => x.Department)
.Select(x => new EmployeeDepartment(x.Key, x.ToArray()));
EmployeeDepartments = new ObservableCollection<EmployeeDepartment>(employeeDepartments.ToArray());
}
public ObservableCollection<EmployeeDepartment> EmployeeDepartments { get; set; }
}
public class EmployeeDepartment {
public string Name { get; set; }
public ObservableCollection<Employee> Employees { get; set; }
public EmployeeDepartment(string name, IEnumerable<Employee> employees) {
Name = name;
Employees = new ObservableCollection<Employee>(employees);
}
public override string ToString() {
return Name;
}
}
}
Build the solution. Invoke the main window’s Quick Actions and define the window’s data context as shown in the image below:
Add the AccordionControl to a View
Drag the AccordionControl from the DX.24.1: Navigation & Layout Toolbox tab and drop it onto the main window.
Tip
If you add the DevExpress products via a NuGet feed instead of the Unified Component Installer, the toolbox doesn’t contain DevExpress controls until you add the corresponding NuGet package.
Go to Tools | NuGet Package Manager | Manage NuGet Packages for Solution and add the DevExpress.Wpf.Accordion NuGet package.
Right-click the control and select Layout | Reset All to allow the AccordionControl to fill the entire window:
Bind the AccordionControl to Data
Invoke the AccordionControl’s Quick Actions and define the ItemsSource field:
Define the ChildrenPath field that specifies the path to the property that contains an accordion item’s children:
Tip
Refer to the Data Binding topic for details on different approaches to binding the AccordionControl to data.
The code sample below demonstrates the generated code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:dxa="http://schemas.devexpress.com/winfx/2008/xaml/accordion"
xmlns:local="clr-namespace:DxAccordionGettingStarted"
x:Class="DxAccordionGettingStarted.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<dxa:AccordionControl ItemsSource="{Binding EmployeeDepartments}" ChildrenPath="Employees"/>
</Grid>
</Window>
Get the Result
Run the solution to see the result:
