MigratingfromASP.NET1.xtoASP.NET2.0

Themes and Skins

currently, ASP developers must use Cascading Style Sheets (CSS) and inline styles to enforce a look and feel on a Web site. Although these technologies help, consistency is still primarily a function of developer discipline in using the correct styles. ASP.NET 2.0 rectifies this issue through the use of themes and skins, which are applied uniformly across every page and control in a Web site.

Themes

themes are similar to CSS style sheets in that both themes and style sheets define a set of common attributes that apply to any page where the theme or style sheet is applied. However, themes differ from style sheets in the following ways:

• Themes can define many properties of a control or page, not just a specific set of style properties.
• Themes can include auxiliary files (for example, graphics) that can''t be included in a CSS style sheet.
• Themes do not cascade the way style sheets do (for example, theme property values always override local property values).
• Themes can include style sheet references.

each application has a themes directory. Each specific theme has its own subdirectory that contains skin files and any other files that apply to the style.

Defining a Theme

you can define themes and skins and deploy them in subdirectories stemming from the Themes directory. Each subdirectory constitutes a theme. A theme subdirectory contains .skin files as well as any other resources used by the theme (that is, image files and style sheets).

figure 12. Themes sub directory

the actual skin definitions are contained in the .skin files and look very much like the tags used to declare control instances in ASPX files.

for example, in the Themes directory, create a subdirectory named Pink. To create a .skin file for your theme, simply add the following code and save it in the Pink directory:

<asp:DropDownList runat="server" BackColor="hotpink"   ForeColor="white" /><asp:DataGrid runat="server" BackColor="#CCCCCC" BorderWidth="2pt"    BorderStyle="Solid" BorderColor="#CCCCCC" GridLines="Vertical"    HorizontalAlign="Left">      <HeaderStyle ForeColor="white" BackColor="hotpink" />      <ItemStyle ForeColor="black" BackColor="white" />      <AlternatingItemStyle BackColor="pink" ForeColor="black" /></asp:DataGrid>

this theme can then be applied to pages in your application. Of course, it will turn the background of your data grid hot pink, which may not be a desirable effect.

Using a Theme

themes can be applied:

• At page level using a single tag: <% @page language="VB" theme="Pink" %>.
• Site-wide using a configuration element inside of the Web.config file: <pages theme="Pink" />. The Web.config file is the master configuration file for each ASP.NET application.

the effects of a theme can be seen if you examine the common calendar control in Figure 13.

figure 13. Calendar with Basic Blue theme

t