The Panel control is used as a container for other controls. It serves several functions:
To control the visibility of the controls it contains
To control the appearance of the controls it contains
To make it easier to generate controls programmatically
The Panel control is derived from WebControl and adds the properties shown in Table 4-16. The Panel control has no methods or events not inherited from the Control or WebControl classes. Specifically, there are no events raised by user interaction.
Table 4-16. Properties of the Panel control not inherited from Control or WebControl
|
Name |
Type |
Get |
Set |
Values |
Description |
|---|---|---|---|---|---|
|
|
String |
✗ |
✗ |
The URL of an image to display as background of the panel. If the image is smaller than the panel, it will be tiled. | |
|
|
ContentDirection |
✗ |
✗ |
|
Direction to display text in a container control. Default is |
|
|
string |
✗ |
✗ |
Causes the Panel to render to the browser as | |
|
|
HorizontalAlign |
✗ |
✗ |
|
Specifies the horizontal alignment of the contents. Default is |
|
|
ScrollBars |
✗ |
✗ |
|
Specifies the visibility and location of scrollbars. The default value is |
|
|
Boolean |
✗ |
✗ |
|
If |
The next example, PanelDemo, shown in Figure 4-20, contains two Panel controls. The first demonstrates how to control the appearance and visibility of child controls and how to add controls programmatically. The second panel demonstrates the use of the GroupingText, ScrollBars, and Wrap properties to control the appearance of the control.
The two Panel declarations in this example are highlighted in Example 4-34. The first one, with an ID of pnlDynamic, has some static content between the opening and closing Panel tags. The remainder of the content of this panel is added dynamically, depending on the values selected in the two drop-downs, ddlLabels, and ddlBoxes.
Example 4-34. default.aspx for PanelDemo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Panel Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Panel Controls</h1>
<h2>Dynamically Generated Controls</h2>
<asp:Panel ID="pnlDynamic" runat="server"
Height="150"
Width="80%"
BackColor="Beige"
Font-Names="Courier New"
HorizontalAlign="Center"
Style="padding:20px"
ScrollBars="Auto">
This is static content in the panel.
<br />This sentence is here to see the effect of changing
the padding values. Padding values can be specified in terms of
pixels (px), centimeters (cm), or percentage of the panel's
width (%).
<p /> <p />
</asp:Panel>
<table>
<tr>
<td>
Number of Labels:
</td>
<td>
<asp:DropDownList id=ddlLabels runat="server">
<asp:ListItem text="0" value="0" />
<asp:ListItem text="1" value="1" />
<asp:ListItem text="2" value="2" />
<asp:ListItem text="3" value="3" />
<asp:ListItem text="4" value="4" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
Number of TextBoxes:
</td>
<td>
<asp:DropDownList id=ddlBoxes runat="server">
<asp:ListItem text="0" value="0" />
<asp:ListItem text="1" value="1" />
<asp:ListItem text="2" value="2" />
<asp:ListItem text="3" value="3" />
<asp:ListItem text="4" value="4" />
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan=2>
</td>
</tr>
<tr>
<td>
<asp:CheckBox id="chkHide" runat="server"
text="Hide Panel" />
</td>
<td>
<asp:Button ID="Button1" runat="server"
text="Refresh Panel" />
</td>
</tr>
</table>
<hr/>
<h2>ScrollBars and Wrapping</h2>
<asp:Panel ID="pnlScroll" runat="server"
Height="200px"
Width="90%"
GroupingText="ScrollBars & Wrap">
<asp:Label ID="lblPanelContent" runat="server"></asp:Label>
</asp:Panel>
<br />
<table >
<tr>
<td align=right>
ScrollBars:
</td>
<td>
<asp:DropDownList id=ddlScrollBars runat="server"
AutoPostback=true
OnSelectedIndexChanged=
"ddlScrollBars_SelectedIndexChanged">
<asp:ListItem text="None" Selected=True/>
<asp:ListItem text="Auto" />
<asp:ListItem text="Both" />
<asp:ListItem text="Horizontal" />
<asp:ListItem text="Vertical" />
</asp:DropDownList>
</td>
<td align=right width=75>
Wrap:
</td>
<td>
<asp:RadioButtonList ID="rblWrap" runat="server"
AutoPostBack=true
RepeatDirection=Horizontal
OnSelectedIndexChanged=
"rblWrap_SelectedIndexChanged">
<asp:ListItem Text="True" Value="true" Selected=True/>
<asp:ListItem Text="False" Value="false" />
</asp:RadioButtonList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>This first panel has several attributes defined, including BackColor, Height (in pixels), Width (in percentage of the browser window), the font name (Font-Name), and the horizontal alignment (HorizontalAlign). (Note that this control does not have a property for vertical alignment.)
The Style attribute sets the padding to 20 pixels along each of the four sides. Alternatively, you can specify the padding along each side by including multiple values in the Style attribute, according to Table 4-17. So, for example, the following attribute would set the top, right, bottom, and left padding values to 20, 40, 60, and 20 pixels, respectively.
Style="padding:20px 40px 60px 20px"
The padding shortcuts from Table 4-17 work equivalently in Style attributes setting the border and margin values as well.
Table 4-17. Effect of multiple Padding values
|
Number of values |
Effect |
|---|---|
|
1 |
All four sides |
|
2 |
First value sets top and bottom, second value sets left and right |
|
3 |
First value sets top, second sets left and right, third sets bottom |
|
4 |
First value sets top, second sets right, third sets bottom, fourth sets left |
The Scrollbars attribute is set to Auto, which causes a horizontal or vertical scrollbar, or both, to be present only if necessary. Since the Wrap property is true by default, the static text will wrap within the space available; hence this first panel control will never require a horizontal scrollbar. However, as you add enough labels and/or text boxes to the panel, a vertical scrollbar will appear as necessary.
The value for the Height attribute is an integer representing the number of pixels. The px as part of the value is optional but does serve to self-document. For example, the following two lines are equivalent:
Height="250px" Height="250"
Alternatively, the Height can be expressed as a percentage, if it is contained within a fixed-size container, such as another Panel control. If it is not within a fixed-size container and it has no content, the panel will only be a single line high, no matter what percentage value is used.
If the Height attribute is missing, then the Panel control automatically sizes itself vertically to contain all of its children controls.
The Width attribute can be either an integer number of pixels or a percentage of the browser window. The latter is shown in this example. If the Width attribute is missing, the Panel control will default to a width of 100 percent.
Two static HTML tables are defined in PanelDemo to lay out the controls that will control the two panels. The first table, associated with the first panel control, contains two DropDownList controls, a CheckBox control, and a Button control.
None of the controls in the table associated with the first panel have its AutoPostBack property set. Therefore, to see any of the changes take effect, you need to click the button, which posts the form. When the form is posted, the Page_Load method, contained in Example 4-35, is run.
Example 4-35. Default.aspx.cs for PanelDemo
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// First do the panel w/ the dynamically generated controls
// Show/Hide Panel Contents
if (chkHide.Checked)
{
pnlDynamic.Visible = false;
}
else
{
pnlDynamic.Visible = true;
}
// Generate label controls
int numlabels = Int32.Parse(ddlLabels.SelectedItem.Value);
for (int i = 1; i <= numlabels; i++)
{
Label lbl = new Label();
lbl.Text = "Label" + (i).ToString();
lbl.ID = "Label" + (i).ToString();
pnlDynamic.Controls.Add(lbl);
pnlDynamic.Controls.Add(new LiteralControl("<br />"));
}
// Generate textbox controls
int numBoxes = Int32.Parse(ddlBoxes.SelectedItem.Value);
for (int i = 1; i <= numBoxes; i++)
{
TextBox txt = new TextBox();
txt.Text = "TextBox" + (i).ToString();
txt.ID = "TextBox" + (i).ToString();
pnlDynamic.Controls.Add(txt);
pnlDynamic.Controls.Add(new LiteralControl("<br />"));
}
// Next take care of the Scrollbar panel.
string strText = "<p>Four score and seven years ago our fathers brought forth,
upon this continent, a new nation, conceived in liberty, and dedicated to the
proposition that \"all men are created equal.\"</p>";
strText += "<p>Now we are engaged in a great civil war, testing whether that
nation, or any nation so conceived, and so dedicated, can long endure. We are met on a
great battle field of that war. We have come to dedicate a portion of it, as a final
resting place for those who died here, that the nation might live. This we may, in all
propriety do. But, in a larger sense, we can not dedicate -- we can not consecrate --
we can not hallow, this ground -- The brave men, living and dead, who struggled here,
have hallowed it, far above our poor power to add or detract. The world will little
note, nor long remember what we say here; while it can never forget what they did
here.</p>";
strText += "<p>It is rather for us, the living, we here be dedicated to the
great task remaining before us -- that, from these honored dead we take increased
devotion to that cause for which they here, gave the last full measure of devotion --
that we here highly resolve these dead shall not have died in vain; that the nation,
shall have a new birth of freedom, and that government of the people by the people for
the people, shall not perish from the earth.</p>";
lblPanelContent.Text = strText;
}
protected void ddlScrollBars_SelectedIndexChanged(object sender,
EventArgs e)
{
DropDownList ddl= (DropDownList)sender;
string strValue = ddl.SelectedValue;
ScrollBars scrollBar =
(ScrollBars)Enum.Parse(typeof(ScrollBars), strValue);
pnlScroll.ScrollBars = scrollBar;
}
protected void rblWrap_SelectedIndexChanged(object sender, EventArgs e)
{
RadioButtonList rbl = (RadioButtonList)sender;
pnlScroll.Wrap = Convert.ToBoolean(rbl.SelectedValue);
}
}The first half of the Page_Load method takes care of the first panel control, and the second half deals with the second panel control. Still focusing on the first panel, an if-else block turns on or off the visibility of the panel. When the panel is not visible, it contents are not visible either. Likewise, when the panel is visible, all of its contents are visible.
There are two for loops, one each for labels and text boxes, which generate the contained controls. After converting the entry in the appropriate DropDownList control to an integer, the for loop iterates through the procedure the specified number of times.
The procedure is similar in each of the two cases. A new control is instantiated, then the Text and ID properties are assigned. The control is added to the Controls collection of the panel, and finally a LiteralControl containing some HTML is added to the collection as well.
The font name specified inside the Panel tags affected the static text and labels in the panel but not the contents of the text boxes.
The second panel, pnlScroll, has only three attributes declared (other than ID and runat): Height, Width, and GroupingText. The first two were described previously. GroupingText has the effect of putting a border around the panel with the string value of the GroupingText property as a caption within the border.
In this panel, the only content is a Label control, lblPanelContent. The Text property of lblPanelContent is set in the Page_Load method to the rather lengthy text string contained in the variable strText. This text string contains some HTML paragraph elements to force line breaks.
The two controls associated with this panel are a drop-down list setting the value of the Scrollbars property, and a radio button list setting the Wrap property. AutoPostback is set to true for both of these, so no further user action is required to see them take effect.
In the event handler for the SelectedIndexChanged event of the drop-down list, ddlScrollBars_SelectedIndexChanged, highlighted in Example 4-35, the Scrollbars property of the panel is set. The technique of setting the value from the ScrollBars enumeration is exactly as described previously in Example 4-31 for the BulletedListDemo example.
In the event handler method for the SelectedIndexChanged event of the radio button list, also highlighted in Example 4-35, a reference to the radio button list is obtained by casting sender to a variable of type RadioButtonList. Then the Wrap property of pnlScroll is set appropriately by converting the SelectedValue of the control to a Boolean.
If the text string in strText did not have any HTML tags in it, then it would display a single, very long line if Wrap is set to false. As it is, with each “line” enclosed in the paragraph tags, when Wrap is set to false, it displays as three separate lines.
Get Programming ASP.NET, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
