Theme,skin-----asp.net2.0 new technolog

Theme
没有使用Theme的页面

结构复杂，格式混乱，不容易修改和阅读

使用Theme的页面

结构清晰，便于修改和阅读，便于复用。

App_Themes是存在于*.aspx同级目录下的一个文件夹，该文件夹下面可以有多个文件夹
每个文件夹对应一个单独的Theme.每个Theme目录中可以有两种类型文件。

1..css:用来修饰.aspx中的HTML控件和asp.net控件

*.css可修饰的HTML控件的属性

修饰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的内容

eg:

<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

eg:

<%@ 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属性

将EnableTheming属性设置为false可以为单独的控件或者整个页面禁止Theme功能

<asp:DropDownList ID="Countries" EnableTheming="false" RunAt="server" />

posted on 2006-08-22 16:53 choice 阅读(402) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

编程人生

公告

1..css:用来修饰.aspx中的HTML控件和asp.net控件

(1)代码中通过style属性直接修饰

(2)代码中定义style属性，引用修饰

(3)*.css放入Theme目录中进行引用

2..skin用来修饰.aspx中的asp.net控件

(1)在aspx文件中通过Theme直接使用skin

(2)在aspx文件中选择性使用skin

注意事项

编程人生

公告

1.*.css:用来修饰*.aspx中的HTML控件和asp.net控件

(1)代码中通过style属性直接修饰

(2)代码中定义style属性，引用修饰

(3)*.css放入Theme目录中进行引用

2.*.skin用来修饰*.aspx中的asp.net控件

(1)在aspx文件中通过Theme直接使用skin

(2)在aspx文件中选择性使用skin

注意事项

1..css:用来修饰.aspx中的HTML控件和asp.net控件

2..skin用来修饰.aspx中的asp.net控件