ASP.NET2.0使用主题

chisdy — Sun, 03 Feb 2008 16:16:25 +0000

1．概述
上次做的例子基本实现了功能，但界面看上去比较丑陋。你可以每个控件都设置其表现属性，以使界面美观一些。但这样做毕竟太麻烦。

ASP.NET提供了一种使界面样式统一的方法，就是皮肤主题。

图2.1 添加主题

2．增加主题
在解决方案资源管理器中，在站点上单击右键，选择“添加ASP.NET文件夹/主题”，创建一个皮肤主题，并取名为Default。

可以看到网站中自动创建了两级目录“App_Themes/Default”。一个项目中可以创建多个主题，但都必须放到App_Themes目录下。我们创建的Default就是一个主题，主题下面包含一个skin文件和多个css文件，用于设定界面样式。

在Default上点击右键，选择“添加新项”，然后选择“外观文件”，点击“添加”按钮，就在Default主题下创建了一个皮肤文件SkinFile.skin。

如果添加新项时选择添加“样式表”，就可以添加一个css文件。我们添加两个css文件GridStyle.css和StyleSheet.css。前者用于设置GridView的样式，后者用于设置其它控件样式。

样式表的内容比较丰富，大家可以找相关资料学习。这里我们只是用简单的示例来说明其用法。

2.1 StyleSheet.css文件
样式表中，可以设置多个样式单元，每个单元有一个名字，称为类名。我们在文件中键入以下代码。

body {


FONT-SIZE: 12px;
MARGIN: 0px;
CURSOR: default;
FONT-FAMILY: Tahoma, Verdana;
background-color: #F2F2F2;
}
.commonText
{
font-size: 12px;
}
.MsgText
{
font-size:12px;
color:Red;
}
.PromptText
{
font-size:16px;
color:#3795D2;
}
.BtnStyle
{
font-size:12px;
text-decoration:none;
background-color: #FFFFFF;
border-style: groove

}

Body样式主要是用来设置页面信息的，我们设置了字体大小为12px（Font-Size:12px）、字体（Font-Family）、背景色（backgroud-color:#F2F2F2）及其它一些属性。

对于文本，我们设定了三种样式：commonText仅设置了文本的大小，MsgText设置为红色字体，PromptText则是蓝色16px的字体。至于程序如何把它们区分开来，我们从SkinFile.Skin中可以看到。

BtnStyle为按钮的样式。

2.2 SkinFile.Skin文件
首先，css文件中的文本有三种样式，我们在skin中如何区分呢？答案是SkinID，如下代码所示：

我们设置了三种Label的样式，可以看到这三种样式通过CssClass属性区分开，它后面引号中的值就是css文件中的样式类名。其中有两个Label有SkinID属性，而另外一个没有设置，没有SkinID的是默认样式，有SkinID的在指定了控件的SkinID并且名称与其一致时才被使用。至于它们的使用，后面我们再介绍。

下面在skin文件中再输入以下代码，分别创建DropDownList、TextBox的皮肤样式以及两个Button的样式。两个Button的区别是：没有SkinID具有固定宽度65px，有SkinID的没有设置宽度。

图3.1 设置页面皮肤

3．皮肤的使用
3.1 单个页面中使用主题
（1）打开default.aspx文件进入设计模式。

（2）属性最上面一个列表框选择DOCUMENT。

（3）找到Theme属性，点击后面的列表框箭头，会看到我们刚增加的主题“Default”，选中它。

（4）运行程序，会看到整个页面使用了没有SkinID属性的那些样式。

（5）任意选中一个Label，找到SkinID属性，这个属性是空的。点击后面的列表框箭头，会发现有两个可选项，就是skin文件中指定的Label那两个主题，选择一个，运行并看一下效果。

通过以上实验我们可以看到，如果控件不指定SkinID，则使用skin文件中那些没有SkinID属性的样式；如果指定了，则使用skin文件中SkinID与之同名的那些样式。

3.2 在整个网站中使用主题
上面讲了主题的使用方法，但如果一个界面一个界面的设置主题，显得有些麻烦，能不能在整个网站中都使用同一种主题，而不必每个页面都设置呢。

我们把Default.aspx文件的Theme属性删除，然后打开web.config，找到，紧跟这个标签下面输入：

然后运行代码，发现运行效果跟刚才是一样的。

这一句的意思就是对所有网页使用同一主题Default。那么我们前面说了，可以在网站中创建多个主题，如何使用其它主题呢？如果我们配置了web.config的默认主题，那么页面使用这个默认主题，除非页面设置了Theme属性指定使用其它主题。

4．关于GridView的主题
选中页面中GridView，看它的属性中样式那一组，会看到有很多样式需要设置。

像GridView控件，它可以设置表头样式(HeaderStyle)、显示项的样式（RowStyle）、交替行样式（AlternatingRowStyle，就是偶数行用这个样式，奇数行用RowStyle的样式）、分页时页码样式等等。

那么我们就需要设置这些样式。

4.1 GridStyle.css
该文件设置了几个样式，有些是在skin文件中重复使用的：
.GridItem {


font-size: 12;
background-color:#D6EBFF;
text-align:left;
}
.GridEdit
{
font-size: 12;
background-color:#D6EBFF;
text-align:left;
}
.GridHeader
{
font-size:12;
background-color:#00AFE8;
text-align:left;
}
.GridAlter
{
font-size:12;
background-color:#D6DBEF;
text-align:left;

}

4.2 SkinFile.skin文件
在主题文件中，增加以下代码：

我们可以看到，显示项样式RowStyle和分页页码PagerStyle使用了相同的样式GridItem。表头和选中项使用了相同的样式GridHeader。当然你也可以给它们设置不同的样式，我设置成相同是为了说明也可以这样用。

再次运行程序，浏览效果。

5．设置主题的简单方法
实际上，主题的设置不一定非要用css文件，只要一个skin文件就可以了。具体方法是先从网页上设置控件的字体、颜色等属性，达到你要的效果后，进入源模式，把这个控件的代码直接复制到skin文件中，然后删除掉ID=”xx”这个属性就可以了，大家不妨试一下。

既然这种方法这么简单，为什么还要使用css呢？这是因为，skin中的样式，只能应用于服务器端控件，就是由runat=”server”的那些控件。对于Html控件，skin文件是不起作用的，这时就需要用到css。单独做成css，应用到Html控件时就不用再写一次了。

chisdy.A.Pro » Dotnet

ASP.NET2.0使用主题

Related Posts