[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Collapse]Navigation Controls
   [Collapse]Accordion Control
     Getting Started
    [Expand]Accordion Items
    [Expand]Data Binding
     Expanding and Collapsing
     View Mode
     Collapse Mode
    [Expand]Visual Elements
   [Expand]Breadcrumb Control
   [Expand]Navigation Bar
    Office Navigation Bar
    TileNav Pane
    Tile Bar
   [Expand]Wizard Control
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Getting Started

This tutorial provides step-by-step instructions on how to create a simple application with the AccordionControl:


See the complete example to learn more: How to: Create a Simple Application with the AccordionControl.

Expanded Step 1. Add a Data Model

  1. The AccordionControl can be bound to any object that implements the IEnumerable (see 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:

Expanded Steps 2-3. Add a View Model

  1. Create a view model that retrieves data from the data model:

  2. Build the solution. Invoke the main window's smart tag and define its data context as shown in the image below:

Expanded Steps 4-5. Add the AccordionControl to a View

  1. Drag the AccordionControl from the DX.19.2: Navigation & Layout Toolbox tab and drop it onto the main window:

  2. Right-click the control and select Layout | Reset All to allow the AccordionControl to fill the entire window:

Expanded Steps 6-7. Bind the AccordionControl to Data

  1. Invoke the AccordionControl's smart tag and define the ItemsSource field:

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


    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:

Expanded Step 8. Get the Result

  1. Run the solution to see the result:

Is this topic helpful?​​​​​​​