尊重作者,请保留 www.it55.com 链接字样。
这一节我们联系asp.net 2.0新特性:主题和皮肤。
主题和皮肤的制作
新建web网站,在项目上右键“添加ASP.NET文件夹”>>>“主题”,并将默认生成的“主题1”重命名为“blue”:
在blue主题上右键“添加新项”,
弹出的设置框中选择“外观文件”,并命名为“button.skin”,最后“添加”
修改button.skin内容如下:
<%--
默认的外观模板。以下外观仅作为示例提供。
1. 命名的控件外观。SkinId 的定义应唯一,因为在同一主题中不允许一个控件类型有重复的 SkinId。
<asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
<AlternatingRowStyle BackColor="Blue" />
</asp:GridView>
2. 默认外观。未定义 SkinId。在同一主题中每个控件类型只允许有一个默认的控件外观。
<asp:Image runat="server" ImageUrl="~/images/image1.jpg" />
--%>
<asp:Button runat="server" BackColor="LightSteelBlue" BorderStyle="None" ForeColor="Navy" />
<asp:Button runat="server" BackColor="LightSteelBlue" BorderStyle="Groove" ForeColor="Navy" Text="Button" BorderColor="RoyalBlue" SkinID="withBorder" />
在blue主题上右键“添加新项”,弹出的设置框中选择“样式表”,并命名为“style.css”,最后“添加”
style.css内容如下:
}
Default.aspx内容:
<%@ Page Language="C#" AutoEventWireup="true" Theme="blue" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>主题和皮肤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
整个页面因为应用了blue主题中的style.css,所以内容居中,背景为灰色
<br />
<asp:Button ID="Button1" runat="server" Text="Button" /><br />这个按钮没有设置SkinId,就调用默认外观
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Button" SkinID="withBorder" /><br />这个按钮将根据SkinId调用特定外观
</div>
</form>
</body>
</html>
注:如果页面中的控件有自己的样式或外观定义,那么该定义将覆盖主题的定义。运行结果:
关于主题的应用
上述在页面头部通过Theme="主题名称"来应用主题的方式是页面级主题应用;应用程序级主题应用方法如下:
在Web.config文件中配置如下节:
<configuration>
<system.web>
<pages Theme="主题名称" />
</system.web>
</configuration>
注:某个文件夹下的Web.config中的Theme设置将覆盖应用程序的Theme设置.
关于动态加载主题
因为page对象的Theme属性只能在页面的PreInit事件发生过程中或者之前进行设置,所以我们必须在Page_PreInit事件处理程序中修改Theme属性值,以达到动态调用主题的目的.
具体实现方法就不再叙述了,大家可以查看这篇文章:Asp.net 2.0中动态加载主题的两种实现方法
关于主题和样式的内容的基础内容大概只有这些了,下一节我们将一起学习: asp.net 2.0新特性 站点导航控件