How to Create a Panel in Visual Basic.NET
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”.
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.
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.
Before hiding the panel After hiding the panel
Thanks for reading and make sure to download the source files to get a better understanding of how the code works.
PanelControl-VB.zip
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”.
Code Block
Default.aspx
Add Panel, CheckBox, and Button controls.<asp:Panel ID="Panel1" runat="server" Height="75px" Width="75px" BorderStyle="Dashed">
Inside the Panel
</asp:Panel>
<asp:CheckBox ID="CheckBox1" runat="server" Text="Hide Panel Control" />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.
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.
Code Block
Default.aspx.vb
Set the Visible property to true or false depending if the CheckBox control is checked or not.
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
If CheckBox1.Checked = False Then
Panel1.Visible = True
Else
Panel1.Visible = False
End If
End Sub
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
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.
Before hiding the panel After hiding the panel
Thanks for reading and make sure to download the source files to get a better understanding of how the code works.
PanelControl-VB.zip
