现在的位置: 首页 > 综合 > 正文

ASP.NET Theme

2013年01月25日 ⁄ 综合 ⁄ 共 2841字 ⁄ 字号 评论关闭

theme就是一系列属性设置,利用它可以定义页面和空间的外观。它控制的范围可以是某些网页、整个web应用程序,甚至可以是一个服务器上的所有Web应用。

theme和控件皮肤
theme由一系列元素组成:皮肤、css、图片以及其它资源。它至少包含皮肤。theme在web server或web site的特殊目录中定义。

皮肤
皮肤文件具有.skin的文件扩展名,包含诸如:button,label,textbox或calender等空间的属性设置。空间皮肤设置就像空间自己的化妆,但只包含你要求设置的那些属性的值。下面是一个button的皮肤设置:
<asp:button runat="server" BackColor="lightblue" ForeColor="black" />
你应该在theme目录下建立.skin文件,一个.skin文件可以包含为一种或种控件设置的一个或多个皮肤,你可以为每个控件定义一个单独的文件,也可以只定义一个文件包含所有空间皮肤的设置。

有两种控件皮肤缺省皮肤和命名皮肤:
在theme应用到一个页面时,缺省皮肤会自动应用到该页面上的所有同类型的控件。什么样的皮肤是缺省皮肤呢?判断的标准就是他是否有SkinID属性,如果没有,就是缺省皮肤。举例来说,假如你为日历控件创建了一个缺省皮肤,这个皮肤会应用到使用theme的页面上的所有日历控件。(缺省皮肤通过控件类型匹配,这样,button皮肤会应用到所有的button,但不会应用到LinkButton等继承button的控件对象)。

一个命名皮肤具有一个SkinID属性。命名皮肤不会自动通过类型应用到控件。你必须通过设置控件的SkinID属性来显式地应用一个命名皮肤。使用命名皮肤允许你为相同控件的不同实例设置不同的皮肤。

层叠样式表
theme同样可以包含层叠样式表(.css)文件。当你把一个.css文件放在theme目录下时,其样式表会自动成为theme的一部分。你可以通过在与skin文件相同的目录下创建.css文件来定义样式表。

图片和其它资源
Theme可以包含图片和其它资源,如脚本文件或声音文件。例如,你的theme的包含了一个TreeView控件的皮肤,你可以包含一些图片用来表示其扩展或收起的按钮。

一般情况下资源文件与skin文件在同一个目录下,但他们可以在Web应用的任何地方,例如在theme目录的一个子目录。如果引用一个在theme目录的子目录下的资源文件,用一个类似下面Image控件所示的路径:
<asp:Image runat="server" ImageUrl="ThemeSubfolder/filename.ext" />
你也可以把你的资源文件存储在theme目录之外的其他目录。如果你使用(~)来引用资源文件,web应用会自动找到这些图片。举例来说,如果你把资源文件放在你的应用程序的一个子目录,你可以用这样的路径:~/SubFolder/filename.ext 来引用资源文件,就像下面这样:
<asp:Image runat="server" ImageUrl="~/AppSubfolder/filename.ext" />

Theme的范围

你可以为一个单独的Web应用定义theme,也可以为Web Server上的所有应用定义一个全局的theme。在theme定义后,你可以通过@Page设置页面的Theme或StyleSheetTheme属性来应用,你也可以通过在应用程序的设置文件中设置Pages元素来把theme应用到所有的页面。如果<pages>元素定义在Machine。config文件,这个theme将会应用到这台服务器的所有应用程序的所有页面。

Page Theme
Page Theme是\App_Themes 的一个子目录,包含控件皮肤,样式表,图片文件以及其它资源。每个Theme是\App_Themes的一个不同的子目录。下面的例子代码是一个典型的Page Theme,定义了两个Theme,分别命名为BlueTheme和PinkTheme。
MyWebSite
  App_Themes
    BlueTheme
      Controls.skin
      BlueTheme.css
    PinkTheme
      Controls.skin
      PinkTheme.css

Global Theme
    global theme是一个可以应用到服务器上所有Web site的theme。在你在一台服务器上维护多个网站时,global theme允许你定义这些网站的总体风格。
    global theme与Page theme很相似,也包含属性设置,样式表设置和图片。但是,global theme存储在Web Server的全局目录,命名为\Themes。在这台服务器上的任何网站,网站中的任何页面,都可以引用这个global theme。

Theme设置的先后顺序
你可以指定theme设置的先后顺序,设置theme设置接管本地控件设置。

如果你设置一个页面的Theme属性,在theme中的控件设置和页面上的页面设置将合并成为该控件的最终设置。如果一个控件属性在页面和theme中都进行了设置,theme中的控件设置将覆盖页面上的控件设置。这样的策略使得各个页面能够保持一致的风格。例如,它可以允许你把theme应用到你在以前版本的ASP.NET中创建的页面。

另外,你还可以把theme以样式表的方式应用到页面,通过设置页面的StyleSheetTheme属性。在这种情况下,本地页面设置优先于theme中的设置。这是使用层叠样式表的模型。如果你想设置单个的控件属性,同时应用theme控制整体表现,你就可以把theme作为样式表来应用。

使用Theme可以设置的属性
作为一个通用规则,你可以使用theme定义有关page或控件外表或静态内容的属性。你只可以设置那些ThemeableAttribute属性设置为true的控件类。
显式定义空间行为的属性不接受theme设置的值,例如,你不能通过Theme设置一个Button的CommandName属性,类似的,你不能使用theme来设置GridView控件的AllowPaging属性或DataSource属性。

Theme和层叠样式表
theme与层叠样式表类似,他们都定义了一个通用属性集,可以应用到任何页面。但是,theme与样式表有以下不同:

  • theme可以定义一个控件或页面的许多属性,不仅是style属性。例如,使用theme,你可以为TreeView控件设定图片,为GridView控件设置模版设计,等等。
  • Theme可以包含图片
  • Theme与样式表的覆盖方式不一样。例如,确省情况下,属性值会覆盖本地属性值除非你把theme作为样式表应用。
  • 每个页面只能应用一个Theme,你不能应用多个theme到一个页面,不象样式表那样,可以应用多个到一个页面。

抱歉!评论已关闭.