ASP.NET 2.0: A Developeramp;#039;s Notebook [Electronic resources] نسخه متنی

8.1. Create Themes and Skins

Most web designers use Cascading Style Sheets (CSS) to
give their web sites a consistent look and feel. In ASP.NET 2.0, you
can now create themes and skins that extend a consistent look and
feel to your server controls. In this lab, you will learn how to
create skins for your web controls and how to group them into themes.

Themes Versus CSS Stylesheets

While both themes and CSS
stylesheets let you apply common sets of attributes to web pages,
they do have their differences:

Themes can define properties of controls, such as the images to be
used for an ImageMap control. CSS stylesheets, on the other hand, can
define only certain sets of style properties.

Theme property values always override local property values, while
stylesheets can cascade.

Note that you can use themes and CSS together.

Themes and skins allow you to cleanly separate your UI into layers,
separating form from function. This greatly increases the
manageability of your project.

8.1.1. How do I do that?

In this lab, you'll create some
skin
files and group them into a theme. Then, you'll
apply this theme to a page to change its look and feel and observe
the result.

Launch Visual Studio 2005 and create a new web site project. Name the
project C:\ASPNET20\chap08-Themes.

Populate the default Web Form (Default.aspx)
with the Label, Calendar, and Button controls shown in Figure 8-1.

Figure 8-1. Populating the form with various controls

Create a new folder in your project by right-clicking the project
name in Solution Explorer and then selecting Add
Folder Themes Folder. The
folder will be used to hold various themes folders for your
application.

Note that a new folder named Theme1 will be
created under App_Themes. Change the name of
this folder to Classic. You'll
use this folder to store the skin files for the Classic theme (the
name of the folder is also the theme name).

Note: The names of the folders under the
App_Themes folder are also the theme
names.

Add three .skin files to the
Classic folder by right-clicking the
Classic folder and selecting Add New Item....
Select Skin File and name the new files
Button.skin, Calendar.skin,
and Label.skin, respectively. A skin file
contains formatting information used to change the look and feel of a
control. The Solution Explorer should now look like Figure 8-2.

Figure 8-2. Adding skin files to a theme

Populate the Button.skin file with the following
line of code:

<asp:Button runat="server" Width="90px" Font-Bold="True" />

Populate the Calendar.skin file as follows:

<asp:Calendar runat="server" Width="400px" 
Font-Names="Times New Roman" Font-Size="10pt" 
Height="220px" BorderColor="Black" ForeColor="Black" 
BackColor="White" NextPrevFormat="FullMonth" 
TitleFormat="Month" DayNameFormat="FirstLetter">
<SelectedDayStyle ForeColor="White" BackColor="#CC3333" />
<SelectorStyle ForeColor="#333333" Font-Names="Verdana" 
Font-Size="8pt" Font-Bold="True"
Width="1%" BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<TodayDayStyle BackColor="#CCCC99" />
<DayStyle Width="14%" />
<NextPrevStyle ForeColor="White" Font-Size="8pt" />
<DayHeaderStyle ForeColor="#333333" Height="10pt" 
Font-Size="7pt" Font-Bold="True"
BackColor="#CCCCCC" />
<TitleStyle ForeColor="White" Height="14pt" 
Font-Size="13pt" Font-Bold="True" 
BackColor="Black" />
</asp:Calendar>

Populate the Label.skin file as follows:

<asp:Label runat="server" Width="256px" 
Font-Bold="True" Font-Names="Arial Narrow" 
Font-Size="Medium" />

Tips for Creating Skin Files

Since skin files are nothing
more than just the Source View
of controls (with the exception of attributes such as
id), it is very easy to create skin files. One
good way to do so is to give your controls the look and feel you want
them to have on a normal Web Form in Design View. Then switch to
Source View, copy the control element from the source code created
for the control, and paste it into the skin file. Finally, remove the
id attribute and add a skinid attribute in its place.

For the default Web Form, switch to Source View and add in the
following Theme attribute:

<%@ Page Language="VB"  AutoEventWireup="false" 
CodeFile="Default.aspx.vb" Inherits="Default_aspx" 
Theme="Classic" %>

To test your application, press F5. You will notice that the controls
on the page look different from their original design (see Figure 8-3). This is because the settings in the
.skin files have been applied to the controls on
the page.

Figure 8-3. Page with theme applied

8.1.2. What just happened?

You have just created three skin files and grouped them together as a
single theme. Each skin file is used to define the look and feel of a
particular control.

Note: A theme contains one or more skins. A skin file defines the
look and feel of a control.

For example, the Button.skin file under the
Classic theme defines the style of a Button control:

<asp:Button runat="server" Width="90px" Font-Bold="True" />

Note: Remember, a skin definition cannot contain the id
attribute. Including it will trigger a compile-time error.

While the Button.skin file used in this lab
contains only one Button definition, you can, if you wish, include
multiple Button definitions in the same file, as shown in the
following code snippet:

<asp:Button runat="server" Width="90px" Font-Bold="True" />
<asp:Button skinid="Italic" runat="server" Width="90px" 
Font-Bold="True" Font-Italic="True" />
<asp:Button skinid="Underline" runat="server" Width="90px" 
Font-Bold="True" Font-Italic="True" Font-Underline="True" />

You identify each skin in a .skin file by the
value of its skinid attribute. The first button style defined in a
.skin file typically does not contain a skinid
attribute and is regarded as the default skin
for the Button control.

If you examine the Button control's properties by
displaying its Properties window, you will
find a SkinID property. By default, the SkinID property is not set,
but if a skin file that is part of a selected theme contains multiple
definitions, you can select a particular definition from the list of
skins that it displays (see Figure 8-4). If the
SkinID property of a control is not set, the default skin will be
applied during runtime.

Figure 8-4. Specifying a SkinID for a control

By specifying a theme to use for the page, the default skins in all
the skin files will apply to all the relevant controls on the page,
unless a particular skin is specified in the skinid attribute of each
control.

Tip: While you need not necessarily create multiple skin files for your
project (in fact, a single skin file can contain all the style
definitions for all controls), the recommended practice is that you
hold the styles for each control in a separate skin file. A good
practice is to name each skin file after the control that it defines.

Disabling Skinning for Controls

When a theme is
applied to a page, all controls will
be affected if there are styles defined in the various skin files. To
prevent a control from being applied a theme, set the EnableTheming
property of the control to False, like this:

<asp:Button ID="btnGetTitle"
Runat="server"
Text="Get Title"
EnableTheming="False" />

8.1.3. What about...

...applying a theme programmatically?

To programmatically change the theme of a page, you use the Theme
property exposed by the Page class. However, you need to set the
theme before the page is loaded (before the Page_Load event is
fired). In fact, you have to set it in the PreInit event, which is
fired before all the controls are loaded and initialized:

Protected Sub Page_PreInit(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Me.PreInit
Page.Theme = "Classic"
End Sub

8.1.4. Where can I learn more?

Microsoft has a good quick-start guide to themes and skins at
http://beta.asp.net/quickstart/aspnet/.