This tutorial will show you how to create a simple panel in Visual Basic.NET. This is possible with the Panel control, which is used as a container for other controls. This control is often used to produce controls by code and to display and hide groups of controls. In this tutorial we will create a simple panel that will hold text and will be hidden on the click of a button if desired by the user.

Setting Up

If you have not done so already, please create an empty web site. To do so, open Visual Studio and click File > New > Web Site. Using ‘Visual Basic’ as the template, select ASP.NET Empty Web Site, name the web site PanelControl-VB and click OK. Now right click the web site name in the solution explorer and click Add New Item. Using ‘Visual Basic’ as the template, select Web Form, leave the form name as Default.aspx and click add.

Step One

Open Default.aspx in source view and place Panel, CheckBox, and Button controls inside the div tags. Change the ‘Height’ and ‘Width’ of the Panel to “75px” and change the ‘BorderStyle’ to “Dashed” to create an outline of the panel. Change the ‘Text’ of the CheckBox to “Hide Panel Control” and the Button ‘Text’ to “Submit”.

The Message “Inside the Panel” is to let the user know where the panel is on the page in addition to the dashed border style we gave it. The CheckBox control will be used to determine if the user wants to hide the panel control or not and the Button control is to simply confirm the user’s choice and run the appropriate code.

Step Two

Now switch to design view and double click the Button control to generate a click event in the code behind. In Default.aspx.vb, you should now have a Button1_Click event method that will run each time the Button control is clicked. The goal of this method is to determine if the user selected the CheckBox control to hide the panel or not.

The visible property of the Panel control determines the visibility of the panel on the web site depending on the selection made by the user.

Output

Run the web site and you will see a panel outlined be dashes. Below it is a check box that has an option to hide the panel on the page. Select the ‘Hide Panel Control’ check box and click the ‘Submit’ button, the panel will be hidden on the page. To bring the panel back, simply deselect the check box and click submit.

panel 1

panel 2

Thanks for reading and make sure to download the source files to get a better understanding of how the code works.

Download Source Files