ASP.NET 2.0 Theme 学习笔记

最新推荐文章于 2016-01-14 08:27:08 发布

newera

最新推荐文章于 2016-01-14 08:27:08 发布

阅读量872

点赞数

分类专栏： .NET 文章标签： asp.net button server asp themes xhtml

本文链接：https://blog.csdn.net/newera/article/details/1479989

版权

.NET 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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">

<title>Untitled Page</title>

</head>

<body>

<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配置节中添加如下代码

这样此主题就在整个应用程序中有效,这样不用在每个页面中指定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">

<title>Untitled Page</title>

</head>

<body>

<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">

<title>Untitled Page</title>

</head>

<body>

<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

newera

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET 2.0 Theme 学习笔记

1. 简介:Theme(主题)是 Microsoft ASP.NET 2.0 的一项新增功能，使用此功能可以一次定义一组控件的外观，并可以将该外观应用于整个 Web 应用程序。例如，通过利用主题功能，您可以在一个中心位置为应用程序中的所有 TextBox 控件定义共同的外观，如背景颜色和前景颜色。使用主题功能可以轻松建立并维护整个网站外观的一致性。2. 应用2.1. 创建和使用主题2.
复制链接

扫一扫