windowsforms-114553-controls-and-libraries-navigation-controls-accordion-control.md
The Accordion Control (the AccordionControl class object) is a side navigation control. Accordion items can be organized into groups.
The main Accordion features include:
Examples
Demos (DevExpress Demo Center)
To add Accordion Control groups and items, click the “Run Designer” link on the control’s surface and switch to the designer’s “Elements” tab.
Tip
You can drag-and-drop elements in the “AccordionControl Elements” panel to rearrange and categorize them.
Alternatively, you can invoke the control’s smart tag and click the corresponding links:
In code, groups and items are AccordionControlElement class objects with different AccordionControlElement.Style property values. Root groups are stored in the Accordion’s AccordionControl.Elements collection, and individual groups store their child groups and/or items in AccordionControlElement.Elements collections.
Tip
See the following topic for an example: How To: Create AccordionControl in code.
To allow an element to have checked/unchecked states, enable the AccordionControl.AllowItemSelection setting.
A regular item is a button that raises the AccordionControlElementBase.Click and AccordionControl.ElementClick events when clicked. In addition to these regular items, you can add items with content containers.
Click an item’s smart tag and select “Add ContentContainer”. To populate a content container, drag and drop controls from Visual Studio’s Toolbox onto this container.
Tip
Set a content container’s Padding property to -1 to use paddings based on the applied skin.
To populate a content container in code, specify the AccordionControlElementBase.ContentContainer property…
userControlPhoto uc = new userControlPhoto() { Dock = DockStyle.Fill };
AccordionContentContainer container = new AccordionContentContainer();
container.Controls.Add(uc);
// Assign the required content container to an item
acePhoto.ContentContainer = container;
Dim uc As New userControlPhoto() With {.Dock = DockStyle.Fill}
Dim container As New AccordionContentContainer()
container.Controls.Add(uc)
' Assign the required content container to an item
acePhoto.ContentContainer = container
…or handle the AccordionControl.HasContentContainer and AccordionControl.GetContentContainer events.
// Specify which items should raise the GetContentContainer event
private void accordionControl1_HasContentContainer(object sender, HasContentContainerEventArgs e) {
if (e.Element.Text == "Photo") e.HasContentContainer = true;
}
// Assign a content container to the item that fired this event
private void accordionControl1_GetContentContainer(object sender, GetContentContainerEventArgs e) {
if (e.Element.Text == "Photo") {
userControlPhoto uc = new userControlPhoto() { Dock = DockStyle.Fill };
AccordionContentContainer container = new AccordionContentContainer();
container.Controls.Add(uc);
e.ContentContainer = container;
}
}
' Specify which items should raise the GetContentContainer event
Private Sub accordionControl1_HasContentContainer(ByVal sender As Object, ByVal e As HasContentContainerEventArgs)
If e.Element.Text = "Photo" Then
e.HasContentContainer = True
End If
End Sub
' Assign a content container to the item that fired this event
Private Sub accordionControl1_GetContentContainer(ByVal sender As Object, ByVal e As GetContentContainerEventArgs)
If e.Element.Text = "Photo" Then
Dim uc As New userControlPhoto() With {.Dock = DockStyle.Fill}
Dim container As New AccordionContentContainer()
container.Controls.Add(uc)
e.ContentContainer = container
End If
End Sub
A Content Container does not support DirectX Hardware Acceleration and its opacity differs from the opacity of the Accordion control when displayed in the Fluent Design UI. Place a Layout Control inside the Content Container and dock it to all edges of the Content Container.
Important
|
API
|
Description
| | --- | --- | |
AccordionControlElementBase.Expanded
|
Gets or sets whether the element is expanded.
| |
|
Call these methods to expand and collapse all Accordion elements simultaneously.
| |
AccordionControl.ExpandElement
AccordionControl.CollapseElement
|
Call these methods to expand/collapse an Accordion element.
| |
AccordionControl.ShowPopupForm
AccordionControl.ClosePopupForm
|
Call these methods to expand/collapse an Accordion element when the Accordion is minimized.
| |
AccordionControl.ExpandGroupOnHeaderClick
AccordionControl.ExpandItemOnHeaderClick
|
If these settings are enabled, users can click element headers to expand and collapse elements.
| |
AccordionControl.ExpandStateChanging
AccordionControl.ExpandStateChanged
|
Handle these events to perform certain actions when the element is about to collapse or expand, and after the element’s state changes.
You can handle the AccordionControl.ExpandStateChanging event and clear the e.ElementsToExpandCollapse collection to abort the expand/collapse operation. For instance, the following code does not allow users to collapse the “Options” group:
private void accordionControl1_ExpandStateChanging(object sender, ExpandStateChangingEventArgs e) {
if (e.Element.Style == ElementStyle.Group && e.Element.Text == "Options" && e.NewState == AccordionElementState.Collapsed)
e.ElementsToExpandCollapse.Clear();
}
Private Sub accordionControl1_ExpandStateChanging(ByVal sender As Object, ByVal e As ExpandStateChangingEventArgs)
If e.Element.Style = ElementStyle.Group AndAlso e.Element.Text = "Options" AndAlso e.NewState = AccordionElementState.Collapsed Then
e.ElementsToExpandCollapse.Clear()
End If
End Sub
Alternatively, you can cancel the AccordionControl.ElementClick event to do the same.
private void AccordionControl1_ElementClick(object sender, ElementClickEventArgs e) {
if (e.Element.Style == ElementStyle.Group && e.Element.Text == "Options" && e.Element.Expanded == true)
e.Handled = true;
}
Private Sub AccordionControl1_ElementClick(ByVal sender As Object, ByVal e As ElementClickEventArgs)
If e.Element.Style = ElementStyle.Group AndAlso e.Element.Text = "Options" AndAlso e.Element.Expanded = True Then
e.Handled = True
End If
End Sub
Note that the code samples above do not allow users to collapse the Accordion group, but leave this group’s expand/collapse button visible. See the following table row to learn how to hide this button.
| |
AccordionControl.ShowGroupExpandButtons
AccordionControl.ShowItemExpandButtons
|
Use these properties to hide expand/collapse buttons for all items or groups simultaneously. Initially, all groups — even if they are empty — display these buttons. Items show them only when they have content containers assigned.
If you need to hide the expand/collapse button for individual elements, handle the AccordionControl.CustomDrawElement event. This event allows you to call various e.Draw… methods; each method paints a specific element part. For instance, the sample below does not call the DrawExpandCollapseButton method for the “Options” group.
private void AccordionControl1_CustomDrawElement(object sender, CustomDrawElementEventArgs e) {
if (e.Element.Style == ElementStyle.Group && e.Element.Text == "Options") {
e.DrawImage();
e.DrawText();
e.DrawContextButtons();
// Uncomment the following line to draw the expand/collapse button
//e.DrawExpandCollapseButton();
e.Handled = true;
}
}
Private Sub AccordionControl1_CustomDrawElement(ByVal sender As Object, ByVal e As CustomDrawElementEventArgs)
If e.Element.Style = ElementStyle.Group AndAlso e.Element.Text = "Options" Then
e.DrawImage()
e.DrawText()
e.DrawContextButtons()
' Uncomment the following line to draw the expand\collapse button
'e.DrawExpandCollapseButton();
e.Handled = True
End If
End Sub
| |
AccordionControl.ExpandElementMode
|
Gets or sets whether a single element or multiple elements can be expanded simultaneously.
| |
AccordionControl.ElementPositionOnExpanding
|
Gets or sets whether expandable groups and elements are scrolled (if required) to make their contents visible when they are expanded.
|
You can move root Accordion elements (groups and items from the AccordionControl.Elements collection) to the control’s footer. Footer elements act like tabs in a Tabbed UI: when a user clicks a footer element, the Accordion displays this element’s child items in the control’s main area. In the following figure, root items are displayed in the control’s footer. The ‘Mail’ item is active.
To enable this item display style, set the AccordionControl.RootDisplayMode property to Footer.
accordionControl1.RootDisplayMode = DevExpress.XtraBars.Navigation.AccordionControlRootDisplayMode.Footer;
accordionControl1.RootDisplayMode = DevExpress.XtraBars.Navigation.AccordionControlRootDisplayMode.Footer
Additional API
AccordionOptionsFooter.ActiveGroupDisplayMode - Gets or sets whether the accordion control’s main menu displays the active group’s content, but not the header, or both the content and the header.
AccordionControlElement.ControlFooterAlignment - Gets or sets whether the element is aligned at the near or far side of the control footer in the accordion control’s expanded state.
OptionsMinimizing.FooterHeight - Gets or sets the control footer height in the accordion control’s minimized state.
OptionsMinimizing.AllowFooterResizing - Gets or sets whether users can resize the control’s footer when the Accordion control is minimized.
The embedded search panel allows end users to locate a required element. If the found element belongs to a group, this group is also visible. If the element is a group, it shows its child elements.
When the AccordionControl.ShowFilterControl property equals Always , the search panel is always visible. The Auto value allows end users to press Ctrl+F to invoke the search panel, and Esc to close it.
You can assign a custom filter control to the Accordion. Declare a class that implements the DevExpress.XtraBars.Navigation.IFilterContent interface and assign this class instance to the AccordionControl.FilterControl property.
The AccordionControl.FilterDelay property specifies the delay before filtering is applied. You can use this property to reduce the number of filter operations in the Accordion and allow a user to type several symbols in the search box before a filter operation is executed.
Note
The delay is in effect only for the built-in search panel. If you assign a custom search control to the AccordionControl.FilterControl property, the FilterDelay property is ignored.
Smart Search works alongside traditional search algorithms to offer a more powerful and user-friendly search experience. It offers results that are more aligned with what the user is seeking, even if the input contains misspellings.
When the user pauses typing in the search field within the Ribbon or Accordion control, the control sends the current search query to an AI service that understands context, synonyms, and user intent beyond exact keyword matches. Once the AI service returns its results, the control filters items accordingly.
Play the following animation to see how AI-powered smart search works in the DevExpress WinForms Ribbon control:
Read the following help topic to learn more: AI-powered Smart Search.
Accordion groups and items can display four types of content within their headers:
See the following topic to learn how to rearrange these content blocks: Element Header Layout.
You can use the control’s properties (for example, AccordionControl.Appearance, AccordionControlElement.Appearance, and AccordionControlElement.HeaderTemplate) and events (for example, AccordionControl.CustomDrawElement) to customize the contents, layout, and appearance settings of the control’s elements.
AccordionControl allows you to use your knowledge of HTML and CSS markup to render the control’s UI elements. A template’s HTML markup specifies an element’s contents, while the template’s CSS code specifies style, display, and layout settings applied to the element.
AccordionControl exposes a set of properties (accessible from the AccordionControl.HtmlTemplates object) to specify HTML-CSS templates to render the control’s elements:
When you specify templates for AccordionControl elements, you can use the data binding syntax (${PropertyName}) to display text, images, and custom values (AccordionControlElementBase.Tag) of these elements.
${Text} — Inserts an element’s text (AccordionControlElementBase.Text).
${Image} — Inserts an element’s image specified in the AccordionControlElementBase.ImageOptions object. Use the img tag to insert an image, for example, as follows: `
<div class="item_layout">
<div class="item_text">${Text}</div>
</div>
You can also use the ${MyField1} syntax to mark an element as bound to a custom data source. The actual data for this element is set in the QueryHtmlElementData event handler.
<div class="acc_item">${MyField1}</div>
private void OnQueryHtmlElementData(object sender, QueryAccordionHtmlElementDataEventArgs e) {
if (e.FieldName == "MyField1") {
e.Value = "CustomData";
}
}
Private Sub OnQueryHtmlElementData(ByVal sender As Object, ByVal e As QueryAccordionHtmlElementDataEventArgs)
If e.FieldName = "MyField1" Then
e.Value = "CustomData"
End If
End Sub
The Office Navigation Bar can show items retrieved from the Accordion Control. Use the OfficeNavigationBar.NavigationClient property to attach an Office Navigation Bar to an Accordion.
officeNavigationBar1.NavigationClient = accordionControl1;
officeNavigationBar1.NavigationClient = accordionControl1
The FluentDesignForm is a Windows 10-inspired form that includes the following features:
See Fluent Design Form for more information.
This example demonstrates how to use WinForms Accordion and Navigation Frame controls to implement a side navigation.
using System;
using System.Drawing;
using System.Windows.Forms;
using System.Collections.Generic;
using DevExpress.XtraEditors;
using DevExpress.XtraBars.Navigation;
using DevExpress.XtraGrid;
namespace DXApplication {
public partial class Form1 : XtraForm {
NavigationFrame navFrame;
NavigationPage navPage1, navPage2;
AccordionControl accordion;
public Form1() {
InitializeComponent();
navFrame = new NavigationFrame() {
Dock = DockStyle.Fill,
};
accordion = new AccordionControl(){ Dock = DockStyle.Left};
this.Controls.AddRange(new Control[] { navFrame, accordion });
InitNavigationFramePages(navFrame);
InitAccordion(accordion);
accordion.SendToBack();
}
void InitNavigationFramePages(NavigationFrame frame) {
// Initializes the first navigation page.
navPage1 = new NavigationPage(){ Caption = "Tasks" };
navPage1.Controls.Add(new GridControl() {
Dock = DockStyle.Fill,
DataSource = Task.GetSampleData() });
// Initializes the second navigation page.
navPage2 = new NavigationPage() { Caption = "Empty", BackColor = Color.Aqua };
frame.Pages.AddRange(new NavigationPage[] { navPage1, navPage2 });
}
void InitAccordion(AccordionControl accordion) {
AccordionControlElement group = new AccordionControlElement(ElementStyle.Group) {
Name = "accordionGroup1",
Text = "Pages",
Expanded = true
};
AccordionControlElement item1 = new AccordionControlElement(ElementStyle.Item) {
Name = "accordionItem1",
Text = "Page 1"
};
AccordionControlElement item2 = new AccordionControlElement(ElementStyle.Item) {
Name = "accordionItem2",
Text = "Page 2"
};
item1.Click += new EventHandler(this.accordionElement_Click);
item2.Click += new EventHandler(this.accordionElement_Click);
group.Elements.AddRange(new AccordionControlElement[] { item1, item2 });
accordion.Elements.Add(group);
}
void accordionElement_Click(object sender, EventArgs e) {
AccordionControlElement item = sender as AccordionControlElement;
navFrame.SelectedPage = item.Text == "Page 1" ? navPage1 : navPage2;
}
}
public class Task {
int fID;
public Task(int id) {
fID = id;
CreateDate = DateTime.Today;
}
public int ID {
get {
return fID;
}
}
public string Caption { get; set; }
public DateTime CreateDate { get; set; }
public static List<Task> GetSampleData() {
return new List<Task>() {
new Task(0){Caption = "Research", CreateDate = new DateTime(2022, 10, 15)},
new Task(1){Caption = "UI Design", CreateDate = new DateTime(2022, 11, 5)},
new Task(2){Caption = "Environment Setup", CreateDate = new DateTime(2022, 11, 10)},
new Task(3){Caption = "Sprint 1", CreateDate = new DateTime(2022, 11, 11)},
new Task(4){Caption = "Sprint 2", CreateDate = new DateTime(2022, 12, 12)},
new Task(5){Caption = "Sprint 3", CreateDate = new DateTime(2023, 1, 10)},
new Task(6){Caption = "Testing", CreateDate = new DateTime(2022, 2, 10)}
};
}
}
}
Imports System
Imports System.Drawing
Imports System.Windows.Forms
Imports System.Collections.Generic
Imports DevExpress.XtraEditors
Imports DevExpress.XtraBars.Navigation
Imports DevExpress.XtraGrid
Namespace DXApplication
Partial Public Class Form1
Inherits XtraForm
Private navFrame As NavigationFrame
Private navPage1, navPage2 As NavigationPage
Private accordion As AccordionControl
Public Sub New()
InitializeComponent()
navFrame = New NavigationFrame() With {.Dock = DockStyle.Fill}
accordion = New AccordionControl() With {.Dock = DockStyle.Left}
Me.Controls.AddRange(New Control() { navFrame, accordion })
InitNavigationFramePages(navFrame)
InitAccordion(accordion)
accordion.SendToBack()
End Sub
Private Sub InitNavigationFramePages(ByVal frame As NavigationFrame)
' Initializes the first navigation page.
navPage1 = New NavigationPage() With {.Caption = "Tasks"}
navPage1.Controls.Add(New GridControl() With {
.Dock = DockStyle.Fill,
.DataSource = Task.GetSampleData()
})
' Initializes the second navigation page.
navPage2 = New NavigationPage() With {
.Caption = "Empty",
.BackColor = Color.Aqua
}
frame.Pages.AddRange(New NavigationPage() { navPage1, navPage2 })
End Sub
Private Sub InitAccordion(ByVal accordion As AccordionControl)
Dim group As New AccordionControlElement(ElementStyle.Group) With {
.Name = "accordionGroup1",
.Text = "Pages",
.Expanded = True
}
Dim item1 As New AccordionControlElement(ElementStyle.Item) With {
.Name = "accordionItem1",
.Text = "Page 1"
}
Dim item2 As New AccordionControlElement(ElementStyle.Item) With {
.Name = "accordionItem2",
.Text = "Page 2"
}
AddHandler item1.Click, AddressOf accordionElement_Click
AddHandler item2.Click, AddressOf accordionElement_Click
group.Elements.AddRange(New AccordionControlElement() { item1, item2 })
accordion.Elements.Add(group)
End Sub
Private Sub accordionElement_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim item As AccordionControlElement = TryCast(sender, AccordionControlElement)
navFrame.SelectedPage = If(item.Text = "Page 1", navPage1, navPage2)
End Sub
End Class
Public Class Task
Private fID As Integer
Public Sub New(ByVal id As Integer)
fID = id
CreateDate = Date.Today
End Sub
Public ReadOnly Property ID() As Integer
Get
Return fID
End Get
End Property
Public Property Caption() As String
Public Property CreateDate() As Date
Public Shared Function GetSampleData() As List(Of Task)
Return New List(Of Task)() From {
New Task(0) With {
.Caption = "Research",
.CreateDate = New Date(2022, 10, 15)
},
New Task(1) With {
.Caption = "UI Design",
.CreateDate = New Date(2022, 11, 5)
},
New Task(2) With {
.Caption = "Environment Setup",
.CreateDate = New Date(2022, 11, 10)
},
New Task(3) With {
.Caption = "Sprint 1",
.CreateDate = New Date(2022, 11, 11)
},
New Task(4) With {
.Caption = "Sprint 2",
.CreateDate = New Date(2022, 12, 12)
},
New Task(5) With {
.Caption = "Sprint 3",
.CreateDate = New Date(2023, 1, 10)
},
New Task(6) With {
.Caption = "Testing",
.CreateDate = New Date(2022, 2, 10)
}
}
End Function
End Class
End Namespace
Accordion Control allows you to create an unlimited number of element hierarchy levels. To do that, you need to create group elements, populate them with other groups that have their own child groups, etc.
accordionControl1.Elements.Clear();
// Root level elements
AccordionControlElement gr1 = new AccordionControlElement(ElementStyle.Group) { Text = "Root Group 1" };
AccordionControlElement i1 = new AccordionControlElement(ElementStyle.Item) { Text = "Item 1" };
AccordionControlElement i2 = new AccordionControlElement(ElementStyle.Item) { Text = "Item 2" };
AccordionControlElement gr2 = new AccordionControlElement(ElementStyle.Group) { Text = "Root Group 2" };
AccordionControlElement i3 = new AccordionControlElement(ElementStyle.Item) { Text = "Item 3" };
AccordionControlElement i4 = new AccordionControlElement(ElementStyle.Item) { Text = "Item 4" };
AccordionControlElement gr3 = new AccordionControlElement(ElementStyle.Group) { Text = "Root Group 3" };
AccordionControlElement i5 = new AccordionControlElement(ElementStyle.Item) { Text = "Item 5" };
AccordionControlElement i6 = new AccordionControlElement(ElementStyle.Item) { Text = "Item 6" };
// Level 2 elements
AccordionControlElement gr4 = new AccordionControlElement(ElementStyle.Group) { Text = "Level 2 Group 1" };
AccordionControlElement i7 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 2 Item 1" };
AccordionControlElement i8 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 2 Item 2" };
AccordionControlElement gr5 = new AccordionControlElement(ElementStyle.Group) { Text = "Level 2 Group 2" };
AccordionControlElement i9 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 2 Item 3" };
AccordionControlElement i10 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 2 Item 4" };
AccordionControlElement gr6 = new AccordionControlElement(ElementStyle.Group) { Text = "Level 2 Group 1" };
AccordionControlElement i11 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 2 Item 5" };
AccordionControlElement i12 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 2 Item 6" };
// Level 3 elements
AccordionControlElement gr7 = new AccordionControlElement(ElementStyle.Group) { Text = "Level 3 Group 1" };
AccordionControlElement i13 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 3 Item 1" };
AccordionControlElement i14 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 3 Item 2" };
AccordionControlElement gr8 = new AccordionControlElement(ElementStyle.Group) { Text = "Level 3 Group 2" };
AccordionControlElement i15 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 3 Item 3" };
AccordionControlElement i16 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 3 Item 4" };
AccordionControlElement gr9 = new AccordionControlElement(ElementStyle.Group) { Text = "Level 3 Group 1" };
AccordionControlElement i17 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 3 Item 5" };
AccordionControlElement i18 = new AccordionControlElement(ElementStyle.Item) { Text = "Level 3 Item 6" };
gr7.Elements.AddRange(new AccordionControlElement[] { i13, i14 });
gr8.Elements.AddRange(new AccordionControlElement[] { i15, i16 });
gr9.Elements.AddRange(new AccordionControlElement[] { i17, i18 });
gr4.Elements.AddRange(new AccordionControlElement[] { i7, i8, gr7 });
gr5.Elements.AddRange(new AccordionControlElement[] { i9, i10, gr8 });
gr6.Elements.AddRange(new AccordionControlElement[] { i11, i12, gr9 });
gr1.Elements.AddRange(new AccordionControlElement[] { i1, i2, gr4 });
gr2.Elements.AddRange(new AccordionControlElement[] { i3, i4, gr5 });
gr3.Elements.AddRange(new AccordionControlElement[] { i5, i6, gr6 });
accordionControl1.Elements.AddRange(new AccordionControlElement[] { gr1, gr2, gr3 });
accordionControl1.AllowItemSelection = true;
accordionControl1.ExpandAll();
accordionControl1.Elements.Clear()
' Root level elements
Dim gr1 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Root Group 1"}
Dim i1 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Item 1"}
Dim i2 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Item 2"}
Dim gr2 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Root Group 2"}
Dim i3 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Item 3"}
Dim i4 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Item 4"}
Dim gr3 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Root Group 3"}
Dim i5 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Item 5"}
Dim i6 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Item 6"}
' Level 2 elements
Dim gr4 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Level 2 Group 1"}
Dim i7 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 2 Item 1"}
Dim i8 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 2 Item 2"}
Dim gr5 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Level 2 Group 2"}
Dim i9 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 2 Item 3"}
Dim i10 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 2 Item 4"}
Dim gr6 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Level 2 Group 1"}
Dim i11 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 2 Item 5"}
Dim i12 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 2 Item 6"}
' Level 3 elements
Dim gr7 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Level 3 Group 1"}
Dim i13 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 3 Item 1"}
Dim i14 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 3 Item 2"}
Dim gr8 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Level 3 Group 2"}
Dim i15 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 3 Item 3"}
Dim i16 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 3 Item 4"}
Dim gr9 As New AccordionControlElement(ElementStyle.Group) With {.Text = "Level 3 Group 1"}
Dim i17 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 3 Item 5"}
Dim i18 As New AccordionControlElement(ElementStyle.Item) With {.Text = "Level 3 Item 6"}
gr7.Elements.AddRange(New AccordionControlElement() { i13, i14 })
gr8.Elements.AddRange(New AccordionControlElement() { i15, i16 })
gr9.Elements.AddRange(New AccordionControlElement() { i17, i18 })
gr4.Elements.AddRange(New AccordionControlElement() { i7, i8, gr7 })
gr5.Elements.AddRange(New AccordionControlElement() { i9, i10, gr8 })
gr6.Elements.AddRange(New AccordionControlElement() { i11, i12, gr9 })
gr1.Elements.AddRange(New AccordionControlElement() { i1, i2, gr4 })
gr2.Elements.AddRange(New AccordionControlElement() { i3, i4, gr5 })
gr3.Elements.AddRange(New AccordionControlElement() { i5, i6, gr6 })
accordionControl1.Elements.AddRange(New AccordionControlElement() { gr1, gr2, gr3 })
accordionControl1.AllowItemSelection = True
accordionControl1.ExpandAll()
See Also