| home / programming / asp / site_appearance |
[previous] [next] |
|
|
|
The previous section illustrates how you can customize your controls by setting the style properties of the controls themselves. ASP.NET 2.0 introduced the theme mechanism. This mechanism allows the developer to style the appearance of Web server controls on a site-wide basis. Like CSS, ASP.NET themes allow you to separate Web server control styling from the pages themselves, but have the additional benefit of having a complete object model that can be manipulated programmatically. Themes still allow you to use CSS for the majority of your visual formatting, and because theme support is built in to ASP.NET, you can dramatically alter the appearance of your Web site with a single line of programming (or a single line in the Web.config file). For instance, Figure 6.2 illustrates how a single Web Form's appearance can be radically transformed using three different themes.
An ASP.NET Web application can define multiple themes. Each theme resides in its own folder within the App_Themes folder in the root of your application. Within each theme folder, there are one or more skin files, as well as optional subfolders, CSS files, and image files (see Figure 6.3).
A skin describes the appearance of one or more control types. For example, a skin file might look like the following.
Notice that a skin simply contains a control definition without the id attribute. A given skin file can contain multiple control definitions. Alternately, many developers have a separate skin file for each control type (a theme can contain any number of skin files).
Not all properties can be skinned. Generally speaking, only properties relating to appearance (i.e., the properties in Table 6.1 plus additional properties depending upon the control) can be specified in a skin. Referencing a property that is not themeable in a skin file generates an error. As well, certain controls, such as the Repeater, are not themeable, generally because they do not inherit from the WebControl class.
Core Note: It is important to note that property values specified by a skin override the property values set for the control in the aspx and ascx pages. This may seem counterintuitive from an object-oriented programming perspective, because you might expect the more specialized (the page) to override the general (the skin). However, you can make a control in a Web Form or user control ignore the settings in a skin by adding EnableTheming="false" to the control.
There is no Visual Studio designer support for creating skins. That is, the only way to create and modify a skin file is directly in Source view within Visual Studio. Even worse, Visual Studio's Intellisense is not available in Source view when modifying a skin. As an alternative, you could create a temporary Web Form, use the Design view or Source view as needed to add controls and set up their properties, copy and paste the markup to your skin file, and then remove the id attribute from each of the controls.
Themes reside in separate folders within the App_Themes folder within your site. You can create this folder yourself in Visual Studio by right-clicking the Web project in the Solution Explorer and choosing Add ASP.NET Folder ν Theme option, as shown in Figure 6.4.
Alternately, Visual Studio can automatically create a theme folder for you when you add a skin file via the Add New Item menu option (see Figure 6.5). In general, you probably want to avoid this approach because Visual Studio names the theme folder the same as the skin file.
Core Note: Microsoft provides several design templates that use a variety of themes and can be downloaded at http://msdn.microsoft.com/asp.net/reference/design/templates.
Walkthroughs 6.1 and 6.2 demonstrate how to create a theme and a skin.
Cool.Professional.Cool theme and choose the Add New Item menu option in Visual Studio.Label.skin.<asp:Label runat="server" ForeColor="Green" />
After a theme has been created (that is, after you've created one or more skin files), you can apply a theme to a page. This can be done in a few different ways. One way is to simply assign the theme using the Theme=themeName in the Page directive, for instance:
You can also set the theme for all pages in a site via the Web.config file. To do so, simply specify the theme via the theme attribute of the pages element within the system.web element, as shown in the following.
Core Note: Themes that are specified via the Theme attribute of the Page directive override the theme setting in the Web.config file.
A page's theme can also be set programmatically. To do so, you can set the Theme property (defined in the Page base class) for a form in its code-behind class. This is covered in more detail later in the chapter. Finally, another, less common way to set the theme is to set it for all sites on a machine via the machine.config file. This file is located at [windows]\Microsoft.NET\Framework\[version]\CONFIG. Just as with setting the theme for a site via the Web.config file shown earlier, you can set the global theme for the machine as a whole via the Theme attribute of the pages element within the system.web element of this machine.config file. The specified theme folder and its contents must be located in the global theme space for the machine, located at [windows]\Microsoft.NET\Framework\[version]\ ASP.NETClientFiles\Themes.
| home / programming / asp / site_appearance |
[previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
URL:
