Developing Websites using Themes (Adding Simple Skins to Themes): Part 2
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
aRunat="Server" attribute, but it does not include
an ID attribute. We must always include a Runat attribute,
but we can never include theID 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
theThemeable(False) attribute, which disables theming.
Note: Continue in next part.
Comments
Post a Comment