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
themeable (can be modified in a Skin file). However, certain control properties
are decorated with the Themeable(False)
attribute, which disables theming.
Note: Please
learn next part for coding.
HAVE A GREAT CODING!