Panel controls can serve as containers for other controls on a page. It controls the appearance and visibility of the controls it contains. It also allows generated control programming.
The basic syntax of panel controls is as follows:
<asp:Panel ID= "Panel1" runat = "server"></asp:Panel>Panel controls derive from the WebControl class. Therefore, it inherits all properties, methods, and events equally. It does not have any methods or events of its own. However, it has the following properties of its own:
| property | describe |
|---|---|
| BackImageUrl | The address of the panel background image. |
| DefaultButton | Gets or sets the identifier of the default button contained in the Panel control. |
| Direction | The direction of text in the panel. |
| GroupingText | Allow text to be grouped as a field. |
| HorizontalAlign | Aligns the content in the panel horizontally. |
| ScrollBars | Specifies the visibility and position of the scroll bars within the panel. |
| Wrap | Allow text to wrap. |
Let's start with a scroll panel with a specific height and width, and a simple border style. The scrollbar properties are set to two scrollbars, so both scrollbars are rendered at the same time.
The source file has the following panel label code:
<asp:Panel ID="Panel1" runat="server" BorderColor="#990000" BorderStyle="Solid" Borderstyle="width:1px" Height="116px" ScrollBars="Both"> This is a scrollable panel. <br /> <br /> <asp:Button ID="btnpanel" runat="server" Text="Button" /></asp:Panel>The panel appears as follows:
The following example demonstrates dynamic content generation. The user supplies the number of label controls and text boxes to be generated on the panel. Controls are generated programmatically.
Use the Properties window to change panel properties. When you select a control in Design view, the Properties window displays the properties of the specific control and allows you to change them without typing.
The source file of the example is as follows:
<form id="form1" runat="server"> <div> <asp:Panel ID="pnldynamic" runat="server" BorderColor="#990000" BorderStyle="Solid" Borderstyle="width:1px" Height="150px" ScrollBars="Auto" BackColor="#CCCCFF" Font-Names="Courier" HorizontalAlign="Center"> This panel shows dynamic control generation: <br /> <br /> </asp:Panel> </div> <table> <tr> <td>No of Labels:</td> <td> <asp:DropDownList ID="ddllabels" runat="server"> <asp:ListItem>0</asp:ListItem> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td>No of Text Boxes :</td> <td> <asp:DropDownList ID="ddltextbox" runat="server"> <asp:ListItem>0</asp:ListItem> <asp:ListItem Value="1"></asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem Value="4"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> <asp:CheckBox ID="chkvisible" runat="server" Text="Make the Panel Visible" /> </td> <td> <asp:Button ID="btnrefresh" runat="server" Text="Refresh Panel" /> </td> </tr> </table></form>The source code of the dynamically generated control behind the Page_Load event is:
public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) { //make the panel visible pnldynamic.Visible = chkvisible.Checked; //generating the lable controls: int n = Int32.Parse(ddllabels.SelectedItem.Value); for (int i = 1; i <= n; i++) { Label lbl = new Label(); lbl.Text = "Label" + (i).ToString(); pnldynamic.Controls.Add(lbl); pnldynamic.Controls.Add(new LiteralControl("<br />")); } //generating the text box controls: int m = Int32.Parse(ddltextbox.SelectedItem.Value); for (int i = 1; i <= m; i++) { TextBox txt = new TextBox(); txt.Text = "Text Box" + (i).ToString(); pnldynamic.Controls.Add(txt); pnldynamic.Controls.Add(new LiteralControl("<br />")); } }}When executed, the panel renders as:
