(一) 如何使用
1) 在你的应用里面添加 App_Themes 文件夹
2) 将主题相关的文件(包括.css,、.skin文件、其他资源文件包括图片、Flash等)组织到一个以主题名命名的文件夹中,将主题文件夹放于App_Themes目录。如果有多个主题,重复上述步骤。
Example :
Css 文件(x.css)
Skin 文件(x.skin)
![](https://i-blog.csdnimg.cn/blog_migrate/893d1ea7fe4b325d45745fe1991001ba.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0f7dc688157e7369e26f1ee2f363bef9.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/893d1ea7fe4b325d45745fe1991001ba.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0f7dc688157e7369e26f1ee2f363bef9.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/893d1ea7fe4b325d45745fe1991001ba.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0f7dc688157e7369e26f1ee2f363bef9.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/893d1ea7fe4b325d45745fe1991001ba.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0f7dc688157e7369e26f1ee2f363bef9.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b854634c0904529d4018c4c3336be836.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/b85e684b2ca6c5b54950022b5fa1a5db.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1485f00e0dc7c3d9440f2565a845428f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/98d7df5f546e0df09ba26b20df8afecf.gif)
理论上上来说,不同的主题中的样式表和SKIN文件的结构都应该是完全相同的。
3) 设置你要应用主题的控件的css样式名为css中定义的样式名(比如column、gradient)
设置你要应用主题的服务器控件的SkinId为Skin文件中定义的skinid(比如login、create等),这样在Skin中定义的控件属性会自动附加到当前的控件上(内部也是使用CSS实现的)
4) 应用主题,有三种办法
全局主题:在Web.config中<system.web>中添加<pages StyleSheetTheme ="ThemeName"/>节,这样在整个应用中都会自动应用名为ThemeName 的主题
页面主题:在ASPX文件顶部加入:<%@ Page Language="C#" StylesheetTheme=" ThemeName " %>,这样当前页面都会应用名为ThemeName 的主题,或者在ASPX_CS中加(Page_Load方法)入如下代码 Page. StyleSheetTheme = “ThemeName”;
角色主题:需要使用masterpage 来辅助实现 ,通过User.IsInRole(“RoleName”) 来判断用户是否属于某个角色,然后决定使用何种主题(Page. StyleSheetTheme = “ThemeName”);当然,使用这种办法还可以应用用户选择的主题
如果你仍然感觉迷惑,请查看 Quick Start 。
(二) 工作原理
不同的主题和皮肤之间的不同主要是页面和页面中的控件的样式(包括字体、段落、背景、边框等等)、部分图片的不同。
传统的完全使用CSS来表现不同的主题的方案,在处理图片和图片按钮的地方往往心有余而力不足。而在aspnet2.0里面一切都已经变得简单。
主题和皮肤是 dotnet framework2.0内建支持的,服务器控件添加了SkinId属性,Page类也添加了Theme 和 StyleSheetTheme 属性,其目的就是优雅的支持Skin。在应用指定了主题之后,相关的页面会自动链接位于主题目录下的css文件和skin文件,css的用法跟传统的用法没有什么区别,而skin文件则以一种类似于css的方式工作,指定了SkinId的服务器控件会自动从skin文件中加载并附加匹配的属性或样式(最常用的是Image 和ImageButton的ImageUrl属性,这样做可以使页面在不同的主题下)---这是在服务器端完成的。由于skin文件在使用后是缓存在内存中的,所以效率不会有问题。
(三) Theme 和 StylesheetTheme 的区别
基本上,本文前面所有的 StyleSheetTheme 都可以替换为 Theme ,我猜想区别是使用 Theme 时位于主题文件夹中的 样式表(CSS)文件不会被应用到主题中,但是根据我的测试,发现两种情况下生成的页面中,只有<link href=’’>这一节的位置不同,一个出现在<Title>标记前面,一个则是后面。
(四) 优雅之处
a) 完全Framework内建的支持、不再需要复杂的编程,甚至不再需要编程;
b) 在vs2005中有非常友好的设计时支持,也就是说,在设计的时候你就可以看到某种主题的效果;
c) 学习曲线很平缓,如果你熟悉CSS的话,则更加没有难度。