Click here to Skip to main content
Click here to Skip to main content
Go to top

Easy WinForms Accordion Control

, 9 Jul 2012
Rate this:
Please Sign up or sign in to vote.
Quick and dirty Accordion control for WinForms in about 50 lines of code.

Introduction 

An easy way to add Accordion control functionality to any WinForms project. No 3rd-party tools, no headaches. Note that it is not the intent here to build something you can add to your VS Tool Box. It merely demonstrates one way to quickly add Accordion functionality to a form.

Using the code 

You can download the demo project, or if you prefer add controls to a project of your own as shown below.

To build your own...

First, you'll need two 16x16 arrow images - one Up arrow and one Down arrow. There are tons of them freely available on the Internet, and you probably already have at least a few. Add the images to My.Resources. You'll need to edit the images' file names in the code.

Create a new VB.Net WinForms project and add the following controls:

A TableLayoutPanel to hold all other controls. Docked to the left, CellBorderStyle set to Inset. Give it four rows and one column. After adding controls described below, set the top three rows SizeType properties to AutoSize. The bottom row is set to 99 percent. 

In each of the table's top three rows, add...

A Panel control, with its MinimumSize property set to 150,0. No border. Set the DockStyle to Fill.

In each Panel, add a Label control. AutoSize set to False, DockStyle set to Top, ImageAlign set to MiddleLeft, TextAlign set to MiddleCenter. No border. Set the labels' BackColor property to a slightly darker color than your system's Control color.

Add this code to the form:

Private Sub Form1_Load _
    (ByVal sender As Object, ByVal e As System.EventArgs) _
    Handles Me.Load
    'collapse all the panels
    Panel1.Height = 25
    Panel2.Height = 25
    Panel3.Height = 25

    Label1.Image = My.Resources.Expander_Collapsed16 'use your down arrow image
    Label2.Image = My.Resources.Expander_Collapsed16 'use your down arrow image
    Label3.Image = My.Resources.Expander_Collapsed16 'use your down arrow image

End Sub
 
Private Sub ButtonClick _
    (ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles Label1.Click, Label2.Click, Label3.Click

    'find out which label was clicked
    Dim lbl As Label = CType(sender, Label)
    'find the panel containing the label
    Dim pnl As Panel = lbl.Parent

    '### this assumes that no other controls are present in the main table ###
    'the code loops through the panels in the table and expands/collapses
    'each panel according to whether it contains the clicked label. The label
    'images are also swapped depending on the height of the panel.
    For Each p As Panel In TableLayoutPanel1.Controls
        Dim l As Label = CType(p.Controls(0), Label)
        If p.Equals(pnl) Then
            'expand or collapse the panel
            If p.Height = 150 Then
                p.Height = 25
                'Change the image name to YOUR image
                l.Image = My.Resources.Expander_Collapsed16
            Else
                p.Height = 150
                'Change the image name to YOUR image
                l.Image = My.Resources.Expander_Expanded16
            End If

        Else
            p.Height = 25
            'Change the image name to YOUR image
            l.Image = My.Resources.Expander_Collapsed16
        End If
    Next

End Sub

Click any label to expand / collapse it. The code automatically collapses an expanded panel when you click on another panel's label.

History

First release July 6th 2012.

July 8th - uploaded demo project for download

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Alan Burkhart

United States United States
I'm not an IT guy. Programming has been a hobby for me (and occasionally useful) ever since a sister in-law introduced me to a TI-99 4/A about a million years ago.
 
The creative challenge is relaxing and enjoyable. As such, I'd never mess up a fun hobby by doing it for a living.
 
Now, if I can just get Code Project to add "Truck Driver" to the list of job titles in the profiles...

Comments and Discussions

 
Generalcomment Pinmemberzudus14-Sep-14 11:26 
GeneralRe: comment PinmemberAlan Burkhart14-Sep-14 15:23 
QuestionVery good PinmemberJLDevC#15-Aug-13 7:37 
AnswerRe: Very good PinmemberAlan Burkhart15-Aug-13 14:19 
QuestionSimple and effective! PinmemberMember 433376524-Mar-13 5:01 
AnswerRe: Simple and effective! PinmemberAlan Burkhart24-Mar-13 5:41 
Questionnice PinmemberCIDev6-Aug-12 4:19 
GeneralMy vote of 5 Pinmemberrctaubert9-Jul-12 6:58 
QuestionDemo Project Pinmemberrctaubert9-Jul-12 2:56 
AnswerRe: Demo Project PinmemberAlan Burkhart9-Jul-12 7:25 
GeneralRe: Demo Project Pinmemberrctaubert9-Jul-12 10:07 
GeneralRe: Demo Project PinmemberAlan Burkhart9-Jul-12 12:13 
GeneralRe: Demo Project Pinmemberrctaubert9-Jul-12 12:25 
GeneralRe: Demo Project PinmemberAlan Burkhart9-Jul-12 12:28 
GeneralRe: Demo Project Pinmemberrctaubert9-Jul-12 13:02 
GeneralRe: Demo Project PinmemberAlan Burkhart9-Jul-12 13:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140921.1 | Last Updated 9 Jul 2012
Article Copyright 2012 by Alan Burkhart
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid