# Getting Started | WPF Controls | DevExpress Documentation
This tutorial provides step-by-step instructions on how to create a simple application with the [AccordionControl](/WPF/DevExpress.Xpf.Accordion.AccordionControl).
## Add a Data Model
The **AccordionControl** can be bound to any object that implements the [IEnumerable](https://learn.microsoft.com/dotnet/api/system.collections.ienumerable) interface or its descendant (for example, IList, ICollection).
The code sample below demonstrates a simple data model that is used in this tutorial:
- C#
- VB.NET
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;
}
}
}
Imports System.Collections.Generic
Namespace DxAccordionGettingStarted
Public Class Employee
Public Property ID As Integer
Public Property Name As String
Public Property Position As String
Public Property Department As String
Public Overrides Function ToString() As String
Return Name
End Function
End Class
Public Module Staff
Public Function GetStaff() As List(Of Employee)
Dim employees As List(Of Employee) = New List(Of Employee)()
employees.Add(New Employee() With {.ID = 1, .Name = "Gregory S. Price", .Department = "Management", .Position = "President"})
employees.Add(New Employee() With {.ID = 2, .Name = "Irma R. Marshall", .Department = "Marketing", .Position = "Vice President"})
employees.Add(New Employee() With {.ID = 3, .Name = "John C. Powell", .Department = "Operations", .Position = "Vice President"})
employees.Add(New Employee() With {.ID = 4, .Name = "Christian P. Laclair", .Department = "Production", .Position = "Vice President"})
employees.Add(New Employee() With {.ID = 5, .Name = "Karen J. Kelly", .Department = "Finance", .Position = "Vice President"})
employees.Add(New Employee() With {.ID = 6, .Name = "Brian C. Cowling", .Department = "Marketing", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 7, .Name = "Thomas C. Dawson", .Department = "Marketing", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 8, .Name = "Angel M. Wilson", .Department = "Marketing", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 9, .Name = "Bryan R. Henderson", .Department = "Marketing", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 10, .Name = "Harold S. Brandes", .Department = "Operations", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 11, .Name = "Michael S. Blevins", .Department = "Operations", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 12, .Name = "Jan K. Sisk", .Department = "Operations", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 13, .Name = "Sidney L. Holder", .Department = "Operations", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 14, .Name = "James L. Kelsey", .Department = "Production", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 15, .Name = "Howard M. Carpenter", .Department = "Production", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 16, .Name = "Jennifer T. Tapia", .Department = "Production", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 17, .Name = "Judith P. Underhill", .Department = "Finance", .Position = "Manager"})
employees.Add(New Employee() With {.ID = 18, .Name = "Russell E. Belton", .Department = "Finance", .Position = "Manager"})
Return employees
End Function
End Module
End Namespace
## Add a View Model
Create a view model that retrieves data from the data model:
- C#
- VB.NET
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;
}
}
}
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.Linq
Namespace DxAccordionGettingStarted
Public Class MainWindowViewModel
Public Sub New()
Dim employeeDepartments = GetStaff().GroupBy(Function(x) x.Department).[Select](Function(x) New EmployeeDepartment(x.Key, x.ToArray()))
Me.EmployeeDepartments = New ObservableCollection(Of EmployeeDepartment)(employeeDepartments.ToArray())
End Sub
Public Property EmployeeDepartments As ObservableCollection(Of EmployeeDepartment)
End Class
Public Class EmployeeDepartment
Public Property Name As String
Public Property Employees As ObservableCollection(Of Employee)
Public Sub New(ByVal name As String, ByVal employees As IEnumerable(Of Employee))
Me.Name = name
Me.Employees = New ObservableCollection(Of Employee)(employees)
End Sub
Public Overrides Function ToString() As String
Return Name
End Function
End Class
End Namespace
Build the solution. Invoke the main window’s [Quick Actions](/WPF/18095/whats-installed/smart-tags) 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.26.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](/GeneralInformation/15615/installation/download-the-registered-version), 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](/WPF/118635/controls-and-libraries/navigation-controls/accordion-control/data-binding) topic for details on different approaches to binding the AccordionControl to data.
The code sample below demonstrates the generated code:
- XAML
<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:
