Click here to Skip to main content
15,869,940 members
Articles / Programming Languages / Visual Basic

Easy WinForms Accordion Control

Rate me:
Please Sign up or sign in to vote.
4.88/5 (19 votes)
9 Jul 2012CPOL1 min read 136.1K   11.6K   45   29
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 (mine are rather homely). 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. Name it "table_Controls." Docked to the left, CellBorderStyle set to Inset. Give it seven rows and one column. After adding controls described below, set the top six rows SizeType properties to AutoSize. The bottom row is set to 100 percent. 

In rows one, three and five add a CheckBox. Set their FlatStyle property to Flat. Set TextAlign to MiddleCenter and ImageAlign to MiddleLeft. In rows two, four and six add Panel controls. Set their size to 188x150.

 

Add this code to the form:

'set the expanded height for the panels
Dim expHeight As Integer = 150

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

    'or use your down arrow image
    CheckBox1.Image = My.Resources.Expander_Collapsed16
    CheckBox2.Image = My.Resources.Expander_Collapsed16
    CheckBox3.Image = My.Resources.Expander_Collapsed16

    'Associate a Panel with each CheckBox
    CheckBox1.Tag = Panel1
    CheckBox2.Tag = Panel2
    CheckBox3.Tag = Panel3

End Sub

Private Sub ControlClick _
    (ByVal sender As System.Object, ByVal e As System.EventArgs) _
    Handles CheckBox1.Click, CheckBox2.Click, CheckBox3.Click

    'find out which checkbox was clicked
    Dim chkB As CheckBox = CType(sender, CheckBox)
    'get the panel tagged to the checkbox
    Dim pnl As Panel = CType(chkB.Tag, Panel)

    'loop thru the controls in the table and
    'check or uncheck, collapse or expand accordingly
    For Each ctrl As Control In table_Controls.Controls
        If ctrl.GetType.Equals(chkB.GetType) Then
            Dim chk As CheckBox = CType(ctrl, CheckBox)
            Dim p As Panel = CType(chk.Tag, Panel)

            If Object.ReferenceEquals(chk, chkB) AndAlso chk.Checked Then
                p.Height = expHeight
                chk.Image = My.Resources.Expander_Expanded16
            Else
                p.Height = 0
                chk.Image = My.Resources.Expander_Collapsed16
                chk.Checked = False
            End If
        End If
    Next
End Sub

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

History

  • First release July 6th 2012.
  • July 8th - uploaded demo project for download
  • June 20, 2015 - Uploaded bug-fix release to resolve Invalid Cast exception.

License

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


Written By
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

 
PraiseGreat post! Pin
marcelo iván rojas hernández5-Sep-18 4:31
marcelo iván rojas hernández5-Sep-18 4:31 
SuggestionHiding check mark Pin
Member 1192437611-May-17 7:19
Member 1192437611-May-17 7:19 
QuestionC# Pin
MalathiMals18-Feb-16 0:54
MalathiMals18-Feb-16 0:54 
AnswerRe: C# Pin
Alan Burkhart18-Feb-16 7:14
Alan Burkhart18-Feb-16 7:14 
PraiseNice Work Pin
Member 1209229527-Oct-15 11:10
Member 1209229527-Oct-15 11:10 
GeneralRe: Nice Work Pin
Alan Burkhart27-Oct-15 16:35
Alan Burkhart27-Oct-15 16:35 
QuestionError Pin
Rushang Patel2-Sep-15 19:55
Rushang Patel2-Sep-15 19:55 
AnswerRe: Error Pin
Alan Burkhart3-Sep-15 4:20
Alan Burkhart3-Sep-15 4:20 
QuestionWorking Fine. Pin
Rizwan Gazi20-Jun-15 22:05
Rizwan Gazi20-Jun-15 22:05 
AnswerRe: Working Fine. Pin
Alan Burkhart21-Jun-15 6:30
Alan Burkhart21-Jun-15 6:30 
QuestionProblem adding the controls in Panel Pin
Rizwan Gazi20-Jun-15 3:04
Rizwan Gazi20-Jun-15 3:04 
AnswerRe: Problem adding the controls in Panel Pin
Alan Burkhart20-Jun-15 6:05
Alan Burkhart20-Jun-15 6:05 
AnswerRe: Problem adding the controls in Panel Pin
Alan Burkhart20-Jun-15 7:56
Alan Burkhart20-Jun-15 7:56 
Generalcomment Pin
zudus14-Sep-14 11:26
zudus14-Sep-14 11:26 
GeneralRe: comment Pin
Alan Burkhart14-Sep-14 15:23
Alan Burkhart14-Sep-14 15:23 
QuestionVery good Pin
JLDevC#15-Aug-13 7:37
JLDevC#15-Aug-13 7:37 
AnswerRe: Very good Pin
Alan Burkhart15-Aug-13 14:19
Alan Burkhart15-Aug-13 14:19 
QuestionSimple and effective! Pin
Bill Lock24-Mar-13 5:01
Bill Lock24-Mar-13 5:01 
AnswerRe: Simple and effective! Pin
Alan Burkhart24-Mar-13 5:41
Alan Burkhart24-Mar-13 5:41 
Questionnice Pin
BillW336-Aug-12 4:19
professionalBillW336-Aug-12 4:19 
GeneralMy vote of 5 Pin
rctaubert9-Jul-12 6:58
rctaubert9-Jul-12 6:58 
QuestionDemo Project Pin
rctaubert9-Jul-12 2:56
rctaubert9-Jul-12 2:56 
AnswerRe: Demo Project Pin
Alan Burkhart9-Jul-12 7:25
Alan Burkhart9-Jul-12 7:25 
GeneralRe: Demo Project Pin
rctaubert9-Jul-12 10:07
rctaubert9-Jul-12 10:07 
GeneralRe: Demo Project Pin
Alan Burkhart9-Jul-12 12:13
Alan Burkhart9-Jul-12 12:13 

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

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