PRB: Templates That Are Applied Programmatically Are Not Rendering (311945)


The information in this article applies to:

  • Microsoft Mobile Internet Toolkit (MMIT)
This article was previously published under Q311945

SYMPTOMS

When you try to programmatically apply a mobile StyleSheet control that contains templates, you may find that the style is not applied. You may also notice that if you apply style templates declaratively at design time, changing the style programmatically (to a non-templated style) does not remove the previously-applied templates.

CAUSE

If you apply a StyleSheet that contains DeviceSpecific templates (such as a Header Template, or a Footer Template) programmatically in code as opposed to applying declaratively at design time, you need to set the StyleSheet before the templates are instantiated at run time. The StyleSheet is not applied if you set it in an event (such as a Page_Load event) that executes after the templates have been instantiated. The form's Init event executes prior to the templates being instantiated.
Mobile controls that support templating (ObjectList, List, and SelectionList) can have templates set in other events such as the Load event for the page.

RESOLUTION

You need to set the StyleReference for a Mobile Form in the form's Init event to change the templates dynamically. The following code demonstrates how to set the form's StyleReference property in the form's Init event.

To use the following code, in the textbox, type in the name of the Style (templateStyle1 or templateStyle2) that you want to be applied to the form, and then click the Change Style button: 
<%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage" AutoEventWireup="true" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

<mobile:Form id="Form1" runat="server" OnInit="TheForm_Init" >
	<mobile:TextBox id="txtStyle" runat="server" />
   <mobile:Label id="Label1" runat="server" Text="Fore Color" />
   <mobile:Command runat="server" Text="Change Style" ID="Command1" />
</mobile:Form>

<mobile:StyleSheet id="StyleSheet1" runat=server>
  <Style name="templateStyle1" BackColor="Green" ForeColor ="Blue">
    <DeviceSpecific> 
      <Choice> 
        <HeaderTemplate> 
          <mobile:Label id="Label2" runat="server">Header Template</mobile:Label> 
        </HeaderTemplate> 
        <FooterTemplate> 
          <mobile:Label id="Label3" runat="server">Footer Template</mobile:Label> 
        </FooterTemplate>
      </Choice> 
    </DeviceSpecific>
  </Style> 
  <Style Name="templateStyle2" BackColor="Brown" ForeColor ="Yellow">
    <DeviceSpecific> 
      <Choice> 
        <HeaderTemplate> 
          <mobile:Label id="Label2" runat="server">Header Template</mobile:Label> 
        </HeaderTemplate> 
        <FooterTemplate> 
          <mobile:Label id="Label3" runat="server">Footer Template</mobile:Label> 
        </FooterTemplate>
      </Choice> 
    </DeviceSpecific>
  </Style>
</mobile:StyleSheet>

<script runat="server" language="c#">

public void TheForm_Init(Object sender, EventArgs e)
{
	if(IsPostBack)
	{
		Form1.StyleReference = Request.Form["txtStyle"].ToString();
	}
}
</script>

STATUS

This behavior is by design.

MORE INFORMATION

Steps to Reproduce the Behavior

The following code defines a StyleSheet control at design time. The StyleSheet contains two Styles. One Style contains templates and the other does not. Clicking on one of the buttons programmatically changes the StyleReference on the form. When you run this sample code and click the Template Style button, the Style properties are applied to the form, but not to the templates.
<%@ Page language="c#" Inherits="System.Web.UI.MobileControls.MobilePage" AutoEventWireup="true" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>

<mobile:Form id="Form1" runat="server" >
   <mobile:Label id="Label1" runat="server" Text="Fore Color" />
   <mobile:Command runat="server" Text="Template Style" OnClick="ChangeToTemplateStyle" ID="Command1"/>
   <mobile:Command runat="server" Text="Simple Style" OnClick="ChangeToSimpleStyle" ID="Command2"/>
</mobile:Form>

<mobile:StyleSheet id="StyleSheet1" runat=server>
  <Style name="simpleStyle" BackColor="Green" ForeColor ="Blue"/> 
  <Style Name="templateStyle" BackColor="Brown" ForeColor ="Yellow" >
    <DeviceSpecific> 
      <Choice> 
        <HeaderTemplate> 
          <mobile:Label id="Label2" runat="server">Header Template</mobile:Label> 
        </HeaderTemplate> 
        <FooterTemplate> 
          <mobile:Label id="Label3" runat="server">Footer Template</mobile:Label> 
        </FooterTemplate>
          </Choice> 
    </DeviceSpecific>
  </Style>	
</mobile:StyleSheet>

<script runat="server" language="c#">

public void ChangeToTemplateStyle(Object sender, EventArgs e)
{
   Form1.StyleReference = "templateStyle";
}
public void ChangeToSimpleStyle(Object sender, EventArgs e)
{
   Form1.StyleReference = "simpleStyle";
}
</script>

REFERENCES

For additional information, click the following article number to view the article in the Microsoft Knowledge Base:

310898 HOW TO: Dynamically Create Data-Bound Templates Using Visual Basic .NET

Modification Type:MinorLast Reviewed:4/3/2006
Keywords:kbnofix kbprb kbServerControls kbtemplate KB311945
©2004 Microsoft Corporation. All rights reserved.