Skin file in asp.net

How to apply Skin file to aspx page in asp.et

Skin file is similar to the css. But the difference between the css and skin file is that in css you create one class and assigns the class to each and every controls for which you want that kind of formatting.

For example:

If you create the following class in css file

.prop

{

      color:Green;

      font-family:Arial Black;

      font-size:medium;

}

And if you want apply this formatting to all of the textboxes in your website then you have to set the property for all the textbox like shown below.

<asp:TextBox ID="TextBox1" runat="server" CssClass="prop">asp:TextBox>

And also have to call the stylesheet file in tag as shown bellow.

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

But it is very tedious task because suppose your website contains large number of textboxes. Then it is very boring work to assign class=”prop” to each and every textboxes in website.

The solution of this problem is skin file provided by .net framework. Skin file will apply dynamically. I mean to say all the formatting will apply on run time not on designing time.

I hope now you are able to find the use of skin file over css file.

So let’s start how to use skin file and advantages of skin file.

1.To add new skin file Right click on web site-->add new item.

Select skin file. Give appropriate name to skin file. And click on ok

2.By clicking on ok it’ll ask for creating new folder for Theme. Click yes and it’ll create one new folder in Solution explorer named App_Themes under which there will be folder of your skin file.

3.It will open one file in which all the code will be in comment or in green colors. Please delete all the code.

4. Now we are ready to write a code.

Now go to your design page(.aspx). Set all the properties whichever you want to any one textbox. For example I want following formatting for all the textboxes.

Font-Bold="True"

Font-Names="Arial Black"

Font-Size="Medium"

ForeColor="Blue"(Font color)

For that set these properties for any one textbox as shown below.

<asp:TextBox ID="TextBox1" runat="server" Font-Bold="True" Font-Names="Arial Black" Font-Size="Medium" ForeColor="Blue">asp:TextBox>

After assigning these property, copy this code(above textbox code) and paste in the blank skin file.

After that delete the ID property of textbox

So in skin file the code will like

<asp:TextBox runat="server" Font-Bold="True" Font-Names="Arial Black" Font-Size="Medium" ForeColor="Blue">asp:TextBox>

Then save the skin file and remove the formatting from the textbox in your designing page. So in designing file the code of textbox will be

<asp:TextBox ID="TextBox1" runat="server" >asp:TextBox>

Now skin file is ready.

Now we have to apply this skin file to our page.

So open the property of .aspx page. And set the Theme property to our skin file name.

Another way to do this is -----> go to source of page and in this code the first line will be of page directive <%@ page…………….%>

In this tag add the skin file name like Theme=”Skinfile name”

Like

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Theme="SkinFile" %>

After doing this you will find there is no change in the design. Property is no applied to controls. It is just because I told you earlier skin file it applied dynamically or at run time.

Now run the web site you will find that all the properties are applied to all textboxes.

Now on every page on which you want same formatting for textboxes just apply skin file for that page by either of two way i explained above.

Please try this article and let me know in case of you have any doubt about skin file or leave your doubts in comment or you can drop a mail to suman161288@yahoo.co.in