ASP.NET 2.0 中主題的切換

來源:互聯網
上載者:User
1.在theme應用到一個頁面時,預設皮膚會自動應用到該頁面上的所有同類型的控制項。什麼樣的皮膚是預設皮膚呢?判斷的標準就是他是否有SkinID屬性,如果沒有,就是預設皮膚。
2.一個命名皮膚具有一個SkinID屬性。命名皮膚不會自動通過類型應用到控制項。你必須通過設定控制項的SkinID屬性來顯式地應用一個命名皮膚。使用命名皮膚允許你為相同控制項的不同執行個體設定不同的皮膚。
3.全域theme設定,為所有版面設定theme,在Web.config的<system.web>片斷裡加入下面的標記: <pages styleSheetTheme="DataWebControls" />
4.單頁面theme設定,通過@Page設定頁面的Theme或StyleSheetTheme屬性來應用.
5. Theme屬性,在theme中的控制項設定和頁面上的版面設定將 合并成為該控制項的最終設定。如果一個控制項屬性在頁面和theme中都進行了設定,theme中的控制項設定將覆蓋頁面上的控制項設定。這樣的策略使得各個頁面能夠保持一致的風格。例如,它可以允許你把theme應用到你在以前版本的ASP.NET中建立的頁面.另外,你還可以把theme以樣式表的方式應用到頁面,通過設定頁面的 StyleSheetTheme屬性。在這種情況下, 本地版面設定優先於theme中的設定。這是使用層疊樣式表的模型。如果你想設定單個的控制項屬性,同時應用theme控制整體表現,你就可以把theme作為樣式表來應用。
6.動態設定方法Global.asax的代碼如下: 

<%@ Application Language="C#" %> 

<script runat="server"> 

void Page_PreInit(object sender, BrockAllen.Web.PageEventArgs e) 

string t = HttpContext.Current.Profile.GetPropertyValue("Theme") as string; 
if (t != null && t.Length > 0) 

e.Page.Theme = t; 

else 

e.Page.Theme = "Default"; 


 7.讀取web.config中的Pages節點System.Web.Configuration.PagesSection ps = (System.Web.Configuration.PagesSection)System.Configuration.ConfigurationManager.GetSection("system.web/pages");

TextBox1.Text = ps.Theme;

      在 Asp.NET 2.0 出現以前,給網站提供更換主題功能是一項繁重的工作,鑒於每切換一套主題,都需要在頁面更改相應的圖片、字型、網頁樣式等等細小的元素,因而在代碼編寫之餘,更要求資源的規範管理。而往往在網站的編寫初期,如果沒有一定的經驗,很難全面的考慮到資源檔的細緻歸類及放置問題。最終導致網站改版時,大量的遷移和更改,稍有不慎,還會引發檔案丟失的問題。

        現在這些擔憂,都在 Asp.NET 2.0 中得到了完善的解決。首先,您可以通過簡單的代碼編寫實現複雜的功能;其次,Asp.NET 2.0 在處理主題的問題時提供了清晰的目錄結構,使得資源檔的層級關係非常清晰,在易於尋找和管理的同時,提供的良好的擴充性。

       下面就讓我們通過一個Demo感受一下Asp.NET 2.0 的新特性。

       1. 建立主題檔案夾:

       在應用程式的根目錄上單擊右鍵,點選 Add Folder 下的 Theme Folder 選項後,會在根目錄下出現名為 App_Themes 的空檔案夾,所有的與主題有關的資源檔都會儲存在這個檔案夾下。

       在本例中,選擇以顏色不同的方式來區分主題,需要在主題檔案夾(App_Themes)下建立兩個以顏色為名稱的檔案夾。

       操作方式:在 App_Themes 檔案夾上單擊右鍵,將滑鼠移動到 Add Folder 選項上,發現在主題檔案夾(App_Themes)新增檔案夾的類型只有一種 Theme Folder:

       建立兩個主題檔案夾,分別命名為 BlueTheme 和 PorpleTheme。

       將主題 BlueTheme 應用於頁面:

 

<%@ Page Language="C#" StylesheetTheme="BlueTheme" %> 

       3. 分別給每個主題添加 Skin 檔案:

       Skin 檔案是實際包含主題所應用的格式設定的檔案。一個主題可以包含一個或多個 Skin 檔案。這沒有關係,因為在將主題應用於頁面時,ASP.NET Framework 將把某個主題下的多個 Skin 檔案合在一起,而將這些檔案視為一個 Skin 檔案。

       您可以根據需要將 Skin 檔案命名為任何名稱,在檔案中可以通過聲明某個控制項的執行個體設定一個或多個此控制項中的屬性,從而使用 Skin 檔案指定控制項的外觀。(註:並不是所有屬性都可以設定,能設定的多為外觀屬性)。

       本例中先在主題 BlueTheme 中建立新檔案 Control.skin,在檔案中對三個控制項的某些屬性進行了設定。

 

<asp:TextBox

   BackColor="#c4d4e0"

   ForeColor="#0b12c6"

   Runat="Server" />

   

<asp:Label

   ForeColor="#0b12c6"

   Runat="Server" />

<asp:Button

   BackColor="#c4d4e0"

   ForeColor="#0b12c6"

   Runat="Server" /> 

        此時頁面頁面代碼為:

 

<body>
  <form id="form1" runat="server">
    <table width="100%" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td height="23px" colspan="2"></td>
      </tr>
      <tr>
        <td align="center" height="50px">
          <asp:Label ID="Label1" runat="server" Text="Enter Your Name:"></asp:Label>
        </td>
        <td>
          <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        </td>
      </tr>
      <tr>
        <td align="center" height="50px">
          <asp:Label ID="Label2" runat="server" Text="Enter Your Nickname:"></asp:Label>
        </td>
        <td>
          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </td>
      </tr>
      <tr>
        <td align="center" height="50px">
          <asp:Button ID="Button1" runat="server" Text=" OK " />
        </td>
        <td>
          <asp:Button ID="Button2" runat="server" Text="Cancel" />
        </td>
      </tr>
      <tr>
        <td height="23px" colspan="2"></td>
      </tr>
      
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.