Theme,skin-----asp.net2.0 new technolog
Theme
没有使用Theme的页面
App_Themes是存在于*.aspx同级目录下的一个文件夹，该文件夹下面可以有多个文件夹
每个文件夹对应一个单独的Theme.每个Theme目录中可以有两种类型文件。
1.*.css:用来修饰*.aspx中的HTML控件和asp.net控件
修饰HTML控件的方式
(1)代码中通过style属性直接修饰
<button id="Button1" style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server"> Click me!</button>
(2)代码中定义style属性，引用修饰
(1)在aspx文件中通过Theme直接使用skin
eg:1.aspx的内容，在第一行声明使用Theme1后所有的asp控件将使用theme1中定义的skin进行表现
(2)在aspx文件中选择性使用skin
eg:Theme2里的skin内容，一个calendar被指定了SkinID="Simple"
没有使用Theme的页面
- 结构复杂，格式混乱，不容易修改和阅读
- 结构清晰，便于修改和阅读，便于复用。
App_Themes是存在于*.aspx同级目录下的一个文件夹，该文件夹下面可以有多个文件夹
每个文件夹对应一个单独的Theme.每个Theme目录中可以有两种类型文件。
1.*.css:用来修饰*.aspx中的HTML控件和asp.net控件
修饰HTML控件的方式
(1)代码中通过style属性直接修饰
<button id="Button1" style="font: 8pt verdana;background-color:lightgreen;border-color:black;width:100" runat="server"> Click me!</button>
(2)代码中定义style属性，引用修饰
<html>
<head>
<style>
.buttonstyle
{
font: 8pt verdana;
background-color:lightgreen;
border-color:black;
width:100
}
</style>
<body>
<form id="Form1" runat="server">
<ASP:TextBox ID="TextBox2" TextMode="Password" runat="server" class="buttonstyl"/>
</form>
</body>
</html>
(3)*.css放入Theme目录中进行引用
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="newpage1.aspx.vb" Inherits="newpage1" title="Untitled Page" Theme="ThemeA"%> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:Label ID="Label1" runat="server" Text="Label" class="spanstyle"></asp:Label> </asp:Content>
2.*.skin用来修饰*.aspx中的asp.net控件
- .skin的内容
<asp:Label Font-Bold="true" ForeColor="orange" runat="server" /> <asp:Calendar BackColor="White" BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth" Width="330px" runat="server"> <SelectedDayStyle BackColor="#333399" ForeColor="White" /> <OtherMonthDayStyle ForeColor="#999999" /> <TodayDayStyle BackColor="#999999" ForeColor="White" /> <DayStyle BackColor="#CCCCCC" /> <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" /> <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" Height="8pt" /> <TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True" Font-Size="12pt" ForeColor="White" Height="12pt" /> </asp:Calendar> <asp:GridView CellPadding="4" ForeColor="#333333" GridLines="None" Width="461px" runat="server"> <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#E3EAEB" /> <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /> <EditRowStyle BackColor="#7C6F57" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView>
(1)在aspx文件中通过Theme直接使用skin
eg:1.aspx的内容，在第一行声明使用Theme1后所有的asp控件将使用theme1中定义的skin进行表现
<%@ Page Language="VB" Theme="Theme1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Page with Example Theme Applied</title> </head> <body> <form id="form1" runat="server"> <div> <h3> Page with Example Theme Applied</h3> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" /><br /> <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /> <br /> This is some example text: The quick brown fox jumped over the lazy dog.<br /> <br /> <asp:Calendar ID="Calendar1" runat="server"/> <br /> <asp:GridView ID="GridView1" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="au_id" runat="server"> <Columns> <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" /> <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" /> <asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" /> <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" /> </Columns> </asp:GridView> </div> </form> </body> </html>
(2)在aspx文件中选择性使用skin
eg:Theme2里的skin内容，一个calendar被指定了SkinID="Simple"
<asp:Calendar runat="server" BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True" Width="220px"> <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" /> <SelectorStyle BackColor="#FFCC66" /> <OtherMonthDayStyle ForeColor="#CC9966" /> <TodayDayStyle BackColor="#FFCC66" ForeColor="White" /> <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" /> <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" /> <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" /> </asp:Calendar> <asp:Calendar SkinID="Simple" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="FirstLetter" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Width="200px"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar>2.aspx的内容，在第一行声明使用Theme1后，asp控件可以通过指定skinID的方式选择skin,未指定skinID的asp控件将使用theme中定义的默认skin进行表现。
<%@ Page Language="VB" Theme="Theme1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Named Skins</title> </head> <body> <form id="form1" runat="server"> <div> <h3>Named Skins</h3> <asp:Calendar ID="Calendar1" runat="server"/> <asp:Calendar ID="Calendar2" SkinID="Simple" runat="server"/> </div> </form> </body> </html>
注意事项
- 1.一旦使用Theme=定义了一个页面的theme，页面中对控件进行的属性设置会失败，如果希望页面中属性设置生效，需要在定义Theme的时候使用SytleSheetTheme=来代替直接使用Theme
<%@ Page Language="VB" StyleSheetTheme="Theme2" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Page Properties Override StyleSheetTheme</title> </head> <body> <form id="form1" runat="server"> <div> <h3>Properties in the Page Override StyleSheetTheme</h3> <asp:Label ID="Label1" runat="server" Text="Hello 1" /><br /> <asp:Label ID="Label2" runat="server" Text="Hello 2" ForeColor="blue" /> Label2's ForeColor is blue! <br /> <asp:Label ID="Label3" runat="server" Text="Hello 3" /><br /> </div> </form> </body> </html>
- 2.在Web.config中设置可让整个web站点使用skin
<configuration> <system.web> <pages theme="BasicBlue" /> </system.web> </configuration>
- 3.通过代码动态设置Theme
void Page_PreInit (Object sender, EventArgs e)
{
Page.Theme = "BasicBlue";
}
- 4.EnableTheming属性
<asp:DropDownList ID="Countries" EnableTheming="false" RunAt="server" />