當(dāng)前位置：首頁(yè) > 编程语言 > asp.net >内容正文

asp.net

Study Notes ASP.Net 之Theme Skin

發(fā)布時(shí)間：2023/12/18 asp.net 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 Study Notes ASP.Net 之Theme Skin 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

基本概念：

Theme 和 Skin用以定義頁(yè)面中各個(gè)控件的顯示樣式，如字體大小，前/后景色等等。

一個(gè)Theme可以包括多個(gè)Skin，一個(gè)Skin可以定義多個(gè)控件的樣式。

?

目的：

使得頁(yè)面樣式的制作可以與頁(yè)面制作分工進(jìn)行。<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

使得頁(yè)面的布局、樣式集中管理，方便修改。

?

使用：

目錄結(jié)構(gòu)：

如果一個(gè)Web應(yīng)用有用到Theme（應(yīng)用級(jí)別的Theme，下面會(huì)講到全局級(jí)的Theme），則在該Web應(yīng)用的根目錄下有個(gè)名為” App_Themes”的子目錄，而每個(gè)Theme都是”App_Themes”的一個(gè)子目錄。

每個(gè)Skin都是Theme目錄中的一個(gè)后綴名為.skin的文件。

Theme的使用級(jí)別：

全局Theme:?

在ASP.Net的安裝目錄(通常是%WINDIR% \Microsoft.NET \Framework \<version>\)下，建立名為”Theme”的子目錄，并在其下建立各個(gè)全局Theme目錄。

全局Theme對(duì)于整個(gè)機(jī)器上的所有Web應(yīng)用都可見(jiàn)。

應(yīng)用級(jí)的Theme：

如”目錄結(jié)構(gòu)”中說(shuō)到的，建立在Web應(yīng)用根目錄下的”App_Themes”目錄下。

應(yīng)用級(jí)的Theme只對(duì)當(dāng)前Web應(yīng)用可見(jiàn)。

Theme的引用：

頁(yè)面引用：

在Web頁(yè)面中用<%@ Page Theme="..." %>設(shè)定使用哪個(gè)Theme。選中的Theme在該頁(yè)面有效。

配置引用：

在Web應(yīng)用的配置文件中，用<pages theme="..."/> 設(shè)定使用哪個(gè)Theme。設(shè)定的Theme對(duì)于整個(gè)Web應(yīng)用有效。

動(dòng)態(tài)引用：

在頁(yè)面的Page_PreInit()中，為Page.Theme 設(shè)定一個(gè)可見(jiàn)的Theme名稱。

?

頁(yè)面樣式應(yīng)用的優(yōu)先級(jí)：

一共有4種方式設(shè)定頁(yè)面的樣式：CSS，StyleSheetTheme(Tutorial上說(shuō)這是Server-Side Style, 我不是很明白它的含義)，各個(gè)控件自己設(shè)定的樣式屬性，Theme。如果設(shè)定有沖突，系統(tǒng)會(huì)按照Theme -> 控件各自屬性 -> StyleSheetTheme -> CSS來(lái)設(shè)定頁(yè)面樣式。

只有一個(gè)例外：控件可以通過(guò)設(shè)定EnableTheming="False" 使Theme的設(shè)定無(wú)效。當(dāng)設(shè)定無(wú)效后，系統(tǒng)會(huì)按照控件各自屬性 -> StyleSheetTheme -> CSS來(lái)設(shè)定頁(yè)面樣式。

注：根據(jù)Tutorial，一個(gè)Theme中可以有多個(gè)CSS文件，只要在<head /> 中用<link rel="stylesheet" href="…"/> 來(lái)指定使用哪個(gè)CSS文件。但是我在使用中發(fā)現(xiàn)，如果頁(yè)面使用了Theme,則指定CSS無(wú)效，系統(tǒng)會(huì)按照字典順序使用文件名靠后的那個(gè)CSS文件。

?

Skin的引用：

在Skin文件中可以指定SkinID，也可以不指定；如果沒(méi)有指定，則認(rèn)為似當(dāng)前Theme中該類型控件的默認(rèn)Skin，如：

<asp:label runat="server" font-bold="true" forecolor="orange" />

<asp:label runat="server" SkinID="Blue" font-bold="true" forecolor="blue" />

如果頁(yè)面中不指定SkinID，就是使用選中的Theme中的該類型控件的對(duì)應(yīng)的默認(rèn)Skin；也可以在頁(yè)面中指定使用哪個(gè)Skin，如：

<asp:Label ID="Label1" runat="server" Text="Hello 1" />

<asp:Label ID="Label2" runat="server" Text="Hello 2" SkinID="Blue" />

注意：

1) 在同一個(gè)Theme中，對(duì)于同一種類型的控件，只能有一個(gè)默認(rèn)Skin定義；相似的，同一個(gè)Theme中，對(duì)于同一種類型的控件，一個(gè)SkinID也只能有一個(gè)Skin定義。

2) Skin的文件名對(duì)于系統(tǒng)選擇Skin沒(méi)有任何用處，系統(tǒng)只是根據(jù)Skin所屬的Theme，Skin文件中定義的控件類型，SkinID來(lái)選擇Skin。所以Skin的劃分可以根據(jù)控件類型(如：Label, Button等等)，也可以根據(jù)樣式類型(如：Classic, Modern等等)，完全似取決于開(kāi)發(fā)者的個(gè)人喜好。

用Theme封裝模板：

Theme可以用來(lái)封裝模板，便于一次性替代整個(gè)模塊。例如使用以下的Skin文件，就可以在頁(yè)面中只使用一行代碼來(lái)定義一個(gè)完整的登錄界面：

<asp:Login ID="Login1" runat="server"/>

Skin文件內(nèi)容:

<asp:Login?runat="server">
??<LayoutTemplate>
????<i>Please?log?in?to?this?site:</i><br?/><br?/>
????<table?border="0"?cellpadding="10"?bgcolor="beige">
??????<tr>
????????<td>
??????????<asp:Label?Font-Bold="true"??AssociatedControlID="UserName"?ID="UserNameLabel"?runat="server">User?Name:</asp:Label>
??????????<br?/>
??????????<asp:TextBox?ID="UserName"?runat="server"></asp:TextBox>
??????????<asp:RequiredFieldValidator?ControlToValidate="UserName"?ErrorMessage="User?Name?is?required."
????????????ID="UserNameRequired"?runat="server"?ToolTip="User?Name?is?required."?ValidationGroup="Login1">*</asp:RequiredFieldValidator>
??????</tr>
??????<tr>
????????<td>
??????????<asp:Label?Font-Bold="true"?AssociatedControlID="Password"?ID="PasswordLabel"?runat="server">Password:</asp:Label>
??????????<br?/>
??????????<asp:TextBox?ID="Password"?runat="server"?TextMode="Password"></asp:TextBox>
??????????<asp:RequiredFieldValidator?ControlToValidate="Password"?ErrorMessage="Password?is?required."
????????????ID="PasswordRequired"?runat="server"?ToolTip="Password?is?required."?ValidationGroup="Login1">*</asp:RequiredFieldValidator>
????????</td>
??????</tr>
??????<tr>
????????<td>
??????????<asp:Button?CommandName="Login"?ID="LoginButton"?runat="server"?Text="Log?In"?ValidationGroup="Login1"?/>
????????</td>
??????</tr>
????</table>
????<br?/>
????<asp:Literal?EnableViewState="False"?ID="FailureText"?runat="server"></asp:Literal>
??</LayoutTemplate>
</asp:Login>

但是我認(rèn)為Theme和Skin的主要目的在于將頁(yè)面的樣式/布局與頁(yè)面分開(kāi)，便于分工，修改；而不是作為Web Control在多個(gè)頁(yè)面中復(fù)用的模塊，所以應(yīng)注意使用Theme的封裝模板功能。

轉(zhuǎn)載于:https://www.cnblogs.com/cheese/archive/2005/08/26/223668.html

總結(jié)

以上是生活随笔為你收集整理的Study Notes ASP.Net 之Theme Skin的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。