13主题

主题
的主题与外观
主题是web应用程序中进行各样式的设置 主题的组成元素
外观文件(皮肤文件) CSS文件(样式表文件) 图片和其他资源
主题的类型
全局主题 应用于Web服务器的所有Web应用程序 应用程序主 应用程序主题(页面主题)
在网站上创建名为App_Themes文件夹 在此文件夹内创建自己命名的子文件夹，子文件夹名就是主 题名称 在主题内部添加组成主题的外观、样式表和图像
创建外观文件与CSS文件
在主题文件夹中添加扩展名为.skin的外观文件 外观文件内容的语法之前已看到过，需要注意的是
主题的使用
应用程序主题的页面指定
在页面的Page指令中添加主题属性即可 <%@ Page Language="C#" ...... Theme="Default" %> 此页面就能自动使用主题中的各元素了
外观文件的使用
如果某种类型的控件有默认外观设置的话，会自动使用外观的设置 如果不希望使用默认外观则可通过设置控件的SkinID=“命名主题名”来选择 需要的外观设置
控件应用如下：
<asp:ListBox ID="l1" runat="server"></asp:ListBox> <asp:ListBox ID="l2" runat="server" SkinID="lb"></asp:ListBox> <asp:ListBox ID="l3" runat="server" SkinID="lb" Width="300"></asp:ListBox>
你仍然需要Page.PreInit事件的事件处理程序来将选 定的主题应用到页面上
本节练习
请使用主题文件夹为注册页面创建数个不同的主题 主题中需要包含对文本框、按钮的外观描述 通过让用户选择不同的主题名动态切换页面的主题选 用
外观文件中的控件设置不能包含ID属性 控件必须包含runat="server" 没有设置SkinID属性的设置为默认外观 设置过SkinID属性的外观被称为命名外观 一个主题中只允许为一种控件设置一个默认外观
CSS文件的创建与普通创建相同，只需将CSS文件放 置在主题文件夹下即可
protected override void OnPreInit(EventArgs e){ base.OnPreInit(e); if(this.Session["Theme"].ToString() != ""){ this.Theme = this.Session["Theme"].ToString(); } }
个人用户的主题信息除了使用会话保存外，还可以保 存在Cookie、用户配置文件、数据库等地方
提供主题选择页面
由于所有的主题文件夹都在App_Themes文件夹中， 因此可遍历此文件夹得到当前应用程序可以主题
protected void Page_Load(object sender,EventArgs e){ if(!this.IsPostBack){ DirectoryInfo themeDir = new DirectoryInfo(this.Server.MapPath("App_Themes")); this.lstThemes.DataTextField = "Name"; this.lstThemes.DataSource = themeDir.GetDirectories(); this.lstThemes.DataBind(); } } protected void btnApply_Click(object sender,EventArgs e){ this.Session["Theme"] = this.lstThemes.SelectedValue; this.Response.Redirect(this.Request.FilePath); }
CSS文件
与HTML开发时的CSS没有大的区别，只是在引用样式表时有 所不同
定义主题
全局主题
使用以下路径创建Themes文件夹
iis的默认网站路径 ，例如 (C:\Inetpub\wwwroot\aspnet_client\system_web\版本号 \Themes\
在此文件夹内创建子文件夹，即主题 向主题内部添加组成主题的外观、样式表和图像
此时 l3 的宽度是 300px，而不是 200px，StylesheetTheme 就是指按解释样式 表的方式解释皮肤，也就是：相同的属性，谁最后出现，谁的设置有效。这 就是 Theme 和 StylesheetTheme 的区别
动态应用主题
主题不仅用于标准化外观，还用于使每个用户可配置 外观，使你的用户有机会选择页面要使用的主题 主题的设置需要在页面的PreInit事件阶段完成，配合 Session使用动态主题的代码如下：
外观文件是主题的核心内容，用于定义页面中服务器 控件的外观。 扩展名为.skin 控件外观设置的示例代码
<asp:TextBox runat="server" BackColor="Transparent" BorderColor="Red" BorderStyle="Dotted" />
theme与styleSheetTheme 区别
在 .aspx 文件中，指令如下：
<%@ Page Language="C#" Theme="BlueSky"%>
主题中外观文件的设置如下：
<asp:ListBox runat=“server” width=“100”/> <asp:listBox runat=“server” SkinID=“lb” width=“200”/>
@Page 指令中，Theme 属性值为主题文件夹的名称，我们可以看到 l1 的宽度 为 100px，l2、l3 指定了 SkinID，所以其宽度为 200px，l3 中指定的 Width="300" 无效 将指令改为如下：
<%@ Page Language="C#" StylesheetTheme="BlueSky"%>
CSS文件的使用
主题中如果包含CSS文件的话页面无需引用会自动应用此样式表中的所有样式 如果有多个样式表中的设置发生重复，则以排在后面的样式表设置为准
CSS与外观的优先级
外观的优先级永远在CSS样式之前
全局主题的应用
如果需要对整个应用程序所有的页面进行主题设置请 按以下方式操作
<configuration> <system.web> <pages theme="主题名称"/> </system.web> </configuration> 或者 <configuration> <system.web> <pages styleSheetTheme="主题名称"/> </system.web> </configuration>