在主题中添加皮肤
一个主题可以包含一个或多个皮肤文件。可以通过皮肤来修改所有具有皮肤效果的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