Panel Control

Article
09/14/2006

The Panel control provides a grouping mechanism for organizing controls. Panel controls can be recursively nested within a Form control — the Panel control's outermost container. A panel renders the controls contained inside itself.

Style attributes that are set on a panel can be inherited by other controls contained in that same panel.

Mobile Controls Syntax

Required properties, defaults, and code-featured elements are noted in bold type.

<mobile:Panel
   runat="server" 
   id="id"
   Font-Name="fontName"
   Font-Size="{NotSet|Normal|Small|Large}"
   Font-Bold="{NotSet|False|True}"
   Font-Italic="{NotSet|False|True}"
   ForeColor="foregroundColor"
   BackColor="backgroundColor"
   Alignment="{NotSet|Left|Center|Right}"
   StyleReference="styleReference"
   Wrapping="{NotSet|Wrap|NoWrap}"

Place child controls here.

</mobile:Panel>

Constructors

Constructor	Description
Panel	Initializes a new instance of the Panel class.

Containment Rules

The following controls can contain a Panel control.

Control	Comments
System.Web.UI.MobileControls.Form	Can contain any number of Panel controls.
System.Web.UI.MobileControls.Panel	Can contain any number of Panel controls.

A Panel control can contain the following controls.

Control	Comments
System.Web.UI.MobileControls.Panel	A Panel control can contain any number of other Panel controls.
All members of System.Web.UI.MobileControls, except MobilePage, Form, and StyleSheet objects.	A Panel control can contain any other ASP.NET mobile control, other than MobilePage, Form, or StyleSheet controls.

Device Templates

Template	Description
ContentTemplate	You can use the content template to create a device-specific panel. If the selected template set contains a content template, the content template replaces the entire contents of the panel.

Device-Specific Behavior

Panel controls do not have a visual representation. The layout of panel groupings across pages or cards is determined by the implementation.

Any style properties that are set on a panel and that cascade down to the individual controls are dealt with by those controls in a device-specific manner.

Example

This example demonstrates multiple label controls in each panel of a Form control; thus, you do not need to specify the style for each of the multiple controls. For example, the first panel's style is set to a bold font, which is inherited by the Label control. The result is that the words are displayed on the screen in bold font (the inherited style). This example also shows how the Label control's text can be set through scripting and also through setting the text property of the control.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" %>
<%@ Register TagPrefix="mobile"
    Namespace="System.Web.UI.MobileControls"
    Assembly="System.Web.Mobile" %>

<mobile:Form runat="server">
   <mobile:Panel runat="server" Font-Bold="true">
      <mobile:Label runat="server">Aardvark</mobile:Label>
      <mobile:Label runat="server" text="Bear" />
   </mobile:Panel> 
   <mobile:Panel runat="server" Font-Italic="true">
      <mobile:Label runat="server">Cheetah</mobile:Label>
      <mobile:Label runat="server" text="Dingo" />
   </mobile:Panel>
</mobile:Form>

Share via