Applying Themes Dynamically

You might want to enable each user of your website to customize the appearance of your website by selecting different Themes. Some website users might prefer a green Theme and other website users might prefer a pink Theme.

You can dynamically apply a Theme to a page by handling the Page PreInit event. This event is the first event that is raised when you request a page. You cannot apply a Theme dynamically in a later event such as the Page Load or PreRender events.

For example, the page in Listing 6.15 applies either the green Theme or the pink Theme to the page depending on which link you click in the page body (see Figure 6.8).

Figure 6.8. Selecting a Theme programmatically.

Listing 6.15. `DynamicTheme.aspx`

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub Page_PreInit(ByVal s As Object, ByVal e As EventArgs)         If Not IsNothing(Request("theme")) Then             Select Case (Request("theme"))                 Case "Green"                     Profile.UserTheme = "GreenTheme"                 Case "Pink"                     Profile.UserTheme = "PinkTheme"             End Select         End If         Theme = Profile.UserTheme     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Dynamic Theme</title> </head> <body>     <form  runat="server">     <div >     <h1>Dynamic Theme</h1>     Please select a Theme:     <ul>     <li>         <a href="DynamicTheme.aspx?theme=Green">Green Theme</a>     </li>     <li>         <a href="DynamicTheme.aspx?theme=Pink">Pink Theme</a>     </li>     </ul>     </div>     </form> </body> </html>

A particular Theme is applied to the page with the help of the Theme property. You can assign the name of any Theme (Theme folder) to this property in the Page PreInit event, and the Theme will be applied to the page.

Notice that the selected Theme is stored in the Profile object. When you store information in the Profile object, the information is preserved across multiple visits to the website. So, if a user selects a favorite Theme once, the Theme is applied every time the user returns to the website in the future.

The Profile is defined in the web configuration file in Listing 6.16.

Listing 6.16. `Web.Config`

<?xml version="1.0"?> <configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">   <system.web>     <profile>       <properties>         <add name="UserTheme" />       </properties>     </profile>   </system.web> </configuration>

Because the control tree has not been created when the PreInit event is raised, you can't refer to any controls in a page. Notice that hyperlinks are used in Listing 6.15 to select a Theme. You could not use a DropDownList control because the DropDownList control would not have been created.

Note

If you need to load a Theme dynamically for multiple pages in an application, then you can override the OnPreInit() method of the base Page class. This technique is discussed in the "Loading Master Pages Dynamically for Multiple Content Pages" section of Chapter 5.

Applying Skins Dynamically

You can apply skins dynamically to particular controls in a page. In the Page PreInit event, you can modify a control's SkinID property programmatically.

For example, the page in Listing 6.17 enables a user to select a favorite skin for a GridView control. The GridView control displays a list of movies (see Figure 6.9).

Figure 6.9. Applying a Skin programmatically.

Listing 6.17. `ShowDynamicSkin.aspx`

<%@ Page Language="VB" Theme="DynamicSkin" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub Page_PreInit(ByVal s As Object, ByVal e As EventArgs)         If Not IsNothing(Request("skin")) Then             Select Case Request("skin")                 Case "professional"                     grdMovies.SkinID = "Professional"                 Case "colorful"                     grdMovies.SkinID = "Colorful"             End Select         End If     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show Dynamic Skin</title> </head> <body>     <form  runat="server">     <div>     <asp:GridView                  DataSource         Runat="server" />      <asp:SqlDataSource                  ConnectionString="<%$ ConnectionStrings:Movies %>"         SelectCommand="SELECT Id,Title,Director FROM Movies"         Runat="server" />     <hr />     <a href="showdynamicskin.aspx?skin=professional">Professional</a>     &nbsp;|&nbsp;     <a href="showdynamicskin.aspx?skin=colorful">Colorful</a>     </div>     </form> </body> </html>

A hyperlink is used to select a particular Skin. The Skin is applied to the GridView in the PreInit event when a particular value is assigned to the GridView control's SkinID property.

Of course, I don't recommend doing this. It makes more sense to use a Cascading Style Sheet and modify a control's CssClass property. This alternate approach is demonstrated by the page in Listing 6.18.

Listing 6.18. `ShowDynamicCSS.aspx`

<%@ Page Language="VB" Theme="DynamicSkin" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">     Sub btnSubmit_Click(ByVal s As Object, ByVal e As EventArgs)         grdMovies.CssClass = ddlCssClass.SelectedItem.Text     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show Dynamic CSS</title> </head> <body>     <form  runat="server">     <div>     <asp:GridView                  DataSource         HeaderStyle-Css         AlternatingRowStyle-Css         GridLines="none"         Runat="server" />      <asp:SqlDataSource                  ConnectionString="<%$ ConnectionStrings:Movies %>"         SelectCommand="SELECT Id,Title,Director FROM Movies"         Runat="server" />     <hr />     <asp:Label                  Text="Select Style:"         AssociatedControl         Runat="server" />     <asp:DropDownList                  Runat="server">         <asp:ListItem Text="Professional" />         <asp:ListItem Text="Colorful" />     </asp:DropDownList>     <asp:Button                  Text="Select"         Runat="server" OnClick="btnSubmit_Click" />     </div>     </form> </body> </html>

Note that in this code sample, unlike the previous one, you can use a DropDownList and Button control to change the appearance of the GridView control when modifying the CssClass property. Because you can modify the CssClass property during any event before the page is rendered, you can handle the Button Click event to modify the value of the CssClass property.

Figure 6.10. Modifying a `CssClass` programmatically.

Figure 6.8. Selecting a Theme programmatically.

Listing 6.15. DynamicTheme.aspx

Listing 6.16. Web.Config