定义 ASP.NET 页面主题

asp.net定义主题(很简单的)

2009-11-10 12:08

如何：定义 ASP.NET 页面主题

Visual Web Developer

如何：定义 ASP.NET 页面主题

 

更新：2007 年 11 月

在 Visual Web Developer 中，您可以定义一些页主题，然后可以将这些页主题应用于应用程序的一个或多个页。您也可以创建计算机级的主题，这种主题可用在服务器上的多个应用程序中。

主题由多个支持文件组成，包括页外观样式表、定义服务器控件外观的控件外观，以及构成主题的任何其他支持图像或文件。无论主题是定义为页主题还是全局主题，主题的内容都是相同的。

通过使用 Theme 或 @ Page 指令的 StyleSheetTheme 属性，或者通过在应用程序配置文件中设置 pages 元素（ASP.NET 设置架构） 元素，都可以应用主题。Visual Web Developer 只以可视方式显示使用 StyleSheetTheme 属性应用的主题。

创建页主题

1. 在解决方案资源管理器中，右击要为其创建页主题的网站名称，然后单击“添加 ASP.NET 文件夹”。

2. 单击“主题”。

   如果 App_Themes 文件夹不存在，Visual Web Developer 则会创建该文件夹。Visual Web Developer 即为主题创建一个新文件夹，作为 App_Themes 文件夹的子文件夹。

3. 键入新文件夹的名称。

   此文件夹的名称也是页主题的名称。例如，如果您创建一个名为 \App_Themes\FirstTheme 的文件夹，则主题的名称为 FirstTheme。

4. 将构成主题的控件外观、样式表和图像的文件添加到新文件夹中。

将外观文件和外观添加到页主题

1. 在解决方案资源管理器中，右击主题的名称，然后单击“添加新项”。

2. 在“添加新项”对话框中，单击“外观文件”。

3. 在“名称”框中，键入 .skin 文件的名称，然后单击“添加”。

   通常的做法是为每个控件创建一个 .skin 文件，如 Button.skin 或 Calendar.skin。但是，您也可以根据需要创建任意数量的 .skin 文件。

4. 在 .skin 文件中，使用声明性语法添加标准控件定义，但仅包含要为主题设置的属性。控件定义必须包含 runat="server" 属性，但不能包含 ID="" 属性。

   下面的代码示例演示 Button 控件的默认控件外观，其中定义了主题中所有 Button 控件的颜色和字体。

   复制代码

   <asp:Button runat="server" 
     BackColor="Red" 
     ForeColor="White" 
     Font-Name="Arial" 
     Font-Size="9px" />

   此 Button 控件外观不包含 skinID 属性。它将应用于使用主题的应用程序中所有未指定 skinID 属性的 Button 控件。

   说明：

   创建控件外观的简单方法是将控件添加到页，并对其进行配置，使其具有您想要的外观。例如，您可以将一个 Calendar 控件添加到页，并设置其日标题、选定的日期和其他属性。然后，您可以将控件定义从页中复制到外观文件，但必须移除 ID 属性。

5. 对您想创建的每个控件外观文件重复步骤 2 和 3。

   说明：

   每个控件只能定义一个默认外观。使用外观的控件声明中的 SkinID 属性为相同类型的控件创建命名外观。

将级联样式表文件添加到页主题

1. 在解决方案资源管理器中，右击主题的名称，然后单击“添加新项”。

2. 在“添加新项”对话框中，单击“样式表”。

3. 在“名称”框中，键入 .css 文件的名称，然后单击“添加”。

   当主题应用于页时，ASP.NET 向页的 head 元素添加对样式表的引用。有关更多信息，请参见 如何：应用 ASP.NET 主题

创建全局主题

全局主题应用于服务器上的所有网站。创建全局主题文件夹的位置取决于您是使用 Internet 信息服务 (IIS) 运行网站还是使用 ASP.NET Development Server 测试网站。

说明：

如果您使用文件系统网站，则默认情况下，Visual Web Developer 启动 ASP.NET Development Server 来运行网站进行测试。对于其他类型的网站，Visual Web Developer 在 IIS 中运行页进行测试。

创建全局主题

1. 使用下面的路径创建 Themes 文件夹。

   复制代码

   %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes

   说明：

   全局主题的文件夹名称为 Themes，而不是 App_Themes，因为后者用于页主题。

   创建 Themes 文件夹的子文件夹以保存全局主题文件。

   子文件夹的名称即是主题的名称。例如，如果您创建一个名为 \Themes\FirstTheme 的文件夹，则主题的名称为 FirstTheme。

2. 将构成全局主题的控件外观、样式表和图像的文件添加到新文件夹中。

   说明：

   在定义全局主题时，不能使用 Visual Web Developer 直接将外观和样式表文件添加到全局主题中。您可能会发现一种更简单的方式，即将主题作为页主题进行定义和测试，然后将其复制到 Web 服务器上用于全局主题的文件夹中。

3. 如果网站是要使用 ASP.NET Development Server 测试的文件系统网站，则可以立即对主题进行测试。

4. 如果要使用本地 IIS 网站测试网站，则打开命令窗口，然后运行 aspnet_regiis -c 在运行 IIS 的服务器上安装主题。

5. 如果要在远程网站或 FTP 网站上测试主题，则必须使用下面的路径手动创建 Themes 文件夹。

   复制代码

   IISRootWeb\aspnet_client\system_web\version\Themes

asp.net主题学习实例
asp.net 2008-08-23 21:48:59 阅读0 评论0   字号：大中小 订阅 
介绍
使用 ASP.NET 2.0 的“主题”功能，可以将样式和布局信息分解为单独的文件组，统称为“主题”。然后，主题可应用于任何站点，影响站点中页和控件的外观。这样，通过更改主题即可轻松地维护对站点的样式更改，而无需对站点各页进行编辑。还可与其他开发人员共享主题。


关键
1、在web site中添加App_Themes文件夹，可以在每个主题文件加内添加.skin文件、.css文件（指定主题后会自动加载主题下所有.css文件）或者图片文件

2、在web.config的<system.web>元素下的<pages>元素下设置theme或者styleSheetTheme属性（针对全局）；在页的@Page指令里设置Theme或者StylesheetTheme属性（针对当前页）

3、Theme定义的样式不可以覆盖；StylesheetTheme定义的样式可以覆盖

4、.skin文件里不设置SkinId则就是默认的，设置了SkinId后则对应控件的SkinId属性

5、动态修改Page的Theme要在Page_PreInit方法中实现


示例
Blue主题
<asp:Label runat="server" BackColor="blue" ForeColor="white" />
<asp:Label runat="server" BackColor="DarkBlue" ForeColor="white" SkinId="Dark" />

<%--ImageUrl如下设置则解析到该主题下的Images文件夹的pic.jpg文件--%>
<asp:Image runat="server" ImageUrl="Images/pic.jpg" />

Red主题
<asp:Label runat="server" BackColor="red" ForeColor="white" />
<asp:Label runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark" />

<%--ImageUrl如下设置则解析到该主题下的Images文件夹的pic.jpg文件--%>
<asp:Image runat="server" ImageUrl="Images/pic.jpg" />

主题测试-Theme
Themes/Theme.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Theme.aspx.cs"
    Inherits="Themes_Theme" Title="主题测试-Theme" Theme="Blue" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p>
        在页头部分指定Theme="Blue"</p>
    <p>
        相关主题文件，我觉得最好把样式写在css里然后设置控件的CssClass属性
        <br />
        &lt;asp:Label ID="Label1" runat="server" BackColor="blue" ForeColor="white" /&gt;
        <br />
        &lt;asp:Label ID="Label2" runat="server" BackColor="DarkBlue" ForeColor="white"
        SkinId="Dark" /&gt;
    </p>
    <p>
        <asp:Label ID="lbl" runat="Server" Text="不做任何设置（使用主题中的没设置SkinId的样式）" />
    </p>
    <p>
        <asp:Label ID="lbl2" runat="Server" Text="设置BackColor为black（因为设置的是页的Theme属性，所以无法覆盖原有样式）" BackColor="black" />
    </p>
    <p>
        <asp:Label ID="lbl3" runat="Server" Text="主题测试设置SkinID为dark（指定SkinId）" SkinID="dark" />
    </p>
</asp:Content>

主题测试-StylesheetTheme
Themes/StylesheetTheme.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="StylesheetTheme.aspx.cs"
    Inherits="Themes_StylesheetTheme" Title="主题测试-StylesheetTheme" StylesheetTheme="Red" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p>
        在页头部分指定StylesheetTheme="Red"</p>
    <p>
        相关主题文件，我觉得最好把样式写在css里然后设置控件的CssClass属性
        <br />
        &lt;asp:Label ID="Label1" runat="server" BackColor="red" ForeColor="white" /&gt;
        <br />
        &lt;asp:Label ID="Label2" runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark"
        /&gt;
    </p>
    <p>
        <asp:Label ID="lbl" runat="Server" Text="不做任何设置（使用主题中的没设置SkinId的样式）" />
    </p>
    <p>
        <asp:Label ID="lbl2" runat="Server" Text="设置BackColor为black（因为设置的是页的StylesheetTheme属性，所以无法覆盖原有样式）" BackColor="black" />
    </p>
    <p>
        <asp:Label ID="lbl3" runat="Server" Text="主题测试设置SkinID为dark（指定SkinId）" SkinID="dark" />
    </p>
</asp:Content>

主题测试-动态加载主题
Themes/Dynamic.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Dynamic.aspx.cs"
    Inherits="Themes_Dynamic" Title="主题测试-动态加载主题" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <p>
        相关.skin文件内容如下：&lt;asp:Image runat="server" ImageUrl="Images/pic.jpg" /&gt;
    </p>
    <p>
        <a href="?theme=blue">蓝色主题</a> &nbsp;<a href="?theme=red">红色主题</a>
    </p>
    <p>
        该Image控件应用主题中的样式，包括ImageUrl
        <br />
        <asp:Image ID="img" runat="server" />
    </p>
</asp:Content>

Themes/Dynamic.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 Themes_Dynamic : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Page_PreInit(object sender, System.EventArgs e)
    {
        // 动态修改Page的Theme要在Page_PreInit方法中实现
        if (!String.IsNullOrEmpty(Request.QueryString["theme"]))
        {
            Page.Theme = Request.QueryString["theme"];
        }
        else
        {
            Page.Theme = "blue";
        }
    }
}
 
 
 
 
VS2005 主题(Theme)和外观(skin)帮助文档:如何应用 ASP.NET 主题
学习集锦 2010-08-06 17:39:20 阅读4 评论0   字号：大中小 订阅 
A.对网站应用主题
B.对单个页应用主题
C.对控件应用外观
D.禁用页的主题
E.禁用控件的主题
F.配置特定文件和子目录 
===================
您可以对页或网站应用主题，或对全局应用主题。
在网站级设置主题会对站点上的所有页和控件应用样式和外观，
除非对个别页重写主题。
在页面级设置主题会对该页及其所有控件应用样式和外观。 
默认情况下，主题重写本地控件设置。
或者，您可以设置一个主题作为样式表主题，
以便该主题将仅应用于未在控件上显式设置的控件设置。
A.对网站应用主题
----------------
1.在应用程序的 Web.config 文件中，
  将 <pages> 元素设置为全局主题或页面主题的主题名称，
  如下面的示例所示： 
  <configuration>
    <system.web>
        <pages theme="ThemeName" />
    </system.web>
  </configuration>
  注意 
  如果应用程序主题与全局应用程序主题同名，则页面主题优先。
2.要将主题设置为样式表主题并作为本地控件设置的从属设置，
  应改为设置 StyleSheetTheme 属性：
  <configuration>
    <system.web>
        <pages StyleSheetTheme="Themename" />
    </system.web>
  </configuration>
  Web.config 文件中的主题设置会应用于该应用程序中的所有 ASP.NET 网页。
  Web.config 文件中的主题设置遵循常规的配置层次结构约定。
  例如，要仅对一部分页应用某主题，
  可以将这些页与它们自己的 Web.config 文件放在一个文件夹中，
  或者在根 Web.config 文件中创建一个 <location> 元素以指定文件夹。
  详细见小节F.配置特定文件和子目录 
 
B.对单个页应用主题
------------------
将 @ Page 指令的 Theme 或 StyleSheetTheme 属性
设置为要使用的主题的名称，
如下面的示例所示：
<%@ Page Theme="ThemeName" %>
<%@ Page StyleSheetTheme="ThemeName" %>
现在，该主题及其对应的样式和外观仅应用于声明它的页。
C.对控件应用外观
----------------
主题中定义的外观应用于已应用该主题的应用程序或页中的所有控件实例。
在某些情况下，您可能希望对单个控件应用一组特定属性。
这可以通过创建命名外观（.skin 文件中设置了 SkinID 属性的一项），
然后按 ID 将它应用于各个控件来实现。
设置控件的 SkinID 属性，如下面的示例所示：
<asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />
如果页面主题不包括与 SkinID 属性匹配的控件外观，
则控件使用该控件类型的默认外观。
D.禁用页的主题
--------------
  将 @ Page 指令的 EnableTheming 属性设置为 false，
  如下例所示：
  <%@ Page EnableTheming="false" %>
E.禁用控件的主题
----------------
  将控件的 EnableTheming 属性设置为 false，
  如下例所示：
  <asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
F.配置特定文件和子目录 
-----------------------
通过使用具有适当的 path 属性的 <location> 标记，
可以将配置设置应用于特定的资源。
path 属性可用于标识要应用唯一配置设置的特定文件或子目录。
在 path 属性中只能使用一个文件路径。
path 属性可以从指示应用程序根目录的“~/”快捷方式开头。
例如，下面的示例配置文件在三个级别指定设置：
应用于当前目录和所有子目录的设置
   （全部内容包含在顶部 <configuration> 标记中）。
应用于 Sub1 子目录的设置
   （全部内容都包含在路径属性设置为 Sub1 的 <location> 标记中）。
应用于 Sub2 子目录的设置
   （全部内容都包含在路径属性设置为 Sub2 的 <location> 标记中）。
<configuration>
  <system.web>
    <sessionState cookieless="true" timeout="10"/>
  </system.web>
         
  <!-- Configuration for the "sub1" subdirectory. -->
  <location path="sub1">
    <system.web>
      <httpHandlers>
        <add verb="*" path="sub1" type="Type1"/>
        <add verb="*" path="sub1" type="Type2"/>
      </httpHandlers>
    </system.web>
  </location>
   
  <!-- Configuration for the "sub1/sub2" subdirectory. -->
  <location path="sub1/sub2">
    <system.web>
      <httpHandlers>
        <add verb="*" path="sub1/sub2" type="Type3"/>
        <add verb="*" path="sub1/sub2" type="Type4"/>
      </httpHandlers>
    </system.web>
  </location>
</configuration>