044. asp.net主題之三應用或禁用主題和動態加載主題


 1.為單個頁面指定主題可以將@Page指令的Theme或StyleSheetTheme屬性設置為要使用的主題名稱, 代碼如下:

<%@ Page  Theme ="MyTheme" %>

<%@ Page  StyleSheetTheme="MyTheme" %>

StyleSheetTheme屬性的工作方式與普通主題(使用Theme設置的主題)類似, 不同的是當使用StyleSheetTheme時, 控件外觀的設置可以被頁面中聲明的同一類型的相同屬性所代替. 例如: 如果使用Theme屬性指定主題, 該主題指定所有的Button控件的背景都是黃色, 那么即使在頁面中個別Button控件的背景色設置了不同顏色, 頁面中所有的Button控件的背景依然是黃色. 如果需要改變個別Button的背景色, 則需要使用StyleSheetTheme屬性指定主題.

禁用打個頁面的主題, 只需要將@Page指令的EnableTheming屬性設置為False即可. 代碼如下:

<%@ Page  EnableTheming ="False" %>

如果想要禁用控件的主題, 只要將控件的EnableTheming屬性設置為False即可, 比如想要禁用Button的主題, 代碼如下:

 <asp:Button ID="Button1" runat="server" EnableTheming="false" Text="Button" />

2. 為應用程序指定和禁用主題:

為了快速地位整個網站的所有頁面設置相同的主題, 可以設置Web.config文件中的<pages>配置節點中的內容. Web.config文件的配置代碼如下:

<configuration>
  <connectionStrings/>
  <system.web>
    <pages theme="ThemeName"></pages>
  <!--或者<pages styleSheetTheme="ThemeName" ></pages>-->
  </system.web>
</configuration>

若要禁用整個應用程序的主題設置, 只要將<pages>配置節中的Theme屬性或者StyleSheetTheme屬性設置為空即可;

下面演示一個動態加載主題的示例:

整體文件列表

Default.aspx文件內容:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>動態加載主題</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    動態加載主題<br />
        <table>
            <tr>
                <td style="width: 100px">
                    選擇主題:</td>
                <td style="width: 100px">
                    <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
                        <asp:ListItem Value="Theme1">主題一</asp:ListItem>
                        <asp:ListItem Value="Theme2">主題二</asp:ListItem>
                    </asp:DropDownList></td>
                <td style="width: 100px">
                <a href ="default.aspx">返回</a>
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    默認外觀:</td>
                <td style="width: 100px">
                    <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                    命名外觀:</td>
                <td style="width: 100px">
                    <asp:TextBox SkinID="textboxSkin" ID="TextBox2" runat="server" ></asp:TextBox></td>
                <td style="width: 100px">
                </td>
            </tr>
            <tr>
                <td style="width: 100px">
                </td>
                <td style="width: 100px">
                    <input id="Button1" type="button" value="button" /></td>
                <td style="width: 100px">
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Default.aspx.cs文件內容:

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
//切換主題的時候觸發下拉列表的選擇項改變事件
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string url = Request.Path + "?theme=" + DropDownList1.SelectedItem.Value;
        Response.Redirect(url);
    }
//注意使用Theme屬性指定頁面的主題, 只能在頁面的PreInit事件發生之前或者發生過程中設置, 當前示例是在發生過程中修改Page對象的Theme屬性,達到修改主題的目的
    void Page_PreInit(Object sender, EventArgs e)
    {
        string theme = "Theme1";
        if (Request.QueryString["theme"] == null)
        {
            theme = "Theme1";
        }
        else
        {
            theme = Request.QueryString["theme"];
        }
        Page.Theme = theme;
        ListItem item = DropDownList1.Items.FindByValue(theme);
        if (item != null)
        {
            item.Selected = true;
        }
    }
}

Theme1下StyleSheet.css文件內容:

body 
{
     text-align :center;
     color :Yellow ;
     background-color :Navy;
}
A:link
{
    color:White ;
    text-decoration:underline;
}
A:visited
{
    color:White;
    text-decoration:underline;
}
A:hover
{
    color :Fuchsia;
    text-decoration:underline;
     font-style :italic ;
}
input
{
    border-color :Yellow;
}

Theme1下TextBoxSkin.skin文件內容:

<asp:TextBox runat="server" Text="主題1" BackColor="#FFE0C0" BorderColor="#FFC080" Font-Size="12pt" ForeColor="#C04000" Width="149px"/>
<asp:TextBox SkinId="textboxSkin" runat="server" Text="主題1" BackColor="#FFFFC0" BorderColor="Olive" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>

Theme2下StyleSheet.css文件內容:

body 
{
     text-align :center;
     color :#004000;
     background-color :Aqua;
}
A:link
{
    color:Blue;
    text-decoration:underline;
}
A:visited
{
    color:Blue;
    text-decoration:underline;
}
A:hover
{
    color :Silver;
    text-decoration:underline;
     font-style :italic ;
}
input
{
    border-color :#004040;
}

Theme2下TextBoxSkin.skin文件內容:

<asp:TextBox runat="server" Text="主題2" BackColor="#C0FFC0" BorderColor="#00C000" ForeColor="#004000" Font-Size="12pt" Width="149px"/>
<asp:TextBox SkinId="textboxSkin" runat="server" Text="主題2" BackColor="#00C000" BorderColor="#004000" ForeColor="#C0FFC0" BorderStyle="Dashed" Font-Size="15pt" Width="224px"/>

最終效果圖:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM