ASP.NET 2.0 中主题的切换(转载)

1.在theme应用到一个页面时，缺省皮肤会自动应用到该页面上的所有同类型的控件。什么样的皮肤是缺省皮肤呢？判断的标准就是他是否有SkinID属性，如果没有，就是缺省皮肤。
2.一个命名皮肤具有一个SkinID属性。命名皮肤不会自动通过类型应用到控件。你必须通过设置控件的SkinID属性来显式地应用一个命名皮肤。使用命名皮肤允许你为相同控件的不同实例设置不同的皮肤。
3.全局theme设置,为所有页面设置theme,在Web.config的<system.web>片断里加入下面的标记： <pages styleSheetTheme="DataWebControls" />
4.单页面theme设置,通过@Page设置页面的Theme或StyleSheetTheme属性来应用.
5.Theme属性，在theme中的控件设置和页面上的页面设置将合并成为该控件的最终设置。如果一个控件属性在页面和theme中都进行了设置，theme中的控件设置将覆盖页面上的控件设置。这样的策略使得各个页面能够保持一致的风格。例如，它可以允许你把theme应用到你在以前版本的ASP.NET中创建的页面.另外，你还可以把theme以样式表的方式应用到页面，通过设置页面的StyleSheetTheme属性。在这种情况下，本地页面设置优先于theme中的设置。这是使用层叠样式表的模型。如果你想设置单个的控件属性，同时应用theme控制整体表现，你就可以把theme作为样式表来应用。
6.动态设置方法

Global.asax的代码如下：

<%@ Application Language="C#" %>

void Page_PreInit(object sender, BrockAllen.Web.PageEventArgs e)

{

string t = HttpContext.Current.Profile.GetPropertyValue("Theme") as string;

if (t != null && t.Length > 0)

{

e.Page.Theme = t;

}

else

{

e.Page.Theme = "Default";

}

7.读取web.config中的Pages节点

System.Web.Configuration.PagesSection ps = (System.Web.Configuration.PagesSection)System.Configuration.ConfigurationManager.GetSection("system.web/pages");

TextBox1.Text = ps.Theme;

在 Asp.NET 2.0 出现以前，给网站提供更换主题功能是一项繁重的工作，鉴于每切换一套主题，都需要在页面更改相应的图片、字体、网页样式等等细小的元素，因而在代码编写之余，更要求资源的规范管理。而往往在网站的编写初期，如果没有一定的经验，很难全面的考虑到资源文件的细致归类及放置问题。最终导致网站改版时，大量的迁移和更改，稍有不慎，还会引发文件丢失的问题。

现在这些担忧，都在 Asp.NET 2.0 中得到了完善的解决。首先，您可以通过简单的代码编写实现复杂的功能；其次，Asp.NET 2.0 在处理主题的问题时提供了清晰的目录结构，使得资源文件的层级关系非常清晰，在易于查找和管理的同时，提供的良好的扩展性。

下面就让我们通过一个Demo感受一下Asp.NET 2.0 的新特性。

1. 建立主题文件夹：

在应用程序的根目录上单击右键，点选 Add Folder 下的 Theme Folder 选项后，会在根目录下出现名为 App_Themes 的空文件夹，所有的与主题有关的资源文件都会存储在这个文件夹下。

在本例中，选择以颜色不同的方式来区分主题，需要在主题文件夹（App_Themes）下建立两个以颜色为名称的文件夹。

操作方式：在 App_Themes 文件夹上单击右键，将鼠标移动到 Add Folder 选项上，发现在主题文件夹（App_Themes）新增文件夹的类型只有一种 Theme Folder：

建立两个主题文件夹，分别命名为 BlueTheme 和 PorpleTheme。

将主题 BlueTheme 应用于页面：

<%@ Page Language="C#" StylesheetTheme="BlueTheme" %>

3. 分别给每个主题添加 Skin 文件：

Skin 文件是实际包含主题所应用的格式设置的文件。一个主题可以包含一个或多个 Skin 文件。这没有关系，因为在将主题应用于页面时，ASP.NET Framework 将把某个主题下的多个 Skin 文件合在一起，而将这些文件视为一个 Skin 文件。

您可以根据需要将 Skin 文件命名为任何名称，在文件中可以通过声明某个控件的实例设置一个或多个此控件中的属性，从而使用 Skin 文件指定控件的外观。（注：并不是所有属性都可以设置，能设置的多为外观属性）。

本例中先在主题 BlueTheme 中建立新文件 Control.skin，在文件中对三个控件的某些属性进行了设置。

<asp:TextBox

BackColor="#c4d4e0"

ForeColor="#0b12c6"

Runat="Server" />

<asp:Label

ForeColor="#0b12c6"

Runat="Server" />

<asp:Button

BackColor="#c4d4e0"

ForeColor="#0b12c6"

Runat="Server" />

此时页面页面代码为:

此时页面效果为:

4. 使用 CSS 文件做更细致的设置：

对于一套皮肤的设置,我们不仅需要对网页中的控件进行设置,还应该做到对网页中的任一显示元素都进行随心所欲的修改,这时,我们可以通过对CSS样式表文件的控制来达到目的.

本例中在主题 BlueTheme 中建立了新文件 Default.css, 在此文件中对页面中的 body,table,td 元素进行了设置.

body
{ margin:0; padding:0; overflow:hidden; }

.tableStyle
{ font-family:"宋体"; font-size:12px;color:#000000;
line-height:120%; background-image:url(image/bg.jpg); }

.tdStyle
{ background-image:url(image/Bar_out.gif); }

再更改部分页面代码调用 CSS 样式后, 效果如下

5. 主题的动态切换：

在前台页面 Default.aspx 中添加一个下拉框,用来进行主题的选择.

<tr>
  <td colspan="2">
    <br />   您可以在此处选择页面主题：
    <asp:dropdownlist id="ChooseTheme" runat="server" autopostback="true">
      <asp:ListItem Value="BlueTheme">请选择颜色</asp:ListItem>
      <asp:ListItem Value="BlueTheme">蓝色</asp:ListItem>
      <asp:ListItem Value="PorpleTheme">紫色</asp:ListItem>
    </asp:dropdownlist>
    <br /><br /><br />
  </td>
</tr>

在后台页面 Default.aspx.cs 中添加代码用来在每次刷新页面时替换新选的主题.

protected void Page_PreInit(object sender, System.EventArgs e)
{
Page.Theme = Request["ChooseTheme"];
}

点选下拉框中的选项,主题便会在页面刷新后改变,如:把蓝色主题切换为紫色主题，效果如下：

以上，便是 ASP.NET 2.0 中新增的主题功能，利用此项功能，我们不仅可以快速的将各式各样的外观应用于整个 Web 应用程序。还可以更加轻松的完成网站的扩充和维护工作。

点击此处下载工程文件

posted @ 2008-11-01 15:20 ejiyuan 阅读(1762) 评论(0) 编辑收藏举报

刷新页面返回顶部

成长的足迹.NET

我的.NET成长之路

ASP.NET 2.0 中主题的切换(转载)

公告