皮肤的用法 (asp.net C#)

 看了一下visual web developer 中自带的个人站点，发现 aspnet2.0 里面的很多技术使用起来确实很优雅，比较典型的有 login 控件和用户系统、 MasterPage 、主题和皮肤、 SiteMap 等等。这些特性，甚至不需要教程就可以很快上手。本文要介绍的是主题和皮肤的应用。

(一) 如何使用

1） 在你的应用里面添加 App_Themes 文件夹

2） 将主题相关的文件（包括 .css, 、 .skin 文件、其他资源文件包括图片、 Flash 等）组织到一个以主题名命名的文件夹中，将主题文件夹放于 App_Themes 目录。如果有多个主题，重复上述步骤。

Example ：

Css 文件（ x.css ）

Skin 文件 (x.skin)

.column { } { background-image : url(images/content-shim.gif) ; }

.gradient { } { background-image : url(images/content-shim-photo.gif) ; }

.solid { } { background-image : url(images/content-shim-none.gif) ; }

.header { } {

      background-image : url(Images/header.gif) ;

      background-repeat : no-repeat ;

      position : relative ;

      width : 789px ;

      height : 76px ;

      margin : 0 auto 5px auto ;

}

< asp:imagebutton runat ="server" Imageurl ="Images/button-login.gif" skinid ="login" />

< asp:image runat ="server" Imageurl ="Images/button-create.gif" skinid ="create" />

< asp:image runat ="server" ImageUrl ="Images/button-download.gif" skinid ="download" />

        理论上上来说，不同的主题中的样式表和 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 的话，则更加没有难度。