How to Use a WinForms Accordion Control in Your .NET 6 Application

The ComponentOne 2022 v2 release introduced our new Accordion control for .NET 6 applications. An accordion UI allows you to organize content into collapsible panels. This control also fills the gap created by our legacy .NET 4.5.2 TopicBar and OutBar controls.

In this blog, we will learn more about our new WinForms Accordion control and how to use it as a replacement in .NET 6 for TopicBar and OutBar controls.

Ready to try out the new Accordion control? Download ComponentOne Today!

Introduction to Accordion

The new Accordion control allows you to toggle between collapsing and expanding substantial amounts of content with texts, images, and other simple UI controls. It has a compact interface that allows the content to be organized in vertically stacked collapsible pages that can be set to expand in four different directions. It will enable you to expand a page and collapse all other pages, automatically organizing your UI and optimizing the use of screen real estate.

The Accordion control can expand in four different directions, namely up, right, down, and left. This allows you to change the direction in which the control expands. For more information, see the Expand Direction.

You can find the control in the new C1.Win.Accordion NuGet package.

Now that we know what the Accordion is and how it looks let us look at how to create the control and replace C1TopicBar and C1OutBar.

Working with Accordion

Accordion is a panel with items organized as stacked pages called Accordion Pages. Each page in Accordion comprises a page header and an expandable-collapsible content area. The page header contains a header text with expand/collapse icon, and the content area provides a placeholder to hold different controls.

 It has a user-friendly UI allowing you to easily expand or collapse the pages using the expand/collapse icon. Accordion provided you the ability to either allow only a single page to be expanded or multiple pages. You can also restrict collapsing so that at least one page is always open.

The following image shows an Accordion with an Accordion page that has a List box in its content area.

Creating C1Accordion

Accordion provides rich design-time features, including smart tags and a collection editor to add, remove and edit Accordion pages in the designer.

You can quickly and easily add multiple pages to the accordion from the smart-tag and set each header text. To add content to each page, use the following code where myChildControl represents the content control, such as a ListView:

c1Accordion1.Pages[0].Content.Controls.Add(myChildControl);

For more details on getting started, check out our Accordion quick start.

Replacing C1TopicBar

In C1TopicBar, each page contains links stacked vertically; each link can be clicked and used to perform an operation. We can create a similar UI by using the Accordion.

First, we need to allow expanding and collapsing of all Accordion Pages by setting the AllowExpandMany and AllowCollapseAll properties of the Accordion to true.

c1Accordion1.AllowExpandMany = true;
c1Accordion1.AllowCollapseAll = true;

Then to show links in our Accordion Pages, we will use the LinkLabel control in this sample. Now for every link that we add to the accordion page, we will set the following properties to make the link similar to a topic link:

label.Dock = DockStyle.Top;
label.TextAlign = ContentAlignment.MiddleLeft;
label.BackColor = c1Accordion1.Styles.Pages.Default.BackColor;
label.ForeColor = label.LinkColor = c1Accordion1.Styles.Pages.Default.ForeColor;
label.LinkBehavior = LinkBehavior.HoverUnderline;

And to get notified when a link is clicked, we can use the LinkClicked event of the LinkLabel.

label.LinkClicked += Label_LinkClicked;

After adding a few links to the Accordion Page, it will look like the following:

You can download and refer to the blog sample at the link below. You can also perform further customizations as per your requirements.

Replacing C1OutBar

In C1OutBar, a page contains a toolbar, or it can contain other controls. Since C1Toolbar has already been migrated to .NET 6, we can create a UI similar to C1OutBar with Accordion and C1Toolbar.

First, to create a page with the toolbar, we can just create an Accordion Page and add a C1Toolbar to its content area. If we want to add arbitrary controls, then we can also add that to the content area of the Accordion page, just like you would do on a page of C1OutBar.

After adding the content to the Accordion, we would get something like the image below:

You can download and refer to the blog sample.

You can also perform further customizations as per your requirements. We hope you like the new control and find it easy to use in your application. You can refer to the Accordion documentation here and the product sample here.

Ready to try out the new Accordion control? Download ComponentOne Today!