Providing Style on Mobile Pages

Description

The interesting part of Life is Style When I was in College I still Remember the importance of that "Stylo" Tag. If any one from that field is reading this Article must been thorough with that all which I said in that one word. Anyway here I am talking about StyleSheet Control Provided with Mobile Internet Toolkit. You all must be known what is Cascaded Style Sheet in Web Page Designing. The same concept in a refined form to suit with the Mobile Screen is been applied in the StyleSheet Control of Mobile Internet Toolkit.

StyleSheet been diveded here as

Inbuilt StyleSheet :There are three inbuilt StyleSheet for Title,error and subCommand and you can overright these StyleSheet.
While there is something like user Defined StyleSheet where you can define the Style in ur own way and then can call that style for whatever Control you want.

Here the example i am giving is the one in which i am using a .ascx file where i am defining my StyleSheet and all the Styles which i will call in my main page for various Control.

Source Code:

First Check out here the mystyle.ascx

<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<mobile:StyleSheet runat="server" ID="Stylesheet1">
<Style name="Shivani" Font-Name="Arial" />
<Style name="myForm" StyleReference="Shivani" BackColor="Yellow"
ForeColor="#f0000f" />
<Style name="myTitle" Font-Size="Large" />
</mobile:StyleSheet>

How you will use these Style in your main Code just Check out the Code over here StyleSheet.aspx.

<%@ Page Inherits="System.Web.UI.MobileControls.MobilePage" Language="cs" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<script runat="server" language="c#">
string welcome;
protected void Command_OnClick(Object sender, EventArgs e)
{
welcome = "Welcome " + NameEdit.Text + "to the Style World!";
ActiveForm = SecondForm;
}
protected void SecondForm_OnActivate(Object sender, EventArgs e)
{
Greeting.Text = welcome;
}
</script>
<mobile:StyleSheet runat="server" ReferencePath="mystyle.ascx"
ID="Stylesheet1"/>
<mobile:Form runat="server" id="FirstForm" StyleReference="myForm">
<mobile:Label runat="server" StyleReference="myTitle" ID="Label1">ur name please?
/mobile:Label>
<mobile:TextBox runat="server" id="NameEdit" ForeColor="#000000" />
<mobile:Command runat="server" OnClick="Command_OnClick" Text="Go!"
ID="Command1"/>
</mobile:Form>
<mobile:Form runat="server" id="SecondForm"
OnActivate="SecondForm_OnActivate" StyleReference="myForm">
<mobile:Label runat="server" id="Greeting" StyleReference="myTitle" />
<mobile:Link runat="server" NavigateURL="#FirstForm" Text="Return to Start"
ID="Link1"/>
</mobile:Form>

Here the Title other in built Style is been default so if u don`t want to specify your own style you can use those in Style Reference. Even u can mention the StyleSheet in same Page and use them further in your Control with the StyleReference Tag.

So have fun with Style