6.2在主题中添加皮肤
在主题中添加皮肤
一个主题可以包含一个或多个皮肤文件。可以通过皮肤来修改所有具有皮肤效果的ASP.net控件的属性
在Web应用程序中所有的TextBox控件的背景设为黄色，dotted 为边框样式
Simple\TextBox.skin
<asp:TextBox BackColor="Yellow" BorderStyle="Dotted" Runat="Server"/>
建议：
皮肤文件名和待修改的控件名称一样，再加上皮肤的扩展名即可。
<%@ Page Language="C#" Theme="Simple" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <asp:TextBox runat="server" /> </div> </form></body></html>
注意：
1)Page后加上Theme
<%@ Page Language="C#" Theme="Simple" %>
2)默认情况下，所有的控件都是可主题化的，但可以修改Themeable为False来禁用主题
1、创建命名皮肤
必填加红框
Simple2\TextBox.skin
<asp:TextBox SkinID="DashedTextBox" BorderStyle="Dashed" BorderWidth="5px" RunAt="Server"/><asp:TextBox BorderStyle="Double" BorderWidth="5px" Runat="Server"/>
调用页面：
<%@ Page Language="C#" Theme="Simple2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Show Named Skin</title></head><body> <form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" SkinID="DashedTextBox" runat="server"></asp:TextBox> <br /> <br /> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </div> </form></body></html>
结果：
2、Themes与StyleSheetThemes
当在页面中应用主题时，主题中的控件属性会重写页面中的已有控件属性。也就是说：皮肤文件中的属性会重写页面中的属性。
Simple3\Label.skin
<asp:Label BackColor="Orange" Runat="Server"/>
<%@ Page Language="C#" Theme="Simple3" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Show Skin Theme</title></head><body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="What color background do I have?" BackColor="Red"></asp:Label> </div> </form></body></html>
显示：
显示的是Skin中的
3、禁用主题
每个Asp.net控件都包含名为EnableTheming的属性
Simple4\Calendar.skin
<asp:Calendar BackColor="White" BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" NextPreFormat="FullMonth" Width="400px" Runat="Server"> <SelectedDayStyle BackColor="#333399" ForeColor="white"/> <OtherMonthDayStyle ForeColor="#999999"/> <TodayDayStyle BackColor="#CCCCCC"/> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" VerticalAlign="Bottom"/> <DayHeaderStyle Font-Bold="True" Font-Size="8pt"/> <TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px" Font-Bold="True" Font-Size="12pt" ForeColor="#333399"/> </asp:Calendar>
ShowEnableTheming.aspx
<%@ Page Language="C#" Theme="Simple4" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Show EnableTheming</title></head><body> <form id="form1" runat="server"> <div> <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> <br /> <br /> <asp:Calendar ID="Calendar2" EnableTheming="false" runat="server"></asp:Calendar> </div> </form></body></html>
4、在Web配置文件中注册主题
Web.Config
<configuration>
<system.web>
<pages theme="Site"/>
</system.web>
</configuration>
Web.Config
<configuration>
<system.web>
<pages styleSheetTheme="Site"/>
</system.web>
</configuration>
可以在页面中禁用主题
<%@ Page Language="c#" EnableTheming="false" %>
2011-4-28 14:20 danny