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

Collapsible Panels in VB.NET

, 7 Sep 2004
Rate this:
Please Sign up or sign in to vote.
Expanding and collapsible panels implemented in VB.NET.

Introduction

I needed to display multiple panels with related but discrete functionality on a single form. Individually, each panel would contain different controls, yet, every panel would relate to the larger scope of the form. Since each panel would take various amounts of space to display, I would be limited to the number of panels I could display on a single form without the form becoming too busy and confusing. That is, unless the panels could collapse to a minimize size and re-expand to their normal size. I needed panel controls that could collapse and expand.

Background

The idea for a collapsing panel came as I worked with Microsoft Visio 2003 and Microsoft Visual Studio 2003. I noticed that Visio contained side panels that collapsed and expanded exactly as I desired, and in a similar fashion, Visual Studio provides an Outlining feature that collapses and expands regions of code. I needed the same functionality only applied to panels.

Figure 1 Figure 2

So, I knew the functionality I desired existed but I didn’t have a clue how to implement it or if a control existed to encapsulate it.

After a search on the Internet, I discovered several projects on the Code Project site:

These are all excellent solutions and any of them would have worked but the Collapsible Group Box and Expanding panel from jeffb42 better suited the needs and presentation motif of my application. The only problem was that I needed the code in VB.NET – not C#. So, I had to convert it.

Jeff’s code contained a Trashcan feature that I didn’t want so as I converted his C# code, I dropped the Trashcan icon and functionality. Great idea and kudos to Jeff for providing the feature but it was extraneous for my purpose. I also renamed the project, file names and some of the methods to match my preferred terminology.

To prove the conversion was successful, I duplicated his test application using my converted VB.NET code.

Figure 3

Additionally, I added a Minimize() method to initially display the panels in a minimized state. Now, I could display multiple panels in a vertical fashion – like a list - on a form.

Figure 4

Each panel scrolls as necessary when it is expanded.

Figure 5

Displaying panels in a vertical fashion that expanded as needed fulfilled my requirement to display many related panels on a single form without compromising the appearance of the form.

Using the Code

Thanks again to jeffb42 for producing excellent documentation in his article. I won’t attempt to improve on his documentation, but I’ll summarize the steps needed to setup and use the code. Since the code is built as a User Control, you’ll need to go through some additional steps to use it.

First, add the CollapsiblePanel controls to your Toolbox in Visual Studio.

  1. Open a Form
  2. Select "My User Controls" from the Toolbox
  3. Right-click in the Toolbox, and select the "Add/Remove Items..." menu item
  4. After the "Customize Toolbox" dialog displays, select the "Browse..." button, and navigate to the directory containing CollapsiblePanel.dll.
  5. Select CollapsiblePanel.dll.

The new controls should be visible in the toolbox.

Note: You may need to close and reopen the solution for the controls to appear.

After the CollapsiblePanel controls have been added to the Toolbox, create a class derived from CollapseGroupBox and add some standard WinForm controls to it. Generally, the standard WinForm controls are added to a CollapseGroupBoxe which, in turn, is added to a CollapsePanel.

Standard Winform Control -> CollapseGroupBoxe -> CollapsePanel

  1. From the Solution Explorer, right-click on the project, and choose “Add->User Control…” (or “Add Inherited Control…”)
  2. Edit the generated class. Change the base class from System.Windows.Forms to CollapseGroupBox:
    Public Class MyUserControl Inherits CollapseGroupBox
  3. Save the new inherited control, then switch to design view.
  4. Add some standard WinForm controls from the toolbox to the inherited form. Save it.
  5. Open the project’s main form and drop a CollapsePanel control from the Toolbox.
  6. Edit the main form's code to add the inherited class (from the steps above) to the CollapsePanel.
    Public Sub New()
        MyBase.New()
    
        'This call is required by the Windows Form Designer.
        InitializeComponent()
    
        CollapsePanel1.Add(new MyUserControl ())
    
    End Sub
  7. Compile and run.

Points of Interest

As previously mentioned, I added a Minimize() method to initially display the panels in a minimized state.

Public Sub Minimize()

To use it, simply call it before displaying the CollapseGroupBox object.

Dim myControl As MyUserControl = New MyUserControl()
myControl.Minimize()

Since, by default, the panels display in the expanded state, all I did to implement the Minimize() functionality was to simulate a click event. See the code for details.

Class Relationships

The following is a simple class diagram that shows the relationship of the classes in the project.

Figure 6

Future Enhancements

Since I converted jeffb42’s code, the same or similar issues and enhancements apply to mine. Currently, I don’t have specific plans to enhance the code - only to fix any bugs that exist as they appear in my particular application(s). If the need arises to enhance the application, I will do so, but, right now, the code works satisfactorily in the application(s) for which it was needed.

License

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

Share

About the Author

RoyClem
Architect
United States United States
Roy is a software developer who digs all aspects of software development, from design and architecture to implementation.

Comments and Discussions

 
GeneralMy vote of 5 Pinmembermanoj kumar choubey21-Feb-12 0:18 
General[My vote of 1] I Cannot add Controls to the Panel in my Form Pinmemberaaroncampf12-Dec-10 14:53 
GeneralMy vote of 5 PinmemberTushar Arora19-Nov-10 2:36 
NewsYes. No tool like this one! PinmemberTushar Arora19-Nov-10 2:33 
GeneralExpand panel during page load PinmemberNewbie_dydy855-Jul-07 15:51 
GeneralLooks like something... PinmemberRamon Tristani8-Sep-06 16:26 
GeneralRe: Looks like something... PinmemberRoyClem9-Sep-06 18:49 
GeneralRe: Looks like something... PinmemberRamon Tristani9-Sep-06 22:06 
GeneralTry NicePanel Pinmembertechnoguys3-Feb-06 10:55 
GeneralRe: Try NicePanel Pinmemberpsxp21-Aug-06 6:12 
GeneralNice - My alternative PinmemberTigerNige25-Dec-05 6:12 
GeneralResize when minimized causes problems Pinmemberchakoretti11-Nov-05 4:45 
GeneralRe: Resize when minimized causes problems PinmemberRoyClem14-Nov-05 2:06 
AnswerRe: Resize when minimized causes problems Pinmemberchakoretti15-Nov-05 0:39 
QuestionLicense? PinmemberJustin F.13-Jan-05 9:45 
AnswerRe: License? PinmemberRoyClem13-Jan-05 12:32 
GeneralRe: License? PinmemberJustin F.13-Jan-05 16:07 
GeneralHaving some problems, please help PinmemberSnuffles766-Nov-04 12:46 
GeneralRe: Having some problems, please help PinsussAnonymous8-Nov-04 2:26 
Generalhorizontal collapse Pinmemberanga20-Sep-04 4:20 
GeneralRe: horizontal collapse PinmemberRoyClem20-Sep-04 4:28 
Generalgood but PinsussAnonymous12-Sep-04 3:19 
GeneralRe: good but PinsussAnonymous12-Sep-04 3:20 
GeneralRe: good but PinmemberRoyClem15-Sep-04 3:49 

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.140926.1 | Last Updated 8 Sep 2004
Article Copyright 2004 by RoyClem
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid