The Panel Web server control provides a container control within an ASP.NET web page that you can use as a parent for static text and other controls.
1. Background
You can use a Panel control as a container for other controls. This method is especially useful when you are creating content programmatically and need a way to insert the content into the page. The following sections describe other ways you can use the Panel control.
1. Container of dynamically generated controls
The Panel control provides a convenient container for controls created at run time.
2. Group controls and markers
A group of controls and related tags can be managed as a unit by placing them in a Panel control and then manipulating the Panel control. For example, you can hide or show a group of controls in a panel by setting the panel's Visible property.
3. A form with default buttons
You can place the TextBox control and the Button control in a Panel control, and then define a default button by setting the Panel control's DefaultButton property to the ID of a button in the panel. If the user presses Enter while typing in a text box within the panel, this has the same effect as if the user clicked a specific default button. This helps users work with project forms more efficiently.
4. Add scroll bars to other controls
Some controls (such as the TreeView control) do not have built-in scroll bars. You can add scrolling behavior by placing a scroll bar control within a Panel control. To add scroll bars to a Panel control, set the Height and Width properties, constrain the Panel control to a specific size, and then set the ScrollBars property.
4. Customized areas on the page
You can use the Panel control to create areas on the page with customized appearance and behavior, as follows:
·Create a group box with a title: You can set the GroupingText property to display the title. When the page renders, a box containing a title appears around the Panel control, with the title being the text you specify.
Note: You cannot specify scroll bars and grouped text at the same time in the Panel control. If grouped text is set, its priority is higher than the scroll bar.
·Create areas on the page with custom colors or other appearances: The Panel control supports appearance properties (such as BackColor and BorderWidth), which can be set to create a unique appearance for an area on the page.
Description: Setting the GroupingText property will automatically render a border around the Panel control.
2. How to: Add a Panel control to a Web Forms page
1. In "Design" view, from the "Standard" tab of the toolbox, drag the Panel control onto the page.
2. To create static text, click in the control and then type the text. To add controls, drag them from the Toolbox to the Panel control.
Note: To add static text to a Panel control at run time, you need to create a Literal control and set its Text property. Literal objects can then be added to the panel programmatically in the same way as any control. For more information about adding controls, see How to: Programmatically Add Controls to an ASP.NET Web Page.
3. You can also choose to drag the border of the panel to resize the control.
Description: This control automatically resizes itself to display all of its child controls (even if they exceed the set height).
4. You can also choose to set the properties of the Panel control (as described in the following table) to specify how the pane interacts with its child controls.
Property description
HorizontalAlign
Specifies the alignment of child controls within the panel (left, right, center, or justified).
Wrap
Specifies whether content that is too wide within the panel is wrapped to the next line, or is truncated at the edge of the panel.
Direction
Specifies whether the control's content is rendered from left to right or right to left. This property is useful when creating areas on the page that are oriented differently than the entire page.
ScrollBars
If you have set the Height and Width properties to limit the Panel control to a specific size, you can add scroll bars by setting the ScrollBars property.
GroupingText
Renders a border and title around the Panel control.
illustrate:
Setting the GroupingText property causes scroll bars to not appear (if you specify scroll bars).
3. Panel class
Panel controls are containers for other controls. This control is especially useful when you want to programmatically generate controls, hide/show a set of controls, or localize a set of controls.
The Direction property is useful for localizing the contents of a Panel control to display text in languages that are written from right to left, such as Arabic or Hebrew.
The Panel control provides several properties that allow you to customize the behavior and display of the control's contents. Use the BackImageUrl property to display a custom image for the Panel control. Use the ScrollBars property to specify scroll bars for the control.
Example
1. The following example illustrates how to use the Panel control to programmatically generate controls and hide/show a group of controls.
Note: The following code example uses a single-file code model and may not work properly when copied directly to a code-behind file. This code sample must be copied into an empty text file with an .aspx extension.
<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<title>Panel Example</title>
<script runat="server">
void Page_Load(Object sender, EventArgs e) {
// Show or hide the Panel contents.
if (Check1.Checked) {
Panel1.Visible=false;
}
else {
Panel1.Visible=true;
}
// Generate the Label controls.
int numlabels = Int32.Parse(DropDown1.SelectedItem.Value);
for (int i=1; i<=numlabels; i++) {
Label l = new Label();
l.Text = "Label" + (i).ToString();
l.ID = "Label" + (i).ToString();
Panel1.Controls.Add(l);
Panel1.Controls.Add(new LiteralControl("<br />"));
}
// Generate the Textbox controls.
int numtexts = Int32.Parse(DropDown2.SelectedItem.Value);
for (int i=1; i<=numtexts; i++) {
TextBox t = new TextBox();
t.Text = "TextBox" + (i).ToString();
t.ID = "TextBox" + (i).ToString();
Panel1.Controls.Add(t);
Panel1.Controls.Add(new LiteralControl("<br />"));
}
}
</script>
</head>
<body>
<h3>Panel Example</h3>
<form id="form1" runat="server">
<asp:Panel id="Panel1" runat="server"
BackColor="gainsboro"
Height="200px"
Width="300px">
Panel1: Here is some static content...
<br />
</asp:Panel>
<br />
Generate Labels:
<asp:DropDownList id="DropDown1" runat="server">
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:DropDownList>
<br />
Generate TextBoxes:
<asp:DropDownList id="DropDown2" runat="server">
<asp:ListItem Value="0">0</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
</asp:DropDownList>
<br />
<asp:CheckBox id="Check1" Text="Hide Panel" runat="server"/>
<br />
<asp:Button Text="Refresh Panel" runat="server"/>
</form>
</body>