asp.net主题学习实例

asp.net主题学习实例

<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 />
        &lt;asp:Label ID="Label1" runat="server" BackColor="blue" ForeColor="white" /&gt;
        <br />
        &lt;asp:Label ID="Label2" runat="server" BackColor="DarkBlue" ForeColor="white"
        SkinId="Dark" /&gt;
    </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 />
        &lt;asp:Label ID="Label1" runat="server" BackColor="red" ForeColor="white" /&gt;
        <br />
        &lt;asp:Label ID="Label2" runat="server" BackColor="DarkRed" ForeColor="white" SkinId="Dark"
        /&gt;
    </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文件内容如下：&lt;asp:Image runat="server" ImageUrl="Images/pic.jpg" /&gt;
    </p>
    <p>
        <a href="?theme=blue">蓝色主题</a> &nbsp;<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";
        }
    }
}