Asp.NET2.0主题、皮肤的应用

看了一篇关于主题和皮肤应用的贴子，但关于Theme和StyleSheetTheme的关系讲得不是太清楚，另外代码是带行号的。。。（我粘到VS2005中好麻烦），所以引用过来，修改一下，并附上我完成的一个例子

原文地址：http://www.cnblogs.com/njypcmqj/archive/2007/03/10/670559.html
例子下载：https://files.cnblogs.com/reonlyrun/TestTheme.rar

Asp.net2.0和1.1相比，激动人心的变化很多。无论从外在表现上还是内在品质上都有巨大的提升。本人以一个教师授课的角度，讲解几个最为显著的变化。

一. ASP.NET 2.0主题皮肤（theme skin）的使用

我们在学习使用Macromedia Dreamweaver制作网页时，为了便于协作开发和提高开发效率，以及减少后期维护的工作量，大量使用CSS来定制网页风格。

又，我们经常见到论坛或者blogs上面可以自由切换我们博客的风格，其实这在asp.net2.0中提供的皮肤功能很容易实现这些效果。

下面以一个日历控件的例子来说明：

日历控件是一个式样比较复杂的控件，如果我们在页面中定义，虽然可以达到目的但感觉很乱，且维护麻烦，不便于协作开发,如下。

        <asp:Calendar ID="Calendar1" runat="server"
           BackColor="Beige"
           ForeColor="Brown"
           BorderWidth="3"
           BorderStyle="Solid"
           BorderColor="Black"
           Height="450"
           Width="450"
           Font-Size="12pt"
           Font-Names="Tahoma,Arial"
           Font-Underline="false"
           CellSpacing=2
           ShowGridLines=true
        >
            <TitleStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" Height="50px" />
            <DayHeaderStyle BorderColor="darkolivegreen" BorderWidth="3" BackColor="olivedrab" ForeColor="black" Height="20px" />
            <WeekEndDayStyle BackColor="palegoldenrod" Width="50px" Height="50px" />
            <DayStyle Width="50px" Height="50px" />
            <TodayDayStyle BorderWidth="3" />
            <SelectedDayStyle BorderColor="firebrick" BorderWidth="3" />
            <OtherMonthDayStyle Width="50px" Height="50px" />
        </asp:Calendar>

我们如果使用Asp.NET2.0提供的皮肤来设置它，就显得清晰明了的多。

1、首先选择网站项目名称→右键单击→添加新项

2、选择添加“外观文件”，输入外观文件名（皮肤文件）：

3、系统会建立一个app_themes文件夹，并在里面建立一个皮肤文件夹mytheme，并在里面建立一个皮肤文件mytheme.skin：

4、根据自己页面的需要，可是添加页面的CSS文件以及不同控件的皮肤文件：

各个文件内容如下：

Calendar.skin:

<asp:Calendar runat="server"
    BackColor="#FFFFCC"
    BorderColor="#FFCC66"
    BorderWidth="1px"
    DayNameFormat="FirstLetter"
    Font-Names="Verdana"
    Font-Size="8pt"
    ForeColor="#663399"
    Height="200px"
    ShowGridLines="True"
    Width="220px">

    <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
    <SelectorStyle BackColor="#FFCC66" />
    <OtherMonthDayStyle ForeColor="#CC9966" />
    <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
    <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
    <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
    <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
</asp:Calendar>

<asp:Calendar SkinID="Simple" runat="server"
    BackColor="White"
    BorderColor="#999999"
    CellPadding="4"
    DayNameFormat="FirstLetter"
    Font-Names="Verdana"
    Font-Size="8pt"
    ForeColor="Black"
    Height="180px"
    Width="200px">

    <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
    <SelectorStyle BackColor="#CCCCCC" />
    <WeekendDayStyle BackColor="#FFFFCC" />
    <OtherMonthDayStyle ForeColor="#808080" />
    <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
    <NextPrevStyle VerticalAlign="Bottom" />
    <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
    <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>

Label.skin:

<asp:label runat="server"
    font-bold="true"
    forecolor="orange" />

<asp:label runat="server" SkinID="Blue"
    font-bold="true"
    forecolor="blue" />

Default.css:

body {
    margin-top: 0px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000000;
}
A:hover {
    color: #0066ff;
    background-color:Transparent;
}

A:active {
    color:#333366;
    text-decoration:none;
    background-color:Transparent;
}

A:link {
    color:#333366;
    text-decoration:none;
    background-color:Transparent;
}

A:visited {
    color:#333366;
    text-decoration: none;
    background-color:Transparent;
}

然后在Aspx页面中把页面与皮肤关联即可：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" Theme="myTheme"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
    </div>
    </form>
</body>
</html>

我们主要关注的是第一行的Theme="myTheme"。

注意：
1、如果主题是通过设置 @Page 指令或配置的 <pages/> 节的 Theme 属性 (attribute) 应用的，则主题中的外观属性 (property) 将重写页中目标控件的同名属性 (property)。
2、通过将 @Page 指令或配置的 <pages/> 节的 StyleSheetTheme 属性设置为主题的名称，可以将主题定义作为服务器端样式来应用。主题属性用作 StyleSheetTheme 时，可能被页中的控件重写。
3、 StyleSheetTheme 应在应用程序开发过程中应用，它作为从页中提取样式信息的手段，使应用程序的行为可独立于应用程序的外观进行维护。对应用程序应用 StyleSheetTheme 后，您可能还希望应用 Theme。如果对应用程序既应用 Theme 又应用 StyleSheetTheme，则按以下顺序应用控件的属性：

首先应用 StyleSheetTheme 属性
应用页中的控件属性（重写 StyleSheetTheme）
最后应用 Theme 属性（重写控件属性和 StyleSheetTheme）

4、在皮肤文件里面可以针对同一个控件设置多个皮肤风格，使用skinid来区分不同风格，并在aspx页面文件的控件中使用skinid来引用不同皮肤风格：

        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
        <asp:Label ID="Label3" runat="server" Text="Label" SkinID="Blue"></asp:Label>

其中Label3使用Blue皮肤，其他使用默认的皮肤。

二. 动态加载皮肤

这也是Asp.NET2.0极大提升页面效果的画龙点睛之处：

我们在App_Themes中配置置了ThemeA皮肤和ThemeB皮肤，我们就可以动态修改皮肤了：

ThemeA里的Label.skin:

<asp:label runat="server"
font-bold="true"
forecolor="orange" />

ThemeB里的Label.skin:

<asp:label runat="server"
font-bold="true"
forecolor="blue" />

CodeTheme.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CodeTheme.aspx.cs" Inherits="Default4"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>CodeTheme</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <a href="CodeTheme.aspx?Theme=ThemeA">Theme A</a>
        <a href="CodeTheme.aspx?Theme=ThemeB">Theme B</a>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>

CodeTheme.aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class Default4 : System.Web.UI.Page
{
    protected void Page_PreInit()
    {
        Page.Theme = Request.QueryString["Theme"];
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

三、为应用程序指定和禁用主题

每个应用程序中都包括多个页面，并且为了保证和谐统一的用户界面，我们可以让所有页面使用同一主题。如果为在每个页头都设置相同的Theme属性值，那么非常麻烦。为了快速地为整个应用程序的所有页面设置相同的主题，可以设置Web.Config文件的<pages>配置节内容。

<?xml version="1.0"?>

<configuration>
    <appSettings/>
    <connectionStrings/>
    <system.web>
        
        <compilation debug="true"/>
        
        <authentication mode="Windows"/>
        
      <pages theme="FirstTheme" />
    </system.web>
</configuration>

如果某个页面不想使用Web.Config中设置的主题，我就可以禁用页面主题，实现方法如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableTheming="false"%>

Posted on 2007-03-12 12:01 Clark Zheng 阅读(2165) 评论(3) 编辑收藏举报

刷新页面返回顶部