6.2在正题中添加皮肤

2012-11-06

6.2在主题中添加皮肤在主题中添加皮肤一个主题可以包含一个或多个皮肤文件。可以通过皮肤来修改所有具有皮

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

热点排行

编程

6.2在正题中添加皮肤