Create a WEB application theme in asp.net 2.0

Asp.net|web| Program | create

Introduction

The theme is a new feature of Microsoft asp.net 2.0, which lets you define the appearance of a set of controls one at a time, and you can apply that skin to the entire WEB application. For example, by leveraging the theme features, you can define a common look, such as background color and foreground color, for all TextBox controls in your application in a central location. Use the theme feature to easily establish and maintain consistency across the site's appearance.

Themes and cascading style sheets are not the same. Use cascading style sheets to control the appearance of HTML tags on your browser. The theme is applied to the server and applies to the properties of the ASP.net control. For example, you can use a theme to specify whether the GridView control displays a header or footer, but you cannot use cascading style sheets to do this.

Themes are not the same as master pages. Master pages are also a new feature of ASP.net 2.0, which allows you to specify a common layout for multiple content pages in a WEB application. You can use themes to control the appearance of individual controls on a page, but master pages cannot. (When you design a WEB application, you can and may use both master pages and themes.) ）

In this article, you will learn how to take advantage of theme features in ASP.net 2.0 applications. You'll learn how to use cascading style sheets and images at the same time in a theme. In addition, we will learn how to load topics dynamically at run time.

Back to the top of the page

Create and apply simple topics

ASP.net 2.0 does not have any default themes attached. After ASP.net 2.0 is released, you can download and use themes from a Web site (such as Www.ASP.net). Now, however, you must create all the topics you want to use from scratch.

In addition, the system warns you that Microsoft Visual Web Developer does not provide any tool support for creating a theme. Although you can use Visual Web Developer to create a theme and apply a theme to a Web page, you do not see the effect of applying a theme to a page in a Web browser before you actually open the page. In other words, the Visual Web Developer does not provide any designer support for creating a theme.

After understanding these warnings, we continue to create simple topics. The first step required to create a theme is to create a new folder named Themes in the root directory of your application. (When the BETA 2 version of ASP.net 2.0 is released, you'll need to name the folder Application_themes.) When you try to apply a theme, the ASP.net Framework automatically finds this folder.

After you create the Themes folder, you can create one or more topics by adding subfolders to the Themes folder. The first topic we will create is named Orangetheme. Therefore, we need to add a new file named Orangetheme in the Themes folder.

Then, we need to add the Skin file to the Orangetheme folder. The Skin file is the file that actually contains the formatting that the theme applies to. In other words, the file contains the appearance of one or more controls that the theme applies to. You can name the Skin file as if it were an extension. Skin end can be.

A topic can contain a Skin file, or it can contain hundreds of Skin files. You can name the Skin file as needed. This doesn't matter, because when you apply a theme to a page, the ASP.net Framework merges all the Skin files together and treats them as a single Skin file.

You can apply a theme by using the StyleSheetTheme property of the Theme or @ Page directive, or by setting the pages element (asp.net setting Schema) element in the application configuration file. The visual Web Developer only visually display topics that are applied using the StyleSheetTheme property.

Create a page theme

1. In Solution Explorer, right-click the name of the Web site for which you want to create a page theme, and then click Add ASP.net folder.

2. Click Theme.

   If the app_themes folder does not exist, the Visual Web Developer creates the folder. The Visual Web Developer creates a new folder for the theme as a subfolder of the app_themes folder.

3. Type a name for the new folder.

   The name of this folder is also the name of the page theme. For example, if you create a folder named \app_themes\firsttheme, the name of the theme is Firsttheme.

4. Add files to the new folder for the control skins, style sheets, and images that make up the theme.

We will use the Skin file (named Formcontrols.skin) in Listing 1 in the subject Orangetheme:

List 1:formcontrols.skin

<asp:textbox    backcolor= "Orange"    forecolor= "Darkgreen"    runat= "Server"/><asp:button    Backcolor= "Orange"    forecolor= "Darkgreen"   font-bold= "True"   runat= "Server"/>

You should note that the Skin file in Listing 1 contains the declarations for the TextBox and Button controls. Values are provided for the BackColor and ForeColor properties of the two controls, respectively. In addition, the Button control is declared to use bold fonts.

Note that you can use the Skin file to specify the appearance of a control by declaring a control instance and setting one or more control properties. The control properties that you can set in the Skin file are limited. Typically, you can set only the appearance properties. For example, you can set the BackColor, ForeColor, or even Text properties of a TextBox control. However, you cannot set the AutoPostBack property of a TextBox control in the Skin file.

In addition, you cannot use skins for each asp.net control. For example, you cannot use skins for Repeater controls, Literal controls, or LoginView controls, or for the user control (however, you can apply skins to controls contained in the user control).

After the formcontrols appearance is applied to the page, each TextBox and Button control in the page is displayed using the property values specified in the Skin file. This is true even if a value has been specified for the BackColor property of the TextBox control in the page. The Skin file overrides the control properties in the page.

The page in Listing 2 applies the theme Orangetheme:

List 2:orangepage.aspx

<%@ Page theme= "Orangetheme"%>
The page in Listing 2 contains a form to ask for a user name. There is no special place for this page except to add a subject directive at the top of the page. This topic directive is used to apply a orangetheme theme to a page.

When you open a page in List 2 in a Web browser, the TextBox and Button controls are displayed using the formatting declared in the Skin file (see Figure 1).



Figure 1: Applying a simple theme to a asp.net page

The Skin file can contain formatting that is more complex than the formatting contained in Listing 1. For example, the Gridview.skin file in Listing 3 contains scripts and templates that are used as formatting for the GridView control. (In the ASP.net 2.0 Framework, the GridView control replaces the DataGrid control.) ）

 List 3:gridview.skin (C #) 
 

<script language= "C #" runat= "Server" > String Displayinstock (Object Instock) {if (Int    Instock > 0) return to "in the stock";  else return to "out of the stock"; }</script><asp:gridview autogeneratecolumns= "false" Showheader= "false" cellpadding= "5" Font-Name= "Ar Ial "runat=" Server "> <alternatingrowstyle backcolor=" lightblue "/> <Columns> <asp:temp           Latefield> <ItemTemplate> <%# Eval ("ProductName")%> </ItemTemplate> </asp:TemplateField> <asp:boundfield datafield= "UnitPrice" DataFormats Tring= ' {0:c} '/> <asp:TemplateField> <ItemTemplate> <%# displayinstock (Ev Al ("UnitsInStock"))%> </ItemTemplate> </asp:TemplateField> </columns></asp : Gridview> 
 List 3:gridview.skin (visual Basic. NET) 
 

<script language= "VB" runat= "Server" > Function displayinstock (instock as Object) as  String If CType (instock, Int16) > 0 Then return ' in-stock ' Else return ' out of stock ' end If end Function</script><asp:gridview autogeneratecolumns= "false" Showheader= "false" cellpadding= "5" Font- Name= "Arial" runat= "Server" > <alternatingrowstyle backcolor= "lightblue"/> <Columns> < Asp:templatefield> <ItemTemplate> <%# Eval ("ProductName")%> </itemtemp late> </asp:TemplateField> <asp:boundfield datafield= "UnitPrice" Dat Aformatstring= "{0:c}"/> <asp:TemplateField> <ItemTemplate> <%# DisplayIn Stock (Eval ("UnitsInStock"))%> </ItemTemplate> </asp:TemplateField> </Columns> </asp:gridview> 
The Skin file in Listing 3 contains a GridView control that has three columns (see Figure 2). The first column is a TemplateField column that displays the value of the ProductName field. The second column is a BoundField column that displays the UnitPrice field (note that this column uses the DataFormatString property to set the price form to currency). Finally, the third column is another TemplateField column. This column will call the Displayunitsinstock method from the script contained in the Skin file to display the text "in the stock" or "out of the stock".



Figure 2: The complex GridView appearance

You can use the Gridview.skin appearance for the page in Listing 4 (if you have added the skin to the Orangetheme folder).

List 4:skinnedgridview.aspx

<%@ Page theme= "Orangetheme"%>
The page in Listing 4 shows the contents of the Products database table. This page contains a GridView control that is bound to the SqlDataSource control. The SqlDataSource control is used to connect to the Northwind database table to retrieve data from the database.
Back to the top of the page
Default appearance and named appearance

In the previous section, you learned how to create the appearance of all instances that apply to a type of control. For example, you learned how to create a look that applies to all TextBox controls or GridView controls. However, you will soon find that you need to create multiple skins for the same control. For example, you would want to be able to apply different skins to the GridView control in different pages, or even the same page.

If you create a named skin, you can create multiple skins that apply to the same class of controls. A named skin is a look that contains SkinID. For example, the Skin file in Listing 5 contains three skins that can be applied to a TextBox control.

List 5:textbox.skin

<asp:textbox    backcolor= "Green"    runat= "Server"/>    <asp:textbox skinid=    "Bluetextbox"    backcolor= "Blue."    runat= "Server"/>    <asp:textbox    skinid= "Redtextbox" backcolor= "    Red" runat= "    server"/>    
In Listing 5, the first TextBox appearance is called the default appearance. Because the skin does not contain SkinID, the skin is applied to all TextBox controls by default. The second and third TextBox skins contain their respective SkinID property values. They apply to a TextBox control only if the two skins are explicitly referenced through their SkinID values.

For example, the page in Listing 6 uses all three skins in the Textbox.skin Skin file.

List 6:skinnedtextboxes.aspx

<%@ Page theme= "Orangetheme"%>
Because the first TextBox control in Listing 6 does not contain the SkinID property, its appearance is the default appearance. The second TextBox control looks like a bluetextbox appearance, and the last TextBox control looks redtextbox (see Figure 3).



Figure 3: Applying the default appearance and naming appearance
Back to the top of the page
Apply a theme to an entire application

So far, we've applied multiple topics to individual pages by using the theme properties of the page directive. If you want, you can apply a theme to the entire application in a Web configuration file.

For example, the WEB configuration file in Listing 7 applies the orangetheme theme to each page in the application.

List 7:web.config

<configuration>    <system.web>   <pages theme= "Orangetheme"/>    </system.web>< /configuration>
The Web.config file in Listing 7 applies the orangetheme theme to all pages that have not already specified a topic in the page directive. In other words, the page directive can override any of the topics specified in the Web.config file.

The same application can contain multiple Web.config files for the specified topic. You can add different Web configuration files to different subfolders, and each Web configuration file can specify a different topic.
Back to the top of the page
Themes and StyleSheetTheme

When you apply a theme to a page, any control properties that are set in the theme take precedence over any properties that are set in the page. For example, if the theme specifies that the background of all TextBox controls should be orange, the background of all TextBox controls on the page will still appear orange, even if the BackColor property of individual TextBox controls has different values.

However, in some cases, you will want to override specific appearance settings in the page. For example, when there are multiple TextBox controls on a page, you might want to change the BackColor of a TextBox control to red to highlight the control. In this case, you will need to take advantage of StyleSheetTheme. StyleSheetTheme works very much like a common theme, except that it can be overridden by the properties of individual controls.

StyleSheetTheme works more like a cascading style sheet than a normal theme. You can substitute cascading style sheet rules for style rules that are assigned to individual HTML tags, and you can use the same method to override the StyleSheetTheme property setting to the property settings of individual controls.

For example, the Skin file in Listing 8 contains a TextBox appearance that sets the BackColor for each TextBox control to orange and sets the ForeColor to green.

List 8:textbox.skin

<asp:textbox    backcolor= "Orange"    forecolor= "Green"    runat= "Server"/>
Suppose you added the appearance in Listing 8 to the Orangetheme topic. The page in Listing 9 uses the StyleSheetTheme property instead of the theme property to apply the appearance.

List 9:stylesheetthemedtextbox.aspx

<%@ Page stylesheettheme= "Orangetheme"%>
When you open the page in Listing 9, the first TextBox control's BackColor will appear orange, and the BackColor of the second TextBox control will appear yellow (see Figure 4). The BackColor of the first TextBox control is set by the StyleSheetTheme property that is displayed in the page directive. The value of the BackColor property of the second TextBox control is set by the page itself.



Figure 4: Using StyleSheetTheme
Back to the top of the page
Images and Themes

You can include images in topics. When you work with certain controls, such as a Menu, TreeView, or BulletedList control, it can be useful to add an image to a theme.

For example, listing 10 contains the appearance for BulletedList controls. The skin contains a reference to an image named Orangebullet in the Bulletimages subfolder of the Orangetheme folder.

List 10:bulletedlist.skin

<asp:bulletedlist    bulletstyle= "customimage"    bulletimageurl= "Bulletimages/orangebullet.gif"    runat= "Server"/>
The page in Listing 11 uses the BulletedList appearance to display a bulleted list of bibliographies in the titles database table.

List 11:showbulletedlist.aspx

<%@ Page theme= "Orangetheme"%>
When you open the page in Listing 11, the BulletedList control retrieves the list of headings from the titles database table and displays the list. Note that the BulletList skin applies the orangebullet image to the BulletedList control (see Figure 5).



Figure 5: Apply the theme that contains the image
Back to the top of the page
Cascading Style Sheets and themes

You can also use cascading style sheets in themes. If you add a cascading style sheet to a theme folder, the cascading style sheet is automatically applied to the page when you apply the theme to a page. If the contents of the Themes folder are compiled into a category, any cascading style sheets that exist in the Themes folder will be added to the class.

For example, suppose you want to create a hover effect for all the hyperlinks in a page. You can use the cascading style sheet in Listing 12 to change the color of the hyperlink to Orange when the mouse hovers over the hyperlink.

List 12:hover.css

a:hover{    Color:orange;}
If you add a cascading style sheet from listing 12 to the Orangetheme folder, the style sheet is automatically applied to the page when the Orangetheme is applied to a page. One requirement for a style sheet to be automatically applied to a page is that the page must contain a server-side 
Because the page in Listing 13 contains the 
List 13:menu.aspx

<%@ Page theme= "Orangetheme"%>
If you open the page in Listing 13 and hover your mouse over a hyperlink, the hyperlink changes to Orange (see Figure 6).



Figure 6: Using cascading style sheets in themes

You can include more than one cascading style sheet in a topic. If you add multiple cascading style sheets, the server-side 
Back to the top of the page
Dynamically Load Topics

Suppose you want to dynamically change the appearance of your Web site. You may want users to customize the color and overall appearance of your Web application when interacting with your Web application. By taking advantage of dynamic load theme operations, you can provide this functionality to users of ASP.net 2.0 applications.

By modifying the Theme property value of the Page object, you can modify the theme used by the page at run time. You can assign the name of any valid topic to this property. You must understand a limitation when using the theme property. That is, the theme property can be set only when the Page PreInit event occurs or before it occurs.

In the PreInit method's handler for the page, set the Theme property of the page.

The following code example demonstrates how to set the page theme conditionally, based on the values passed in the query string.

Protected void Page_PreInit (object sender, EventArgs e)
{
Switch (request.querystring["theme"])
{
Case "Blue":
Page.theme = "BlueTheme";
Break
Case "Pink":
Page.theme = "Pinktheme";
Break
}
}

For example, suppose you created two new theme folders in the Themes folder, named Redtheme and Yellowtheme. You can add the appearance in Listing 14 to the Redtheme folder and add the appearance in Listing 15 to the Yellowtheme folder (these skins change the BackColor of the DropDownList control to red or yellow).

List 14:redtheme/dropdownlist.skin

<asp:dropdownlist    backcolor= "Red"    runat= "Server"/>
List 15:yellowtheme/dropdownlist.skin

<asp:dropdownlist    backcolor= "Yellow"    runat= "Server"/>
The page in Listing 16 dynamically loads the Redtheme or Yellowtheme theme based on the user's selection in the DropDownList control (see Figure 7). Note that the request collection is used to retrieve the user's selections in the PreInit event handler. Because the PreInit event is too early in the page execution cycle to use any of the properties of the Droptheme DropDownList control, you must use the Request collection.



Figure 7: Dynamically loading themes

List 16:dynamictheme.aspx (C #)

<%@ Page language= "C #"%><script runat= "server" >    void Page_PreInit (object sender, EventArgs e)    {        page.theme = request["Droptheme"];    } </script>
To apply a control's appearance programmatically
In the PreInit method's handler for the page, set the control's SkinID property.
The following code example shows how to set the SkinID property of a Calendar control.
void Page_PreInit (object sender, EventArgs e)
{
Calendar1.skinid = "MySkin";
}
Back to the top of the page
Conclusion

In this article, we learned the basics and advanced applications of the ASP.net 2.0 topics. The theme is a powerful new feature of the ASP.net Framework. By leveraging the theme features, you can significantly reduce the amount of content you need to add to each asp.net page. You can use the theme feature to define the appearance of a control once, and you can apply that skin to the entire WEB application. Therefore, using theme features makes it easy to create a consistent and maintainable design site.
Back to the top of the page
Resources


       
 
 
        
 
         
 
          
•
 
          
ASP.net unleashed
 
         
 
         
 
          
•
 
          
ASP.net v. 2.0-the Beta Version
 
         
 
         
 
          
•
 
          
asp.net 2.0 Beta Preview
 
         
 
         
 
          
•
 
          
Introducing Microsoft asp.net 2.0
 
         
 
        
 

       
Author Introduction

Stephen Walther wrote a best-selling book about asp.net asp.net unleashed. In addition, he is the architect and primary developer of ASP.net Community Starter Kit (the ASP.net sample application developed by Microsoft). He also provides asp.net training for U.S. companies, including NASA and Microsoft, through his own company, Superexpert (http://www.superexpert.com/).