HomeASP.NET The Beauty of ASP.NET 2.0 Themes in Visual...
The Beauty of ASP.NET 2.0 Themes in Visual Studio 2005
This article introduces you to “ASP.NET 2.0 Themes” with the Visual Studio 2005 Integrated Development Environment. The sample downloadable application was developed using Visual Studio 2005 Professional Edition on Windows Server 2003 Standard Edition.
A downloadable file for this article is available here.
Understanding “Themes” in ASP.NET 2.0
Any commercial website needs to spruce up its appearance now and then. Even though the appearance of a website may get modified periodically, the consistency of the entire website should always be maintained.
The most important issues for consistency are the coloring methodology and other look and feel strategies. In general, to maintain consistency throughout a website, style sheets (Cascading Style Sheets) have been a good choice. Style sheets have been introduced with DHTML, even before any server side technology was invented.
And later style sheets have been directly integrated into (almost) every server side technology available (along with ASP.NET). Applying CSS to HTML seems to be simple and easy, but applying the same to ASP.NET Server controls can be confusing, because it is up to the developer to know which HTML tags are rendered by the control and how they are rendered. Keeping such scenarios in mind, Microsoft introduced a new feature in ASP.NET 2.0 called “themes.”
Before understanding “themes,” we need to understand the concept of “skin.” A skin generally contains visual properties (for look and feel strategies) for one or more kinds of ASP.NET controls (server controls). Every skin is made with a set of skin tags, which are typically based on XML and XSLT specifications. At this movement (at the time of this writing), Visual Studio 2005 doesn’t have any intellisense support to work with skin tags. It is the developer’s responsibility to figure out the syntax of every skin manually.
Coming to the concept of “themes,” a theme is simply a collection of several skins and style sheets together with images. A theme really makes a web developer’s life very easy as they can define the appearance for a set of controls at design time and make them look coherent to the overall application. Web developers can apply theme to the application at control, page or application levels. This article mainly concentrates on the following issues:
designing skins
creating themes based on the skins
applying themes to web pages
applying two different appearances for the same kind of controls
creating and applying Cascading Style Sheets to the theme
Before proceeding to the demonstration, we need to know where the skins and themes actually reside in an ASP.NET 2.0 web application. Skins are located inside the selected themes folders, whereas themes are located in a special folder inside the framework. Themes can be declared in the source as well as class files.
However, custom made themes can also be saved inside the predefined "App_Themes" folder inside ASP.NET applications, making them easier to manage and interpolate according to your needs. This new feature improves the maintenance of the website and avoids unnecessary duplication of code for shared styles.
Let us start with a simple example:
1. Go to Start ->Programs -> Microsoft Visual Studio 2005.
2. Open File -> New -> Web Site -> ASP.NET Web Site and provide the name “SampleTheme.”
3. Go to Solution Explorer -> right click on the root folder(C:...SampleTheme) -> Add an ASP.NET Folder -> click on the “Theme” option and provide the name “FirstTheme” as shown in fig1. The new folder “App_Themes” gets added to the solution explorer along with a subfolder called “FirstTheme.”
We just finished creating the folder structure for implementing themes. Now, it's time to create and place skin files within the same theme folder. Proceed with the following steps:
1. Right-click on Theme Subfolder(“FirstTheme”) -> Add New Theme -> select Skin File and provide the name “Button.skin” as shown in fig2.
2. Finally click on the “Add” button (which should create the skin file within the theme folder “FirstTheme”).
After adding the skin file to the theme folder, you will be taken to the “source view,” where you need to specify the skin configurations. A skin configuration for a particular control is simply the style (visual properties) of a particular control. Within the “source view,” type the following sample skin configuration for a “button” control:
<asp:Button
runat="server"
BackColor="Red"
BorderColor="Black"
BorderStyle="Solid"
BorderWidth="1px"
/>
Once you complete all of the above steps, we need to proceed with applying the theme (along with the skin). Proceed with the following steps.
1. Go to the design pane of “default.aspx” page.
2. Drag an ASP.NET button on to the “default.aspx” (its visual properties will be automatically applied at run-time based on the skin definition above).
3. Select “Document” in the top “dropdownlist” of Properties Window.
4. Select the “Theme” Property and choose the “FirstTheme” item from dropdown list.
5. Run the application.
You must get the following output (fig3).
You can observe that I didn’t set any properties for the button. But at runtime it is communicating with the theme (along with the skin) and applying new properties by itself!
Let us try to tell controls on the web page to use a specific skin element by adding a SkinID attribute. Place two ASP.NET list box controls on the web page and create a skin file (as detailed in previous section) with name “ListBox.skin” and type the following in the “source view”:
<asp:ListBox
runat="server"
BackColor="Yellow"
BorderColor="Red"
BorderStyle="Solid"
BorderWidth="1px"
/>
<asp:ListBox
runat="server"
SkinId="lstSkinBlue"
BackColor="Blue"
BorderColor="white"
BorderStyle="Solid"
BorderWidth="3px
/>
From the above code, we have two different specifications for two separate instances of the same ASP.Net Server control (listbox). You must observe that the first specification does not have the attribute “SkinId,” whereas the other one does.
Let us apply the above specifications to the controls and observe the difference.
1. Go to the design pane of default.aspx page.
2. Add two more list boxes (named ListBox1 and ListBox2).
3. Open the properties for “ListBox2.”
4. Specify “lstSkinBlue” for the property “SkinId.”
5. Run the application.
You should be able to get the following output (fig4).
If a control is not specified with any “SkinID” property, then the default skin would be considered for display.
Theme folders will support Cascading Style Sheets as well. Let us look at a simple example with CSS. Proceed with the following steps (continued from the previous section):
1. Right-click on the Theme folder(“FirstTheme”) -> Add New Theme -> select the “Style Sheet” template and provide the name “StyleSheet1.css” as shown in fig5.
2. Finally click on the “Add” button (which should create a style sheet file within the theme folder “FirstTheme”).
Double click on this style sheet file and type the following code:
body
{
background-color:Orange;
height:auto;
width:auto;
}
In the above code, we are simply setting the properties for background color (as orange), height (as auto) and width (as auto). Once you execute the solution, you should see the output as follows, in fig6.
We can also set the theme of a page during run time. This concept is useful for allowing users to customize the page according to their preference or interest.
Let us go through an example of setting a theme during runtime (we shall use the same design and controls discussed in previous sections)
1. Modify the properties of the button as follows:
a. Text=”First Theme”
b. ID=”btnFirstTheme”
2. Place another button (ASP.NET server control) and modify the following properties:
a. Text=”Second Theme”
b. ID=”btnSecondTheme”
3. Create one more Theme (named “SecondTheme”) by just following the steps discussed in the previous sections. By this time, your solution explorer should look something like the following image, fig7.
4. Add a new skin (“SkinFile.skin”) to the newly created theme (“SecondTheme”) by just following the steps discussed in the previous sections.
5. Open “SkinFile.skin” file and type the following code:
ASP.NET 
/ 61 
Secure Audio Streaming with ASP.Net and Flash
