asp.net主题切换

来源：互联网发布：腾讯云网络接入服务商编辑：程序博客网时间：2024/06/02 07:29

1、主题是什么

主题由一组元素组成：外观、级联样式表 (CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或 Web 服务器上的特殊目录中定义的。主题是一组Web Control的属性设置的集合，提供一种简单的方法设置控件的样式属性。

·主题只在Web Control中有效

·母板页（Master Page）上不能设置主题，但是主题可以在内容页面上设置

·主题上设置的Web Control的样式覆盖页面上设置的样式

·如果在页面上设置EnableTheming="false"，主题无效

·要在页面中动态设置主题，必须在页面生命周期Page_Preinit事件之前

·主题包括.skin和.css文件

2、.skin是什么文件

.skin是外观文件，它包含各个控件（例如，Button、Label、TextBox 或 Calendar 控件）的属性设置。控件外观设置类似于控件标记本身，但只包含您要作为主题的一部分来设置的属性。例如，下面是 Button 控件的控件外观：

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

在 theme 文件夹中创建 .skin 文件。一个 .skin 文件可以包含一个或多个控件类型的一个或多个控件外观。可以为每个控件在单独的文件中定义外观，也可以在一个文件中定义所有主题的外观。有两种类型的控件外观 -“默认外观”和“已命名外观”：

·当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有 SkinID 属性，则是默认外观。例如，如果为 Calendar 控件创建一个默认外观，则该控件外观适用于使用本主题的页面上的所有 Calendar 控件。（默认外观严格按控件类型来匹配，因此 Button 控件外观适用于所有 Button 控件，但不适用于 LinkButton 控件或从 Button 对象派生的控件。）

·已命名外观是设置了 SkinID 属性的控件外观。已命名外观不会自动按类型应用于控件。而应当通过设置控件的 SkinID 属性将已命名外观显式应用于控件。通过创建已命名外观，可以为应用程序中同一控件的不同实例设置不同的外观。

3、如何为相同控件定义不同的Skin

使用SkinID为控件定义不同的skin，例如

<asp:Label runat=server Text="ThemedLabel" BackColor="Red" /> -label的缺省外观

<asp:Label runat=server SkinId="BoldLabel" Text="ThemedLabel_WithSkinId" BackColor="Blue" Font-Bold="true" /> - 命名为BoldLabel 的Label外观

因此页面没有指定SkinId的label自动应用缺省外观，Label的SkinID设置为BoldLabel的Label控件应用BoldLabel外观

4、如何组织主题文件内容

Theme文件下可以包含多个.Skin文件，所以可以多种方式组织你的主题文件，所有的主题文件在应用于页面之前会合并。

·一个.skin文件包含所有的控件的外观定义

·每个控件一个.skin文件

·相同SkinID的控件放在一个.skin文件中

5、有没有办法定义好的Theme文件在多个程序中共享

服务器上的任何网站以及任何网站中的任何页面都可以引用全局主题，使用全局的主题可以在各个应用程序之间共享，例如你想创建一个全局共享的主题theme1。IIS 服务器上的全局主题放置位置类似于 \Inetpub\wwwroot\aspnet_client\system_web\v2.0.xxxxx\Themes\Theme1

应用程序级别的主题会覆盖全局的主题，例如你在应用程序中也定义了Theme1的主题，那么在应用程序级的Theme1主题将覆盖全局的主题Theme1

6、StyleSheetTheme是什么

主题还可以包含级联样式表（.css 文件）。将 .css 文件放在主题目录中时，样式表自动作为主题的一部分应用。使用文件扩展名 .css 在主题文件夹中定义样式表。设置页面的 StyleSheetTheme 属性将主题作为样式表主题来应用。如果您希望能够设置页面上的各个控件的属性，同时仍然对整体外观应用主题，则可以将主题作为样式表主题来应用。EnableTheming="false"情况下StyleSheetTheme仍然有效。通过重写属性StyleSheetTheme来动态修改页面上的主题样式

public override string StyleSheetTheme

{

get{ retrun "MyStyleSheetTheme"; }

}

-------------------------------------------------------------------------------------------------------------------------------------------------------

实例：

一、新建网页Default.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestTheme._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 runat="server">
    <title>示范如何动态应用主题</title>
    <style type="text/css">
        .style2
        {
            width: 495px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <table width="100%" cellspacing="0" cellpadding="0" border="0" class="header">
            <tr>
                <td class="title" colspan="2">示范如何动态应用主题</td>
            </tr>
            <tr>
                <td class="style2">
                    <h1 id="title1">Test Test</h1>
                    <p>请从下拉列表框中选择您所喜爱的色系主题</p>
                    <asp:DropDownList ID="ddlThemes" runat="server" AutoPostBack="true">
                        <asp:ListItem Value="BlueSky">使用蓝色系的主题</asp:ListItem>
                        <asp:ListItem Value="RedSky">使用红色系的主题</asp:ListItem>
                        <asp:ListItem Value="GreenSky">使用绿色系的主题</asp:ListItem>
                    </asp:DropDownList>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

二、建立主题文件

1、BlueSky主题

Default.css文件中

table.header
{
background-color: Blue;
}

default.skin文件中

<asp:dropdownlist runat="server" ForeColor="white" BackColor="Blue" />

其他GreenSky主题，RedSky类似的设置背景颜色

三、在Page_PreInit事件中变换主题

void Page_PreInit(object sender, EventArgs e)
        {
            // 动态设定网页的布景主题。
            Page.Theme = "BlueSky";

            if (Request.Form != null & Request.Form.Count > 0)
            {
                Page.Theme = this.Request.Form["ddlThemes"].Trim();
            }
        }