怎样写一个主题的皮肤呢?:
就是类似于你在设计视图下把一个控件的样式设置好之后再把这个控件的源码考到皮肤文件中,把不属于皮肤的内容去了,如id就可以了
这个去了id之后,而不加SkinId这就是一个默认皮肤,也就是在引用页面中如果不设置SkinID同一类型的控件都使用这个皮肤,如果设置SkinId
那么就是不默认皮肤了,所以在引用的时候,一定要通过SkinID引用一下才可以,(注意在一个皮肤文件中只允许有一个默认皮肤不然就会出
现错误)
在配置文件里添加Theme或者StyleSheetTheme属性
<configuration>
<system.web>
<!—<pages theme=”Theme_XP”/>-->
<pages styleSheetTheme="Theme_XP"/> 所有的控件都使用这个样式
</system.web>
</configuration>
在页面的PreInit事件中可以动态加载主题,此时皮肤文件和样式表文件会同时被加载,但在该事件中不能够调用页面的控件,因为在此事件中,页面控件还未初始化。
<%@ Page Language="C#" Theme="DynamicTheme" %>
……
<a href="DynamicTheme.aspx?theme=XP">Theme_XP </a>
<a href="DynamicTheme.aspx?theme=Win7">Theme_Win7 </a>
……
protected void Page_PreInit(object sender, EventArgs e)
{
Theme = "Theme_XP";
if (Request["theme"] != null)
{
switch (Request["theme"])
{
case "XP":
Theme = "Theme_XP";
break;
case "Win7":
Theme = "Theme_Win7";
break;
}
}
}
3、通过改变控件的SkinID属性值动态加载主题中的皮肤
除了在页面的PreInit事件中动态加载主题外,还可以在PreInit事件中选择加载主题中的皮肤,但皮肤只能是命名皮肤。
<%@ Page Language="C#" Theme="DynamicCSS" %>
……
<a href="showdynamicskin.aspx?skin=professional">Professional</a>
<a href="showdynamicskin.aspx?skin=colorful">Colorful</a>
……
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request["skin"] != null)
{
switch (Request["skin"])
{
case "professional":
grdMovies.SkinID = "Professional";
break;
case "colorful":
grdMovies.SkinID = "Colorful";
break;
}
}
}
4、通过改变控件的CssClass属性值动态加载主题中的样式表
除了动态加载主题外,还可以选择加载主题中的样式表。
样式表文件:App_Themes\DynamicCSS\GridView.CSS
.Professional td
{
padding:4px;
color:#333333;
background-color:#F7F6F3;
}
.Professional .Header th
{
padding:4px;
background-color:#5D7B9D;
font-weight:bold;
color:White;
}
.Professional .Alternating td
{
background-color:White;
color:#284775;
}
.Colorful td
{
padding:4px;
color:#333333;
background-color:#FFFBD6;
}
.Colorful .Header th
{
padding:4px;
background-color:#990000;
font-weight:bold;
color:White;
}
.Colorful .Alternating td
{
background-color:White;
}
<%@ Page Language="C#" Theme="DynamicCSS" %>
……
<asp:GridView id="grdMovies" Runat="server" DataSourceID="srcMovies" GridLines="none"
HeaderStyle-CssClass="Header"
AlternatingRowStyle-CssClass="Alternating"/>
<asp:DropDownList
id="ddlCssClass"
Runat="server">
<asp:ListItem Text="Professional" />
<asp:ListItem Text="Colorful" />
</asp:DropDownList>
……
protected void btnSubmit_Click(object sender, EventArgs e)
{
grdMovies.CssClass = ddlCssClass.SelectedItem.Text;
}
二、禁用主题(皮肤、样式表)
当加载主题到页面后,因为某些原因需要禁用某个页面的主题,或者说禁用某个控件的主题,此时我们可以采用设置Theme或者StyleSheetTheme为空来完成。而设置EnableTheming为False禁用的只是主题中的皮肤。
禁用主题:设置Theme或者StyleSheetTheme为空来完成,或者创建一个空的主题文件,然后关联它。
禁用主题中的皮肤:当以Theme方式加载主题时,我们可以设置控件或者页面的EnableThemeing为False禁用主题中的皮肤。
三、Theme和StyleSheetTheme的异同
两者都可用来加载指定的主题,当主题中不包含皮肤文件时,两者效果一样,当主题中包含皮肤文件时,两者因优先级不一样会产生不一样的效果,优先级依次为:StyleSheetTheme->Page->Theme,后面的会重写前面的相同部分。
皮肤文件:App_Themes\Theme1\TextBox.skin
<%--TextBox默认皮肤--%>
<asp:TextBox runat="server" BackColor="Red"/>
<%--TextBox命名皮肤1--%>
<asp:TextBox runat="server" BackColor="Yellow" SkinId="txtName"/>
<%--TextBox命名皮肤2--%>
<asp:TextBox runat="server" BackColor="Blue" SkinId="txtAge"/>
1、页面以Theme方式加载主题
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs" Inherits="Default1" Theme="Theme1"%>
……
<form>
<div>
<asp:TextBox ID="TextBox1" runat="server" BackColor="Black"></asp:TextBox>
<asp:TextBox ID="TextBox2 " runat="server" SkinID="txtName" BackColor="Black"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server" SkinID="txtAge"></asp:TextBox>
</div>
</form>