ASP.NET中的Theme功能

来源：互联网发布：软件项目部署实施方案编辑：程序博客网时间：2024/05/16 05:00

1 概述... 1

2 创建简单的Theme. 1

3 Theme的主要应用范围和限制... 2

4 默认Skin和命名Skin. 2

5 Theme的作用域... 2

6 Themes vs StyleSheetThemes. 3

7 Theme和CSS. 3

8 动态加载Theme. 3

9 在不同的作用域同时设置了Theme时的优先级... 3

10示例-创建简单的Theme. 4

正文

1 概述

● 为一组网站控件设定统一的外观

如所有TextBox控件的背景

● 不是CSS

CSS调整HTML标记的外观

Theme调整控件的外观

● 也不是Master Page

Master Page定义所有页面的排版

Master Page可以同Theme同时使用

2 创建简单的Theme

● 创建App_theme目录

● 为App_theme创建子目录

OrangeTheme

BlueTheme

● 为不同的Theme目录添加Skin文件

可以添加一个或多个

ASP.NET2.0将自动分析所有的文件

● 示例-创建简单的Theme

3 Theme的主要应用范围和限制

● 为网站控件设定统一的外观

● 可以指定如下属性（与外观相关的）

ForeColor

BackColor

Text

● 不能指定如下属性（与外观无关的）

AutoPostback

4 默认Skin和命名Skin

● 默认Skin

为某一种控件指定缺省外观

● 命名Skin

为控件指定多个外观

<asp:TextBox <%--默认skin--%>

BackColor="Blue"

ForeColor="White"

runat="server"/>

<asp:TextBox <%--命名skin--%>

SkinID="BlueOrange"

BackColor="Orange"

ForeColor="DarkGreen"

runat="server"/>

<asp:Button <%--默认skin--%>

BackColor="Blue"

ForeColor="White"

Font-Bold="true"

runat="server" />

5 Theme的作用域

● 控件

SkinID

默认Skin

● 页面

<%@ Page Theme="OrangeTheme" %>

● 网站

<system.web>

</system.web>

</configuration>

6 Themes vs StyleSheetThemes

● Themes

为某一种控件指定外观

不可被重载

● StyleSheetThemes

为某一种控件指定外观

可以被重载

7 Theme和CSS

● Theme

指定服务器端控件的外观

是ASP.NET2.0的特性

● CSS

指定HTML控件的外观

是W3C标准

● 可以共同使用

8 动态加载Theme

根据条件采用不同的Theme

在Page_PreInit事件中处理

void Page_PreInit(object sender, EventArgs e)

{

Page.Theme = "OrangeTheme";

}

9 在不同的作用域同时设置了Theme时的优先级

前4列表示对应的作用域是否设置了Theme

Web.config

Page(theme)

Page(StyleSheetTheme)

Control

优先级

否

是

否

是

Page(Theme)

否

是

Control

是

否

是

Page(theme)

是

否

是

Web.config

是

否

是

Web.config

10示例-创建简单的Theme

OrangeTheme（通过多个skin文件进行设置）

Button.skin

<asp:Button

BackColor="Orange"

ForeColor="DarkGreen"

Font-Bold="true"

runat="server" />

TextBox.skin

<asp:TextBox

BackColor="Orange"

ForeColor="DarkGreen"

runat="server"/>

GridView.skin

<asp:GridView

AutoGenerateColumns="false"

CellPadding="5"

Font-Names="Arial"

runat="server">

<asp:BoundField

HeaderText="ProcuctName"

DataField="ProductName" />

<asp:BoundField

HeaderText="Price"

DataField="Price" />

</Columns>

</asp:GridView>

BlueTheme（通过一个skin文件进行设置）

<asp:TextBox

BackColor="Blue"

ForeColor="White"

runat="server"/>

<asp:Button

BackColor="Blue"

ForeColor="White"

Font-Bold="true"

runat="server" />

<asp:GridView

AutoGenerateColumns="false"

CellPadding="5"

Font-Names="Arial"

runat="server">

<asp:BoundField

HeaderText="ProcuctName"

DataField="ProductName" />

<asp:BoundField

HeaderText="Price"

DataField="Price" />

</Columns>

</asp:GridView>

ASPX文件(可以在aspx文件中指定Theme)

<%@ Page Theme="OrangeTheme" 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">

</head>

<body>

<div>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

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

<asp:GridView ID="GridView1" runat="server">

</asp:GridView>

</div>

</form>

</body>

</html>

CS文件

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

DataTable source = GetData();

GridView1.DataSource = source;

GridView1.DataBind();

}

private DataTable GetData()

{

DataTable dt = new DataTable();

dt.TableName = "TestGridViewTheme";

dt.Columns.Add("ProductName", typeof(string));

dt.Columns.Add("Price", typeof(float));

DataRow dr1 = dt.NewRow();

dr1["ProductName"] = "自行车";

dr1["Price"] = 1000;

DataRow dr2 = dt.NewRow();

dr2["ProductName"] = "摩托车";

dr2["Price"] = 5000;

DataRow dr3 = dt.NewRow();

dr3["ProductName"] = "小轿车";

dr3["Price"] = 200000;

DataRow dr4 = dt.NewRow();

dr4["ProductName"] = "赛车";

dr4["Price"] = 3000000;

dt.Rows.Add(dr1);

dt.Rows.Add(dr2);

dt.Rows.Add(dr3);

dt.Rows.Add(dr4);

return dt;

}