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

8.2. Apply Themes at Runtime

Note: Allow your users to customize your web site by letting them
select the theme they want.

The previous lab, Section 8.1,
shows how to apply themes to a web site at
design time. A better way to use themes
is to let users to select their preferred themes at runtime, when
they visit site. In this section, you will see how themes can be
applied during runtime.

8.2.1. How do I do that?

Instead of setting the theme of a page at design time, in this lab
you are going to let the users choose a theme they like. In addition
to the Classic theme, you will create a theme called Colorful.

Using the same project created in the previous lab
(C:\ASPNET20\chap08-Themes), add a new folder
under the App_Themes folder. Name the folder
Colorful.

Add three skin files to the Colorful folder (see
Figure 8-5). The three skin files under the
Colorful folder will define the look and feel of
the various controls on the page.

Figure 8-5. Adding a new theme to the project

Code the Button.skin file as follows:

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

Code the Calendar.skin file as follows:

<asp:Calendar runat="server" Width="220px" 
Font-Names="Verdana" Font-Size="8pt" 
Height="200px" BorderColor="#FFCC66" 
ForeColor="#663399" BackColor="#FFFFCC" 
DayNameFormat="FirstLetter" BorderWidth="1px" 
ShowGridLines="True">
<SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
<SelectorStyle BackColor="#FFCC66" />
<OtherMonthDayStyle ForeColor="#CC9966" />
<TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
<NextPrevStyle ForeColor="#FFFFCC" Font-Size="9pt" />
<DayHeaderStyle Height="1px" Font-Bold="True"
BackColor="#FFCC66" />
<TitleStyle ForeColor="#FFFFCC" Font-Size="9pt" 
Font-Bold="True" BackColor="#990000" />
</asp:Calendar>

Code the Label.skin file as follows:

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

To the default Web Form, add the DropDownList and Button controls as
shown in Figure 8-6.

Figure 8-6. Adding new controls to the page

To get a list of available themes, check the list of folders under
the App_Themes folder. Then iteratively add the
list of themes to the DropDownList control. In the Page_Load event
for the default Web Form, code the following.

Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) _
Handles Me.Load
If Not IsPostBack Then
'---get all folders under the App_Themes folder
Dim themes As String( ) = _
Directory.GetDirectories( _
Request.PhysicalApplicationPath & "App_Themes")
'---add the themes into the DropDownList
ddlThemes.Items.Clear( )
For Each theme As String In themes
'---add only the theme name and not full path
ddlThemes.Items.Add( _
theme.Substring(theme.LastIndexOf("\") + 1))
Next
End If
End Sub

In the Page_PreInit event, get the value of the DropDownList control
using the Request object and set the theme of the page using the
Theme property:

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

Tip: You cannot directly access the DropDownList
control's properties to get the theme selected,
because the PreInit event is executed before the postback is
processed. Hence, when the Set button is clicked and results in a
postback, the theme selected would not have been available yet in the
PreInit event.

Press F5 to test the application. You can now select a theme to apply
to the page from the Select Theme drop-down list. Try it (see Figure 8-7).

Figure 8-7. Dynamically applying a theme to a page

8.2.2. What about...

...mixing themes with CSS?

Apart from applying themes
to your web pages, you can also mix themes with CSS stylesheets.

Using the project created in this section, add a stylesheet to the
Classic folder by right-clicking the
Classic folder and selecting Add New Item....
Select Style Sheet, and name the CSS stylesheet
Button.css. Likewise, add another stylesheet to
the Colorful folder.

The content of the two Button.css stylesheets
are as shown in Figure 8-8.

Figure 8-8. Content of the two Button.css stylesheets

Note: CSS styles apply at the client side. Hence, in this
example, you define the style to be applied to the <input>
element, which is the HTML code generated by the Button
control.

Press F5 to test the application. You will notice that when the
Classic theme is applied, the font used for the Button controls is
Courier New. Likewise, if you change the theme to Colorful, the font
is now Arial Narrow and the text is now in red (see Figure 8-9).

Figure 8-9. The effects of applying CSS stylesheets to a page

8.2.3. Where can I learn more?

If you want to learn more about CSS, I strongly suggest you take a
look at this tutorial: http://www.w3schools.com/css/default.asp.
There is also a good discussion of the use of themes in web
applications at http://mgemmons.com/blog/archive/0001/01/01/156.aspx.