Microsoft KB Archive/311945

= PRB: Templates That Are Applied Programmatically Are Not Rendering =

Article ID: 311945

Article Last Modified on 4/3/2006

-

APPLIES TO


 * Microsoft Mobile Internet Toolkit 1.0

-



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=&quot;c#&quot; Inherits=&quot;System.Web.UI.MobileControls.MobilePage&quot; AutoEventWireup=&quot;true&quot; %> <%@ Register TagPrefix=&quot;mobile&quot; Namespace=&quot;System.Web.UI.MobileControls&quot; Assembly=&quot;System.Web.Mobile&quot; %>

    

     Header Template </HeaderTemplate> <FooterTemplate> Footer Template</mobile:Label> </FooterTemplate> </Choice> </DeviceSpecific> </Style> <Style Name=&quot;templateStyle2&quot; BackColor=&quot;Brown&quot; ForeColor =&quot;Yellow&quot;> <DeviceSpecific> <Choice> <HeaderTemplate> Header Template</mobile:Label> </HeaderTemplate> <FooterTemplate> Footer Template</mobile:Label> </FooterTemplate> </Choice> </DeviceSpecific> </Style> </mobile:StyleSheet>

<script runat=&quot;server&quot; language=&quot;c#&quot;>

public void TheForm_Init(Object sender, EventArgs e) { if(IsPostBack) {       Form1.StyleReference = Request.Form[&quot;txtStyle&quot;].ToString; } }

<div class="status_section">

STATUS
This behavior is by design.

<div class="moreinformation_section">

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=&quot;c#&quot; Inherits=&quot;System.Web.UI.MobileControls.MobilePage&quot; AutoEventWireup=&quot;true&quot; %> <%@ Register TagPrefix=&quot;mobile&quot; Namespace=&quot;System.Web.UI.MobileControls&quot; Assembly=&quot;System.Web.Mobile&quot; %>

<mobile:Form id=&quot;Form1&quot; runat=&quot;server&quot; >  <mobile:Command runat=&quot;server&quot; Text=&quot;Template Style&quot; OnClick=&quot;ChangeToTemplateStyle&quot; ID=&quot;Command1&quot;/> <mobile:Command runat=&quot;server&quot; Text=&quot;Simple Style&quot; OnClick=&quot;ChangeToSimpleStyle&quot; ID=&quot;Command2&quot;/> </mobile:Form>

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

<script runat=&quot;server&quot; language=&quot;c#&quot;>

public void ChangeToTemplateStyle(Object sender, EventArgs e) { Form1.StyleReference = &quot;templateStyle&quot;; } public void ChangeToSimpleStyle(Object sender, EventArgs e) { Form1.StyleReference = &quot;simpleStyle&quot;; }

<div class="references_section">