ASP.NET 2.0 Theme 学习笔记
2007-01-11 12:29
621 查看
1. 简介:
Theme(主题)是 Microsoft ASP.NET 2.0 的一项新增功能，使用此功能可以一次定义一组控件的外观，并可以将该外观应用于整个 Web 应用程序。例如，通过利用主题功能，您可以在一个中心位置为应用程序中的所有 TextBox 控件定义共同的外观，如背景颜色和前景颜色。使用主题功能可以轻松建立并维护整个网站外观的一致性。
2. 应用
2.1. 创建和使用主题
2.1.1. 创建
在VS2005中新建Web项目开发目前有种方式，
1 新建-项目-Web Application
2 新建-Web Site
无论采用哪种方式新建的工程。都无App_Themes文件夹，这是ASP.NET 2.0 Theme新增的功能。所有的THEME都必须放在App_Themes文件夹下。可以在添加新项时把App_Themes文件夹添加进来。
创建Theme，在App_Themes文件夹下添加Black文件夹。这样就创建了一个名为Black的主题.为该主题添加Button.skin.
Skin 文件是实际包含主题所应用的格式设置的文件。换句话说，该文件包含主题所应用的一个或多个控件外观
可以在 Skin 文件中设置的控件属性是有限的。通常，仅可以设置外观属性
2.1.2. 应用
针对Button做它的皮肤
Button.Skin
<asp:Button runat="server" ForeColor="Red" Text="在在"></asp:Button>
这里设定了Button控件前景色为”红色”，文本显示为”在在”
在ASPx中应用主题
<%@Page Theme="Black"%>
看Page的Theme属性。说明此页应用了”Black”主题
页面显示效果为应用主题的所有页面的Button控件的前景色为”红色”，文本显示为”在在”
2.2. 默认外观与命名外观
在2.1.2中应用主题的所有页面的Button控件的外面全部是一个样式（默认外观），而在实际开发中可能需要两个Button或者更多的button需要有不同的样式。（命名外观）
这里要用到SKINID属性
SKINID是指控件的皮肤指定给已定义好的SKIN。
例如Button.Skin
<asp:Button runat="server" ForeColor="Yellow" Text="指定SKID" SkinID="btnYellow"></asp:Button>
<asp:Button runat="server" ForeColor="Red" Text="在在"></asp:Button>
Aspx代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TS.WebForm1" Theme="Black"%>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" SkinID="btnYellow" Text="Button" /></div>
</form>
</body>
</html>
运行效果
红色的是button1采用默认的皮肤，黄色的button2指定了皮肤ID为btnYellow。
2.3. 将主题应用于整个应用程序
在页面中指定theme属性这样很麻烦，需要在每个页面中都指定theme属性。
如何让项目的所有页面都应用此theme呢?
可以在Web.Config中指定。
在System.Web配置节中添加如下代码
<pages theme="black"/>
这样此主题就在整个应用程序中有效,这样不用在每个页面中指定Theme属性。
2.4. 主题与 StyleSheetTheme
主题应用于页面时，主题中所设置的任何控件属性都优先于页面中所设置的任何属性。
例如，指定了theme为”Black” 所有的button
<asp:Button ID="Button1" runat="server" ForeColor=Gray" Text="Button" />
即使指定了前景色(ForeColor)为”Gray” 也会显示前景色为”Red” 参见2. 2Button.Skin
但是，在某些情况下，(这种情况可以在不指定SKINID的情况下，只有一个button的默认外观)您会希望替代页面中的特定外观设置。例如，当页面中存在多个 button控件时，您可能会希望将某个 button 控件的 ForeColor 更改为红色，以便突出显示该控件。在这种情况下，您就需要利用 StyleSheetTheme。StyleSheetTheme 的工作方式与普通主题非常相似，只不过它可以被个别控件的属性所替代。
ASPX StylesheetTheme="Black"
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TS.WebForm1" StylesheetTheme="Black"%>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" />
<asp:Button ID="Button2" runat="server" ForeColor="green" Text="Button" /></div>
</form>
</body>
</html>
StylesheetTheme="Black"
采用此种方式应用主题，button1采用的是button.skin的默认外观，而button2是采用的自己的外观属性，也就是说主题外观没有控件本身的外观属性优先级高.
2.5. 级联样式表和主题
级联样式表也就是CSS即Cascading Style Sheet(级联样式单)的缩写，是用来进行网页风格设计的。格式化网页
主题中也可以使用CSS。在”Black”主题中新加CSS文件
内容为
body
{
background-color:Black;
}
这样在应用了”black”主题的所有页面的背影颜色为”黑色”
在主题中使用CSS需要注意的地方是。ASPX页面必须包含服务器端 <head runat="Server"/> 标记,此标记负责自动生成样式表的链接。
2.6. 动态加载主题
网站如需要根据用户选择进行主题的变更，就需要动态的加载主题.
这里建两个主题分别是
“Black”
Button.Skin
<asp:Button runat="server" ForeColor="Red" SkinID="btn" Text="在在"></asp:Button>
“Green”
Button.Skin
<asp:Button runat="server" SkinID="btn" ForeColor="Green" Text="1111"></asp:Button>
新建 PageBase.CS做为所有Web页的基类。
using System;
using System.Data;
using System.Configuration;
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;
namespace TS
{
public class PageBase:System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.Load += new System.EventHandler(this.PageBase_Load);
}
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
Page.Theme = Request.QueryString["ThemeName"].ToString();
}
public void PageBase_Load(object sender, System.EventArgs e)
{
}
}
}
然后在所有的ASPX页的后台CS代码中继承PageBase类
PreInit事件可以在初始时指定主题。需要在页面CS中调用。这样需要在每个页面中调用，所以这里在PageBase类中重写OnPreInit方法。使继承室PageBase类的页面主题统一改变。
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TS._Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" SkinID="Red" Text="Button" /></div>
</form>
</body>
</html>
输入地址
Http://Localhost/Default.aspx?ThemeName=Black
Http://Localhost/Default.aspx?ThemeName=Green
3. 总结
学习ASP.NET 2.0新增功能主题(Theme)的基础使用方法和应用，要想更好的为网站实现换肤功能，CSS的知识是不可或缺的，并且重要。
参考文档:
MSDN http://www.microsoft.com/china/msdn/library/webservices/asp.net/dnvs05themes.mspx?mfr=true
Theme(主题)是 Microsoft ASP.NET 2.0 的一项新增功能，使用此功能可以一次定义一组控件的外观，并可以将该外观应用于整个 Web 应用程序。例如，通过利用主题功能，您可以在一个中心位置为应用程序中的所有 TextBox 控件定义共同的外观，如背景颜色和前景颜色。使用主题功能可以轻松建立并维护整个网站外观的一致性。
2. 应用
2.1. 创建和使用主题
2.1.1. 创建
在VS2005中新建Web项目开发目前有种方式，
1 新建-项目-Web Application
2 新建-Web Site
无论采用哪种方式新建的工程。都无App_Themes文件夹，这是ASP.NET 2.0 Theme新增的功能。所有的THEME都必须放在App_Themes文件夹下。可以在添加新项时把App_Themes文件夹添加进来。
创建Theme，在App_Themes文件夹下添加Black文件夹。这样就创建了一个名为Black的主题.为该主题添加Button.skin.
Skin 文件是实际包含主题所应用的格式设置的文件。换句话说，该文件包含主题所应用的一个或多个控件外观
可以在 Skin 文件中设置的控件属性是有限的。通常，仅可以设置外观属性
2.1.2. 应用
针对Button做它的皮肤
Button.Skin
<asp:Button runat="server" ForeColor="Red" Text="在在"></asp:Button>
这里设定了Button控件前景色为”红色”，文本显示为”在在”
在ASPx中应用主题
<%@Page Theme="Black"%>
看Page的Theme属性。说明此页应用了”Black”主题
页面显示效果为应用主题的所有页面的Button控件的前景色为”红色”，文本显示为”在在”
2.2. 默认外观与命名外观
在2.1.2中应用主题的所有页面的Button控件的外面全部是一个样式（默认外观），而在实际开发中可能需要两个Button或者更多的button需要有不同的样式。（命名外观）
这里要用到SKINID属性
SKINID是指控件的皮肤指定给已定义好的SKIN。
例如Button.Skin
<asp:Button runat="server" ForeColor="Yellow" Text="指定SKID" SkinID="btnYellow"></asp:Button>
<asp:Button runat="server" ForeColor="Red" Text="在在"></asp:Button>
Aspx代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TS.WebForm1" Theme="Black"%>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Button ID="Button2" runat="server" SkinID="btnYellow" Text="Button" /></div>
</form>
</body>
</html>
运行效果
红色的是button1采用默认的皮肤，黄色的button2指定了皮肤ID为btnYellow。
2.3. 将主题应用于整个应用程序
在页面中指定theme属性这样很麻烦，需要在每个页面中都指定theme属性。
如何让项目的所有页面都应用此theme呢?
可以在Web.Config中指定。
在System.Web配置节中添加如下代码
<pages theme="black"/>
这样此主题就在整个应用程序中有效,这样不用在每个页面中指定Theme属性。
2.4. 主题与 StyleSheetTheme
主题应用于页面时，主题中所设置的任何控件属性都优先于页面中所设置的任何属性。
例如，指定了theme为”Black” 所有的button
<asp:Button ID="Button1" runat="server" ForeColor=Gray" Text="Button" />
即使指定了前景色(ForeColor)为”Gray” 也会显示前景色为”Red” 参见2. 2Button.Skin
但是，在某些情况下，(这种情况可以在不指定SKINID的情况下，只有一个button的默认外观)您会希望替代页面中的特定外观设置。例如，当页面中存在多个 button控件时，您可能会希望将某个 button 控件的 ForeColor 更改为红色，以便突出显示该控件。在这种情况下，您就需要利用 StyleSheetTheme。StyleSheetTheme 的工作方式与普通主题非常相似，只不过它可以被个别控件的属性所替代。
ASPX StylesheetTheme="Black"
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TS.WebForm1" StylesheetTheme="Black"%>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" />
<asp:Button ID="Button2" runat="server" ForeColor="green" Text="Button" /></div>
</form>
</body>
</html>
StylesheetTheme="Black"
采用此种方式应用主题，button1采用的是button.skin的默认外观，而button2是采用的自己的外观属性，也就是说主题外观没有控件本身的外观属性优先级高.
2.5. 级联样式表和主题
级联样式表也就是CSS即Cascading Style Sheet(级联样式单)的缩写，是用来进行网页风格设计的。格式化网页
主题中也可以使用CSS。在”Black”主题中新加CSS文件
内容为
body
{
background-color:Black;
}
这样在应用了”black”主题的所有页面的背影颜色为”黑色”
在主题中使用CSS需要注意的地方是。ASPX页面必须包含服务器端 <head runat="Server"/> 标记,此标记负责自动生成样式表的链接。
2.6. 动态加载主题
网站如需要根据用户选择进行主题的变更，就需要动态的加载主题.
这里建两个主题分别是
“Black”
Button.Skin
<asp:Button runat="server" ForeColor="Red" SkinID="btn" Text="在在"></asp:Button>
“Green”
Button.Skin
<asp:Button runat="server" SkinID="btn" ForeColor="Green" Text="1111"></asp:Button>
新建 PageBase.CS做为所有Web页的基类。
using System;
using System.Data;
using System.Configuration;
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;
namespace TS
{
public class PageBase:System.Web.UI.Page
{
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
this.Load += new System.EventHandler(this.PageBase_Load);
}
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
Page.Theme = Request.QueryString["ThemeName"].ToString();
}
public void PageBase_Load(object sender, System.EventArgs e)
{
}
}
}
然后在所有的ASPX页的后台CS代码中继承PageBase类
PreInit事件可以在初始时指定主题。需要在页面CS中调用。这样需要在每个页面中调用，所以这里在PageBase类中重写OnPreInit方法。使继承室PageBase类的页面主题统一改变。
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TS._Default" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" SkinID="Red" Text="Button" /></div>
</form>
</body>
</html>
输入地址
Http://Localhost/Default.aspx?ThemeName=Black
Http://Localhost/Default.aspx?ThemeName=Green
3. 总结
学习ASP.NET 2.0新增功能主题(Theme)的基础使用方法和应用，要想更好的为网站实现换肤功能，CSS的知识是不可或缺的，并且重要。
参考文档:
MSDN http://www.microsoft.com/china/msdn/library/webservices/asp.net/dnvs05themes.mspx?mfr=true
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- [ASP.NET学习笔记之十二]ASP.NET 2.0中Theme、MasterPage和代码国际化
- [ASP.NET学习笔记之十四]ASP.NET 2.0 数据绑定
- [ASP.NET学习笔记之二十五]ASP.NET 2.0中的异步页面
- ASP.NET 2.0 之 Master Page 学习笔记
- ASP.NET 2.0 学习笔记 1: session 与 script 应用
- ASP.NET Core 2.0系列学习笔记-应用程序修改默认端口支持外网IP访问
- ASP.NET 2.0 状态管理 学习笔记（一）
- ASP.NET 2.0入门经典学习笔记.txt
- [ASP.NET学习笔记之二十]ASP_NET 2.0 中web part使用指南
- ASP.NET Core 2.0系列学习笔记-DI依赖注入
- ASP.NET Core 2.0系列学习笔记-Middleware中间件
- ASP.NET Core2.0 学习笔记(一)
- 《professional asp.net 2.0 》学习笔记--连载
- ASP.NET 2.0 之 Master Page 学习笔记 --zt
- ASP.NET Core 2.0系列学习笔记-ADO.NET-MSSQLServerHelper
- ASP.NET 2.0 学习笔记 2: 页面间传值
- ASP.NET Core 2.0系列学习笔记-ORM框架之Dapper
- 关于asp.net 2.0 入门学习之“GlobalResources与Callback问题”的笔记
- ASP.NET 2.0 之 Master Page 学习笔记
- [ASP.NET学习笔记之三十]ASP.NET 2.0的代码隐藏和编译模型