3.9　Panel控件

Panel控件为Web页面内提供了一种容器控件，可以作为其他控件的容器。此控件作为HTML＜div＞元素在Web页面上呈现，可以将它用做静态文本和其他控件的父级。当然，为了页面能够灵活控制，还可以以编程方式生成控件以及显示和隐藏控件组。

同其他服务器控件一样，Panel控件也提供了许多属性，如表3-8所示。可以通过设置这些属性，以指定面板与其子控件的交互方式。

在实际开发中，Panel控件主要有如下几方面的应用：

1）在页面里对控件和标记进行分组。对于一组控件和相关的标记，可以通过把其放置在Panel控件中，然后操作此Panel控件的方式将它们作为一个单元进行管理。例如，可以通过设置面板的Visible属性来隐藏或显示该面板中的一组控件。示例如下面的代码所示：

＜form id="form1"runat="server"＞

＜asp:Panel ID="Panel1"runat="server"

Width="260px"HorizontalAlign="Left"

Wrap="true"GroupingText="员工基础信息"＞

姓名：＜asp:TextBox ID="TextBox1"Width="160px"

runat="server"＞＜/asp:TextBox＞

＜br/＞

电话：＜asp:TextBox ID="TextBox2"Width="160px"

runat="server"＞＜/asp:TextBox＞

＜br/＞

地址：＜asp:TextBox ID="TextBox3"Width="160px"

runat="server"＞＜/asp:TextBox＞

＜/asp:Panel＞

＜asp:Panel ID="Panel2"runat="server"

Width="260px"HorizontalAlign="Center"Wrap="true"

GroupingText="员工附加信息"Visible="false"＞

工作经验：＜asp:TextBox ID="TextBox4"TextMode="MultiLine"

Height="40px"Width="160px"runat="server"＞＜/asp:TextBox＞

＜/asp:Panel＞

＜asp:Button ID="ViewPanel2"runat="server"

Text="显示员工附加信息"OnClick="ViewPanel2_Click"/＞

＜/form＞

在上面的代码中，添加了两个Panel控件：Panel1和Panel2。其中Panel1用来添加员工的基础信息；而Panel2用来添加员工的附加信息，默认为不显示。当用户需要添加员工附加信息的时候，可以通过单击ViewPanel2按钮触发OnClick事件来显示Panel2。ViewPanel2按钮的OnClick事件代码如下：

protected void ViewPanel2_Click(object sender, EventArgs e）

{

//在页面上显示添加员工附加信息

Panel2.Visible=true；

//隐藏按钮控件

ViewPanel2.Visible=false；

}

编译上面的程序，运行结果如图3-5所示。

如图3-5所示，现在只有Panel1控件被显示，可以通过单击页面上的“显示员工附加信息”按钮来显示Panel2控件。运行结果如图3-6所示。

图　3-5　Panel控件示例1

图　3-6　Panel控件示例2

2）定义具有默认按钮的窗体。可将TextBox控件和Button控件放置在Panel控件中，然后通过将Panel控件的DefaultButton属性设置为面板中某个按钮的ID来定义一个默认的按钮。如果用户在面板内的文本框中进行输入时按“Enter”键，这与用户单击特定的默认按钮具有相同的效果。这个功能可以加强用户体验和系统的操作方便性，有助于用户更有效地使用项目窗体。示例如下面的代码所示：

＜form id="form1"runat="server"＞

＜asp:Panel ID="Panel1"runat="server"Width="260px"

HorizontalAlign="Left"Wrap="true"

GroupingText="员工基础信息"DefaultButton="Save"＞

姓名：＜asp:TextBox ID="TextBox1"Width="160px"

runat="server"＞＜/asp:TextBox＞

＜br/＞

电话：＜asp:TextBox ID="TextBox2"Width="160px"

runat="server"＞＜/asp:TextBox＞

＜br/＞

地址：＜asp:TextBox ID="TextBox3"Width="160px"

runat="server"＞＜/asp:TextBox＞

＜asp:Button ID="Save"runat="server"

Text="保存员工基础信息"OnClick="Save_Click"/＞

＜/asp:Panel＞

＜/form＞

在上面的代码中，当用户添加完这些员工基础信息之后，按“Enter”键就可以触发Button按钮的OnClick事件Save_Click，这与直接用鼠标单击Button按钮的效果一样。

3）动态生成的控件的容器。Panel控件为在运行时创建的控件提供了一个方便的容器，你可以使用程序很方便地创建它。

4）向其他控件添加滚动条。有些控件（如TreeView控件）没有内置的滚动条。通过在Panel控件中放置滚动条控件，可以添加滚动行为。若要向Panel控件添加滚动条，请设置Height和Width属性，将Panel控件限制为特定的大小，然后再设置ScrollBars属性。

5）页面上自定义区域。你可以使用Panel控件在页面上创建具有自定义外观和行为的区域。

如上面的示例，可以创建一个带标题的分组框，可设置GroupingText属性来显示标题。呈现页面时，Panel控件的周围将显示一个包含标题的框，其标题是你指定的文本。在这里值得注意的是，不能在Panel控件中同时指定滚动条和分组文本。如果设置了分组文本，其优先级高于滚动条。

在页上创建具有自定义颜色或其他外观的区域。Panel控件支持外观属性（例如BackColor和BorderWidth)，可以设置外观属性为页面上的某个区域创建独特的外观。值得注意的是，设置GroupingText属性将自动在Panel控件周围呈现一个边框。