1、给网页应用theme时,要在欲应用主题的页面加上:
<%@ Page Theme="**" %>
其中**为自己定于主题文件的名字。
2、若要为同一控件创建多个外观则应该在定义theme时同时定义该theme
的SkinID,在应用时为要应用theme的控件指明其SkinID即可。
3、主题文件的应用有两种方法:
<asp:TextBox runat="server" BackColor="#F7DE8A" BorderColor="#933126"
BorderStyle="Solid" BorderWidth="1px" />
或者
Style.css (位于App_Themes\SkinFile中,即与.skin文件在同一目录)
.textBox {border:1px solid #933126; background-color:#F7DE8A;}
Default.skin
<asp:TextBox runat="server" CssClass="textBox" />
据说第二种方法要可以大大缩减生成后的页面体积,但是并未“证实”。
4、关于CSS文件在主题中的使用说明
如果 Themes 文件夹的内容被编译为某一类,
则 Themes 文件夹中存在的任何级联样式表都将被添加到该类中。
使样式表自动应用于页面的一个要求是该页面必须包含服务器端 <head runat="Server" /> 标记。
此标记用于使链接呈现样式表中的样式。
5、可以将theme应用于整个应用程序,方式如下:
<configuration>
<system.web>
<pages theme="**" /> //**为.skin文件
</system.web>
</configuration>
但是在存在页面theme指令时,其将不生效。另外,同一应用程序可以包含用于指定主题的多个
Web.Config 文件。方法是将不同的 Web 配置文件添加到不同的子文件夹中,并且每个 Web
配置文件都可以指定不同的主题。
6、关于优先级的问题
将主题应用于页面时,主题中所设置的任何控件属性都优先于页面中所设置的任何属性。
但是若要使主题的优先级低于页面控件的属性设置可以在引用主题时使用如下指令:
<%@ Page StyleSheetTheme="OrangeTheme" %>
7、处理某些控件(例如 Menu、TreeView 或 BulletedList 控件)时,在主题中添加图像
以BulletedList为例方法如下:
<asp:BulletedList
BulletStyle="CustomImage"
BulletImageUrl="~/pic/12.gif"
Runat="Server" />
8、关于动态加载theme的方法:
通过修改 Page 对象的 theme 属性值,在运行时修改页面使用的主题。
使用 theme 属性时的一个限制,即 theme 属性只能在 Page PreInit 事件发生过程中或发生之前设置。
下面以DropDownList为例说明.
<1> Themes 文件夹中创建了两个新的主题文件夹,名为 RedTheme 和 YellowTheme
RedTheme/DropDownList.Skin
<asp:DropDownList
BackColor="Red"
Runat="Server" />
YellowTheme/DropDownList.Skin
<asp:DropDownList
BackColor="Yellow"
Runat="Server" />
<2> <asp:DropDownList
id="dropTheme"
AutoPostBack="true"
Runat="Server">
<asp:ListItem Text="YellowTheme" />
<asp:ListItem Text="RedTheme" />
</asp:DropDownList>
<3> 添加脚本(此时可能影响同一页面下其他控件的theme设置)
<script runat="server">
void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = Request["dropTheme"];
}
</script>
ex:
protected void Page_PreInit(object sender, EventArgs e)
{
string theme = "";
if (Page.Request.Form.Count > 0)
{
theme = Page.Request["Themes"].ToString();
if (theme == "Default")
{
theme = "";
}
}
this.Theme = theme;
}