Using ASP.Net Skins

Background
In my previous article Common Design For All Web Pages Without ASP.Net Master Page, we learned how to apply a consistent look to ASP.Net controls as well as HTML controls using ASP.Net. This article is about themes; we learn how to apply a consistent look, but only to the controls specific to ASP.Net.

So how to do it? Let us see step-by-step with some theoretical concepts so beginners and students can also understand it.

What ASP.Net Skins are

ASP.Net skins can only be used to apply the styles to the ASP.Net controls.so in this article let us see the procedure for using ASP.Net Skins.

First Create the web application as in the following:

1. "Start" - "All Programs" - "Microsoft Visual Studio 2010"
2. "File" - "New Website" - "C# - Empty website" (to avoid adding a master page)
3. Provide the web site a name, such as UsingSkins or whatever you wish and specify the location
4. Then right-click on the solution in the Solution Explorer then select "Add New Item" - "Default.aspx page" .

How to Add ASP.Net themes

Add an ASP.Net Themes Folder

To use the themes in the web site, we need to add an ASP.Net Themes folder by right-clicking on Solution Explorer as in the following:



After adding the theme folder, add the SkinFile.skin file by right-clicking on the ASP.Net theme folder. The Solution Explorer will then look as follows:



Now add the ASP.Net controls inside the SkinFile.Skin and assign the Style to the controls using their properties as in the following:

In the code above I have used just a few controls and properties for assigning the styles but you can assign it for every ASP.Net control that you want, such as in the following:
 


Note:

1. A control Id cannot be assigned to ASP.Net controls inside the SkinFile.skin.
2. SkinId must be assigned to the ASP.Net controls inside the SkinFile.skin.
3. The SkinId should be uniquely defined because duplicate SkinId's per control type are not allowed in the same theme.
4.  Only one default control skin per control type is allowed in the same theme.
   

I hope you understand the basic concepts from the preceding explanation.

How to Use ASP.Net Skins

To use existing ASP.Net Skins in an ASP.Net page you need to assign the existing theme at page level as in the following.


In the preceding source code, we are assigning the existing ASP.Net Skin File at page level, the existing ASP.Net Skin automatically appears in the box after using the Themes property in the page header.

Assigning the Skin to the ASP.Net Controls

To assign the skin to the ASP.Net controls, you need to assign it to the control's SkinId Property as in the following:


In the preceding ASP.Net source code, we used the skinId property of the control to assign the existing skin.

Now run the application, it will appear as in the following:



From the preceding example, we learned how to use skins.

Advantages of ASP.Net Skins

1. Skins can be used to apply the common style to the individual  ASP.Net controls.
2. You can apply a style to the specific control.
3. It easy to remind which skin is for which control because inside the skin file ASP.Net controls are directly used and in .aspx pages it automatically appears to that control id style.
4. Gives the same consistency to the multiple controls in the web application. 

Note

• When you use an ASP.Net Skin you need to add a Skinfile.skin file under the ASP.Net theme folder.
• For detailed code please download the zip file attached above. 

Summary

 

From all the above examples we have seen how to use an ASP.Net Skin in ASP.Net controls. I hope this article is useful for all students and beginners. If you have any suggestion related to this article then please contact me.