Introduction to the DeviceSpecific Control
For container controls, the ASP.NET mobile designer represents the <DeviceSpecific> markup language element as a special control. The designer's DeviceSpecific control provides developers with a straightforward and intuitive method of targeting the appearance of Form and Panel controls to specific types of hardware devices.
DeviceSpecific controls can be attached only to container controls. The easiest way to add them to a page is to drag them from the Toolbox onto any Form or Panel control, and configure them through the Properties window. The following figure illustrates the appearance of the DeviceSpecific control on a Form or Panel control.
Whenever you place a DeviceSpecific control within a Form or Panel control, the designer displays the control ID on the top line of the control. In addition, the DeviceSpecific control displays information about the current TemplateDeviceFilter property, which, by default, is not set to a value.
After you add a DeviceSpecific control to a container control, select Templating Options from the shortcut menu to define and apply device filters to the container. Like other types of controls, container controls use device filters to detect what type of hardware is displaying the current ASP.NET mobile Web Forms page. Applying device filters to a container enables developers to create templates for the container. It also provides the ability to set the container's property override values.
Choosing a device filter for the DeviceSpecific control results in the name of the current filter appearing in the Template Device Filter property in the designer's on-screen rendering of the control. The designer does not render the container by using the templates associated with the current filter. However, when the container is displayed on a mobile device or mobile device emulator that matches the property being evaluated by the device filter, ASP.NET renders the container according to the templates and property override values.
In the designer, you can only edit the templates and property override values of the current device filter. However, you can change the current filter at any time during your design work. To use a different device filter from the current filter, select Templating Options from the shortcut menu or use the TemplateDeviceFilter property in the Properties window.
Only one DeviceSpecific control can be applied to a Form or Panel control. It is possible to drag additional DeviceSpecific controls into a Form or Panel control. However, only the first DeviceSpecific control affects the container control. All additional DeviceSpecific controls display error messages indicating that they should be removed.
The <DeviceSpecific> Tag and the ASP.NET Mobile Designer
It is possible to create mobile Web Forms pages that contain markup language, such as HTML, without using the ASP.NET Mobile Designer. If you do this, please be aware that the requirements for the <DeviceSpecific> tag inside a container control differ between ASP.NET Mobile Designer and ASP.NET. For ASP.NET, a DeviceSpecific construct inside a container control can be represented as the tag <DeviceSpecific>. It can also be represented as a server control, as follows.
<mobile:DeviceSpecific runat="server" />
Either way, ASP.NET will interpret the construct correctly. However, for the designer, the DeviceSpecific construct must be represented as a server control with a namespace and the runat="server" attribute.
It is highly recommended to manually add the namespace and runat attribute in mobile Web Forms pages created outside the Visual Studio .NET development environment before you open them by using the designer. If you do not insert them yourself, the designer inserts them automatically. When it does, it also converts all markup language tags inside the containing Form or Panel control to uppercase. For example, the following page fragment shows the DeviceSpecific construct represented as a <DeviceSpecific> tag.
<mobile:Form id="Form1" runat="server"> <DeviceSpecific> <Choice Xmlns="http://schemas.microsoft.com/mobile/html32template"> <HeaderTemplate> <table runat="server" style='font-size:8pt;color:blue;background-color:yellow'> <tr> <td>Form Header</td> </tr> </table> </HeaderTemplate> <FooterTemplate> <table runat="server" style='font-size:8pt;color:white;background-color:red'> <tr> <td>Form Footer</td> </tr> </table> </FooterTemplate> </Choice> </DeviceSpecific> <mobile:Label id="Label1" runat="server"> Form with a header and footer. </mobile:Label> </mobile:Form>
The designer converts that page fragment so that it represents the DeviceSpecific construct as a control, as shown in the following code.
<mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> <CHOICE Xmlns="http://schemas.microsoft.com/mobile/html32template"> <HEADERTEMPLATE> <TABLE style="FONT-SIZE: 8pt; COLOR: blue; BACKGROUND-COLOR: yellow" runat="server"> <TR> <TD>Form Header</TD> </TR> </TABLE> </HEADERTEMPLATE> <FOOTERTEMPLATE> <TABLE style="FONT-SIZE: 8pt; COLOR: white; BACKGROUND-COLOR: red" runat="server"> <TR> <TD>Form Fooder</TD> </TR> </TABLE> </FOOTERTEMPLATE> </CHOICE> </mobile:DeviceSpecific> <mobile:Label id="Label1" runat="server">Form with a header and footer.</mobile:Label> </mobile:Form>