Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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:

AccordionViewModel

#Add the AccordionControl to a View

Drag the AccordionControl from the DX.24.2: 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:

AccordionVisualStudio

#Bind the AccordionControl to Data

Invoke the AccordionControl’s Quick Actions and define the ItemsSource field:

AccordionItemSource

Define the ChildrenPath field that specifies the path to the property that contains an accordion item’s children:

AccordionChildrenPath

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:

AccordionResult