Applying A Theme
There are several ways
to apply a theme to your pages. In the following web form we’ve set the theme
using the Theme attribute of the @ Page directive.
<%@
Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
Theme="Odeish" %>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title>Home</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="Calendar1"
runat="server" />
<br />
<asp:Label ID="Label1"
runat="Server" Text="This is a label" />
</div>
</form>
</body>
</html>
Even though we have
not set any of the display properties on the calendar or label controls, the
above web form will render with the colors and styles from our theme, as shown
in the next screen shot.
Note: there is no
support in the designer for creating skins (only the text editor),
nor for viewing a themed page. The only way to see the end result is to view
the page in a browser after a successful build.
It’s also important to
point out that the property value specified by a theme will override any
property value in the ASPX markup. For instance, even if we marked our Label
control with ForeColor=”Black” in the ASPX markup, the Label would render with
a BlueViolet color, because that is the color specified by the theme.
You can also set
themes at the application level using web.config (or at the machine level using
machine.config). Use the theme property of the <pages> section as shown
below. You can override the configuration setting with the Theme attribute in
the @ Page directive.
<?xml
version="1.0"?>
<configuration
xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<pages theme="Odeish" />
<compilation debug="true"/>
<authentication mode="Windows"/>
</system.web>
</configuration>
If you are setting
themes at the machine level, you’ll want to have themes defined at the machine
level. Machine-wide themes need to be located in
%WINDIR%\Microsoft.NET\Framework\\Themes.
We can
programmatically set the theme for a page. Like the MasterPageFile setting we
discussed in the master page article, the Theme property must be set in the
PreInit event of a page. This is because the skins in a theme are applied after
the PreInit event fires but before the Init event fires. Later in the article
we will take a closer look at how the runtime applies skins.
public partial class _Default :
System.Web.UI.Page
{
protected void Page_PreInit(object sender, EventArgs e)
{
Theme = "Odeish";
}
}
Programmatically
setting the theme is useful when you allow users to personalize your site and
select their preferred look and feel. You could store a user’s preferred theme
in the Profile object of ASP.NET 2.0, and set the theme during the PreInit
event of each page they view.
Now that we’ve seen
the basics of how to create and apply themes, we can dig into more details.
No comments:
Post a Comment