重新过一遍ASP.NET 2.0(C#)(2) - Themes(主题)(转)

[源码下载]

[align=center]重新过一遍ASP.NET 2.0(C#)(2) - Themes(主题)
[/align]

作者：webabcd

介绍
使用 ASP.NET 2.0 的“主题”功能，可以将样式和布局信息分解为单独的文件组，统称为“主题”。然后，主题可应用于任何站点，影响站点中页和控件的外观。这样，通过更改主题即可轻松地维护对站点的样式更改，而无需对站点各页进行编辑。还可与其他开发人员共享主题。

关键
1、在web site中添加App_Themes文件夹，可以在每个主题文件加内添加.skin文件、.css文件（指定主题后会自动加载主题下所有.css文件）或者图片文件

2、在web.config的<system.web>元素下的<pages>元素下设置theme或者styleSheetTheme属性（针对全局）；在页的@Page指令里设置Theme或者StylesheetTheme属性（针对当前页）

3、Theme定义的样式不可以覆盖；StylesheetTheme定义的样式可以覆盖

4、.skin文件里不设置SkinId则就是默认的，设置了SkinId后则对应控件的SkinId属性

5、动态修改Page的Theme要在Page_PreInit方法中实现

示例
Blue主题


<asp:Label runat="server" BackColor="blue" ForeColor="white" />


<asp:Label runat="server" BackColor="DarkBlue" ForeColor="white" SkinId="Dark" />






<%

--ImageUrl如下设置则解析到该主题下的Images文件夹的pic.jpg文件--%>


<asp:Image runat="server" ImageUrl="Images/pic.jpg" />

Red主题


<asp:Label runat="server" BackColor="red" ForeColor="white" />


<asp:Label runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark" />




<%

--ImageUrl如下设置则解析到该主题下的Images文件夹的pic.jpg文件--%>


<asp:Image runat="server" ImageUrl="Images/pic.jpg" />

主题测试-Theme
Themes/Theme.aspx




<%

@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Theme.aspx.cs"


    Inherits="Themes_Theme" Title="主题测试-Theme" Theme="Blue" %>




<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">


    <p>


        在页头部分指定Theme="Blue"</p>


    <p>


        相关主题文件，我觉得最好把样式写在css里然后设置控件的CssClass属性


        <br />


        <asp:Label ID="Label1" runat="server" BackColor="blue" ForeColor="white" />


        <br />


        <asp:Label ID="Label2" runat="server" BackColor="DarkBlue" ForeColor="white"


        SkinId="Dark" />


    </p>


    <p>


        <asp:Label ID="lbl" runat="Server" Text="不做任何设置（使用主题中的没设置SkinId的样式）" />


    </p>


    <p>


        <asp:Label ID="lbl2" runat="Server" Text="设置BackColor为black（因为设置的是页的Theme属性，所以无法覆盖原有样式）" BackColor="black" />


    </p>


    <p>


        <asp:Label ID="lbl3" runat="Server" Text="主题测试设置SkinID为dark（指定SkinId）" SkinID="dark" />


    </p>


</asp:Content>



主题测试-StylesheetTheme
Themes/StylesheetTheme.aspx




<%

@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="StylesheetTheme.aspx.cs"


    Inherits="Themes_StylesheetTheme" Title="主题测试-StylesheetTheme" StylesheetTheme="Red" %>




<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">


    <p>


        在页头部分指定StylesheetTheme="Red"</p>


    <p>


        相关主题文件，我觉得最好把样式写在css里然后设置控件的CssClass属性


        <br />


        <asp:Label ID="Label1" runat="server" BackColor="red" ForeColor="white" />


        <br />


        <asp:Label ID="Label2" runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark"


        />


    </p>


    <p>


        <asp:Label ID="lbl" runat="Server" Text="不做任何设置（使用主题中的没设置SkinId的样式）" />


    </p>


    <p>


        <asp:Label ID="lbl2" runat="Server" Text="设置BackColor为black（因为设置的是页的StylesheetTheme属性，所以无法覆盖原有样式）" BackColor="black" />


    </p>


    <p>


        <asp:Label ID="lbl3" runat="Server" Text="主题测试设置SkinID为dark（指定SkinId）" SkinID="dark" />


    </p>


</asp:Content>



主题测试-动态加载主题
Themes/Dynamic.aspx




<%

@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Dynamic.aspx.cs"


    Inherits="Themes_Dynamic" Title="主题测试-动态加载主题" %>




<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">


    <p>


        相关.skin文件内容如下：<asp:Image runat="server" ImageUrl="Images/pic.jpg" />


    </p>


    <p>


        <a href="?theme=blue">蓝色主题</a>  <a href="?theme=red">红色主题</a>


    </p>


    <p>


        该Image控件应用主题中的样式，包括ImageUrl


        <br />


        <asp:Image ID="img" runat="server" />


    </p>


</asp:Content>



Themes/Dynamic.aspx.cs


using System;


using System.Data;


using System.Configuration;


using System.Collections;


using System.Web;


using System.Web.Security;


using System.Web.UI;


using System.Web.UI.WebControls;


using System.Web.UI.WebControls.WebParts;


using System.Web.UI.HtmlControls;




public partial class Themes_Dynamic : System.Web.UI.Page






{


    protected void Page_Load(object sender, EventArgs e)




    

{




    }




    protected void Page_PreInit(object sender, System.EventArgs e)




    

{


        // 动态修改Page的Theme要在Page_PreInit方法中实现


        if (!String.IsNullOrEmpty(Request.QueryString["theme"]))




        

{


            Page.Theme = Request.QueryString["theme"];


        }


        else




        

{


            Page.Theme = "blue";


        }


    }


}



OK
[源码下载]