Introduction
As we know any Theme can
contain more than one skin files. Skins always enable us to modify properties of
any ASP.Net control and let that control look better than before. Assume an
example, we want to change the appearance of each and every TextBox exist on
ASP.Net web page. In the example given below we will be changing appearance with
a red blue background and a dotted border.
Steps to Add Skins
To add skins we have to
create a folder on root named App_Themes\Simple. After adding such folders add a
file named TextBox.skin inside Simple folder and write the following codes given
below. We can name a Skin file anything we want. I recommend following a naming
convention in which we name the Skin file after the name of the control that the
Skin modifies.
TextBox.skin Codes
<asp:TextBox
BackColor="Green"
BorderStyle="Dotted"
Runat="Server"
/>
A Theme folder can contain a single Skin file that contains Skins for hundreds
of controls. Alternatively, a Theme can contain hundreds of Skin files, each of
which contains a single Skin. It doesn't matter how we organize our Skins into
files because everything in a Theme folder eventually gets compiled into one
Theme class. Above TextBox.skin file contains a declaration of a TextBox
control. Notice that the TextBox control includes a BackColor property that is
set to the value Green and a BorderStyle property that is set to the value
Dotted. We also notice that the TextBox control includes a Runat="Server"
attribute, but it does not include an ID attribute. We must always include a
Runat attribute, but we can never include the ID attribute when declaring a
control in a Skin. We can't create a Skin that applies to the properties of a
User Control. However, we can Skin the controls contained inside a User Control.
Default.aspx Code
<%@
Page Language="VB"
AutoEventWireup="false"
CodeFile="Default.aspx.vb"
Inherits="_Default"
Theme="Simple"%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title></title>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:TextBox
ID="TextBox1"
runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
Notice that the code given
above includes a Theme attribute in it's <%@ Page %> directive. This attribute
causes the Simple Theme to be applied to the page. Now when we open the page the
TextBox control appears with a green background color and dotted border. Only
certain control properties are "themeable." In other words, we can create a Skin
file that modifies only certain properties of a control. In general, we can use
a Skin to modify properties that have an effect on a control's appearance but
not its behavior. For example, we can modify the BackColor property of a TextBox
control but not its AutoPostBack property. By default, all control properties
are theme able (can be modified in a Skin file). However, certain control
properties are decorated with the Themeable(False) attribute, which disables
theming.
![1.JPG]()
Note:
Please learn next part for coding.
HAVE A GREAT
CODING!