ASP.NET2.0快速入门(2)——使用皮肤

    技术2022-05-12  1

    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,如下代码所示: <asp:Label runat="server" CssClass="commonText"></asp:Label> <asp:Label runat="server" CssClass="MsgText" SkinID="MsgText"></asp:Label> <asp:Label runat="server" CssClass="PromptText" SkinID="PromptText"></asp:Label> 我们设置了三种Label的样式,可以看到这三种样式通过CssClass属性区分开,它后面引号中的值就是css文件中的样式类名。其中有两个Label有SkinID属性,而另外一个没有设置,没有SkinID的是默认样式,有SkinID的在指定了控件的SkinID并且名称与其一致时才被使用。至于它们的使用,后面我们再介绍。 下面在skin文件中再输入以下代码,分别创建DropDownList、TextBox的皮肤样式以及两个Button的样式。两个Button的区别是:没有SkinID具有固定宽度65px,有SkinID的没有设置宽度。 <asp:DropDownList runat="server" CssClass="commonText"></asp:DropDownList> <asp:TextBox runat="server" CssClass="commonText"></asp:TextBox> <asp:Button runat="server" CssClass="BtnStyle" Width="65px" /> <asp:Button runat="server" CssClass="BtnStyle" SkinID="NoWidthBtn" /> 图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,找到<system.web>,紧跟这个标签下面输入: <pages theme="Default" /> 然后运行代码,发现运行效果跟刚才是一样的。 这一句的意思就是对所有网页使用同一主题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文件 在主题文件中,增加以下代码: <asp:GridView runat="server" AutoGenerateColumns="False"> <RowStyle CssClass="GridItem" /> <EditRowStyle CssClass="GridEdit" /> <SelectedRowStyle CssClass="GridHeader" /> <PagerStyle CssClass="GridItem" /> <HeaderStyle CssClass="GridHeader" /> <AlternatingRowStyle CssClass="GridAlter" /> </asp:GridView> 我们可以看到,显示项样式RowStyle和分页页码PagerStyle使用了相同的样式GridItem。表头和选中项使用了相同的样式GridHeader。当然你也可以给它们设置不同的样式,我设置成相同是为了说明也可以这样用。 再次运行程序,浏览效果。 5.设置主题的简单方法 实际上,主题的设置不一定非要用css文件,只要一个skin文件就可以了。具体方法是先从网页上设置控件的字体、颜色等属性,达到你要的效果后,进入源模式,把这个控件的代码直接复制到skin文件中,然后删除掉ID=”xx”这个属性就可以了,大家不妨试一下。 既然这种方法这么简单,为什么还要使用css呢?这是因为,skin中的样式,只能应用于服务器端控件,就是由runat=”server”的那些控件。对于Html控件,skin文件是不起作用的,这时就需要用到css。单独做成css,应用到Html控件时就不用再写一次了

    最新回复(0)