我们在使用Windows操作系统的时候,可以在桌面设置中通过主题来设定当前Windows的UI风格,现在在asp.net 2.0中也新增加了这一功能:主题/皮肤。
例如:在我们的系统中,我们可以制作几种样式风格的主题,然后在web.config中,通过<pages>配置项的theme属性来指定要使用的主题,您也可以对单个的页面来进行主题的设定,同时也可以在程序中设定,这样就可以保存并应用用户自己选择的主题了。
对于asp.net 2.0中自带的webControl都提供了主题的支持,那对于自定义的控件该如何来实现主题呢?
其实很简单,在要使用主题的属性定义前面,添加属性[Themeable(true)],这样,
自定义控件的该属性就能够支持主题了。
然后,在主题文件夹中,你可以为该自定义控件单独做一个skin文件,也可以在其他的skin文件中指定该自定义控件的属性主题样式等,但您需要在该skin文件中注册该自定义控件,指定其所在程序集、名称空间、标签前缀等,就像我们在页面中使用
自定义控件一样,但对于标签前缀的命名不一定要和页面中完全一样。
对于皮肤的使用同其他asp.net2.0自带控件一样,都是在skin文件中定义多个样式,并设定其SkinId属性,在页面中可以指定该
自定义控件的SkinId属性来使用该皮肤,如果没有指定SkinId,则该样式为主题的默认样式。
如下面的样例:
这是一个用来刷新页面的一个自定义的ImageButton,其好处是刷新当前页,动作的触发是在客户端利用脚本来完成,不需要写任何程序代码:
using
System;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Web.UI.HtmlControls;
using
System.ComponentModel;
using
System.Drawing;
using
System.Drawing.Design;
using
System.IO;
using
System.Reflection;
using
System.Collections;
using
System.Web.UI.Design;
using
System.Web;
using
System.Text;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
namespace
G3CustomControls
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
public class RefreshButton:WebControl
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
protected override void Render(HtmlTextWriter writer)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
writer.Write("<img src=''''" + ImageUrl.Replace("~/", "") + "'''' style=''''cursor:hand'''' οnclick=''''window.location=window.location''''>");
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
[DefaultValue(""), Themeable(true), Category("Appearance"), Description("RefreshButton_ImageUrl"), UrlProperty, Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor)), Bindable(true)]
public virtual string ImageUrl
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
get
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string imageUrl = (string)this.ViewState["ImageUrl"];
if (imageUrl != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
return imageUrl;
}
return string.Empty;
}
set
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.ViewState["ImageUrl"] = value;
}
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
主题的Skin文件配置如下:
<%@ Register Assembly="G3CustomControls" Namespace="G3CustomControls" TagPrefix="cc1" %>
<cc1:CloseButton runat="server" ImageUrl="~/App_Themes/Blue/images/button_Close.gif"></cc1:CloseButton>
<cc1:RefreshButton runat="server" ImageUrl="~/App_Themes/Blue/images/button_Refresh.gif"></cc1:RefreshButton>
<cc1:RefreshButton runat="server" SkinId= "RefreshButton2" ImageUrl="~/App_Themes/Blue/images/button_Refresh2.gif"></cc1:RefreshButton>
页面中使用如下:
<%@ Register Assembly="G3CustomControls" Namespace="G3CustomControls" TagPrefix="cc1" %>
……
<cc1:CloseButton runat="server"></cc1:CloseButton>
<cc1:RefreshButton runat="server"></cc1:RefreshButton>
其中页面的TagPrefix和Skin的TagPrefix不一定要一样。