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

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