用VS2008制作主题和皮肤

最新推荐文章于 2023-07-06 08:03:22 发布

jinhailang

最新推荐文章于 2023-07-06 08:03:22 发布

阅读量3.6k

点赞数

分类专栏： .net 文章标签： calendar css themes server asp 编程

.net 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

新建项目－外观文件生成.skin文件

制作例子

<asp:Calendar runat="server" BackColor="White"

BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana"

Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth"

SkinID="blue" Width="330px">

<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"

Height="8pt" />

<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True"

Font-Size="12pt" ForeColor="White" Height="12pt" />

</asp:Calendar>

<asp:Calendar runat="server" BackColor="White"

BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest"

Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px"

SkinID="now" Width="200px">

</asp:Calendar>

引用例

<asp:Calendar ID="Calendar1" runat="server" SkinID="blue"></asp:Calendar>

<asp:Calendar ID="Calendar2" runat="server" SkinID="now"></asp:Calendar>

上述控件并没有对控件进行样式控制，只是声明了SkinID属性，当声明了SkinID属性后，系统会自动在主题文件中找到相匹配的SkinID，并将主题样式应用到当前控件。在使用主题的页面，必须声明主题，如果不声明主题，则页面无法找到页面中控件需要使用的主题，示例代码如下所示。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_1._Default" Theme="Theme1"%>

主题还可以包括级联样式表（CSS文件），将.css放置在主题目录中，样式表则会自动的应用为主题的一部分，不仅如此，主题还可以包括图片和其他资源。

页面主题和全局主题

用户可以为每个页面设置主题，这种情况被称为“页面主题”。也可以为应用程序的每个页面都使用主题，在每个页面使用默认主题，这种情况被称为“全局主题”。

页面主题是一个主题文件夹，其中包括控件的主题、层叠样式表、图形文件和其他资源文件，这个文件夹是作为网站中的“/App_Themes”文件夹和子文件夹创建的。每个主题都是“/App_Themes”文件夹的一个子文件夹，

使用全局主题，可以让应用程序中的所有页面都能够使用该主题，当维护同一个服务器上的多个网站时，可以使用全局主题定义应用程序的整体外观。当需要使用全局主题时，则可以通过修改Web.config配置文件中的<pages>配置节进行主题的全局设定。

使用全局主题和使用页面主题的方法基本相同，它们都包括属性设置、样式设置和图形。但是全局主题和页面主题不同的是，全局主题存放在服务器上的公共文件夹中，这个文件夹通常命名为Theme。服务器上的任何Web应用程序都能够使用Theme文件夹中的主题。主题能够和CSS文件一样，进行页面布局和控件样式控制，但是主题和CSS文件的描述不同，所能够完成的功能也不同，其主要区别如下所示：

q 主题可以定义控件的样式，不仅能够定义样式属性，还能够定义其他样式，包括模板。

q 主题可以包括图形等其他主题元素文件。

q 主题的层叠方式与CSS文件的层叠方式不同。

q 一个页面只能应用与一个主题，而CSS可以被多个文件应用。

主题不仅能够进行控件的样式定义，还能够定义模板，这样减少了相同类型的控件的模板编写操作。但是主题也有缺点，一个页面只能应用一个主题，而无法应用多个主题。与之相反的是，一个页面能够应用多个CSS文件。

主题与CSS相比，主题在样式控制上还有很多不够强大的地方，而CSS页面布局的能力比主题更加强大，样式控制更加友好。

应用和禁用主题

通常情况下，可以在网站目录下的“App_Themes”文件夹下定义主题，然后在页面中进行主题的使用声明，这样在页面中就能够使用主题了。制作主题的过程也非常简单，在“App_Themes”文件夹下新建一个文件夹，则这个文件夹的名称就会作为主题名称在应用程序中保存。同样，开发人员能够在文件夹中可以新增“.skin”文件，以及“.css”文件和图形图像文件来修饰主题，这样一个主题就制作完毕并能够在页面中使用了。

在很多情况下，在Web开发中需要定义全局主题，这样Web应用程序就能够使用这个主题，全局主题通常放在一个特殊的目录下，放在这个目录下的主题能够被服务器上的任何网站，以及网站中的任何应用所引用。全局主题存放的目录如下所示。

Iisdefaultroot/aspnet_client/system_web/version/Themes

在全局主题目录下，可以创建任何主题文件，这样在网站上的其他Web应用也能够使用全局主题作为主题。在主题的编写过程中，通常需要以下几个步骤：

q 添加项目，包括.skin、css以及其他文件。

q 创建皮肤，包括对控件属性的定义。

q 在页面中声明并使用皮肤。

通过以上三个步骤能够创建并使用皮肤，但是值得注意的是，在创建皮肤文件时，必须保存为.skin文件并且主题中控件的定义必须包括SkinID属性且不能包括ID。在皮肤中，对控件的属性的描述同样必须要包括runat=“server”标记，这样才能够保证皮肤文件中控件的皮肤的描述是正确和可读的，示例代码如下所示。

<asp:Calendar runat="server" BackColor="White"

BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana"

Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth"

SkinID="blue" Width="330px">

<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"

Height="8pt" />

<TitleStyle BackColor="#333399" BorderStyle="Solid" Font-Bold="True"

Font-Size="12pt" ForeColor="White" Height="12pt" />

</asp:Calendar>

在定义了控件的皮肤后，就可以在单个页面进行皮肤的声明和使用，示例代码如下所示。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_1._Default" Theme="MyTheme1"%>

同样也可以使用StyleSheetTheme属性进行页面主题的设置，示例代码如下所示。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_12_1._Default" StylesheetTheme="MyTheme1"%>

如果需要使用全局主题，则需要在Web.config配置文件中定义全局主题，示例代码如下所示。

<system.web>

</pages>

</system.web>

在使用主题后，对于控件的属性的编写是没有任何效果的，示例代码如下所示。

<asp:Calendar ID="Calendar1" runat="server" SkinID="blue" BackColor="#FFFFCC"

BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"

Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px"

ShowGridLines="True" Width="220px">

<TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt"

ForeColor="#FFFFCC" />

</asp:Calendar>

上述代码编写了一个控件的属性，其中某些属性被主题覆盖。简单的说，局部的设置将会服从全局的设置，即页面上的控件已经具备自己的属性设置，但是当指定了SkinID属性后，部分属性将会服从全局属性设置，如图12-12和图12-13所示。

虽然本地属性设置为另一种样式，但是运行后的控件样式却不是本地属性配置的样式，因为其中的某些属性已经被主题更改。在设置页面或者全局主题的StyleSheetTheme属性时，将主题作为样式表主题应用的话，本地页的设置将优先于主题中定义的设置，即局部设置将会覆盖全局设置。

对于主题而言，如果本地主题，以及全局主题都存在时，这种情况如控件本身的属性和使用的主题属性都存在一样，本身的属性将会被全局属性更改，全局属性中没有的属性将继续保留。而相对与CSS文件而言，如果本地CSS描述和全局CSS描述都存在，包括控件本身的CSS描述和内嵌式CSS文件的描述都一样时，相反的，本地CSS描述会替代全局的CSS描述。

对于有些情况，主题会重写也和控件外观的本地设置。当控件或页面已经定义了外观，而又不希望全局主题将本地主题进行重写和覆盖，可以禁用主题的覆盖行为。对于页面，可以用声明的方法进行禁用，示例代码如下所示。

<%@ Page Language="C#" AutoEventWireup="true" EnableTheming="false" %>

当页面需要某个主题的属性描述，而又希望单个控件不被主题描述时，同样可以通过EnableTheming属性进行主题禁止，示例代码如下所示。

<asp:Calendar ID="Calendar3" runat="server" EnableTheming="False">

</asp:Calendar>

这样就可以保证该控件不会被主题描述和控制，而页面和页面的其他元素可以使用主题描述中的相应的属性。

12.1.8 用编程的方法控制主题

当主题被制作完成后，很多场合用户希望能够自行更改主题，这种方式非常的实用，通过编程手段，只需要更改StyleSheetTheme属性就能够对页面的主题进行更改。通过编程的方法不仅能够更改页面的主题，同样可以更改控件的主题，达到动态更改控件主题的效果。当需要更改页面的主题时，可以更改页面的StyleSheetTheme属性即可实现页面主题更改的效果，StyleSheetTheme属性的更改代码只能编写在PreInit事件中，示例代码如下所示。

protected void Page_PreInit(object sender, EventArgs e)

{

switch (Request.QueryString["theme"]) //获取传递的参数

{

case "MyTheme1": //判断主题

Page.Theme = "MyTheme1"; break; //更改主题

case "MyTheme2": //判断主题

Page.Theme = "MyTheme2"; break; //更改主题

}

上述代码则通过更改Page的StyleSheetTheme属性对页面的主题进行更改，在编程的过程中，同样可以使用更加复杂的编程方法实现主题的更改。在更改页面的代码中，必须首先重写StyleSheetTheme属性，然后通过其中的get访问器返回样式表的主题名称，示例代码如下所示。

public override String StyleSheetTheme

{

get //获取主题

{

return "MyTheme1"; //返回主题名称

}

对于控件，可以通过更改控件的SkinID属性来对控件的主题进行更改，示例代码如下所示。

protected void Page_PreInit(object sender, EventArgs e)

{

Calendar3.SkinID = "blue"; //更改SkinID属性

}

上述代码通过修改控件的SkinID属性修改控件的主题，在控件中，SkinID属性是能够将控件与主题进行联系的关键属性。

jinhailang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
用VS2008制作主题和皮肤

新建项目－外观文件生成.skin文件制作例子 BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" Font-Size="9pt" ForeColor="Black" Height="250px" NextPrevFormat="ShortMonth"
复制链接

扫一扫