我们在使用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;
namespace G3CustomControls
{
public class RefreshButton:WebControl
{
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<img src='" + ImageUrl.Replace("~/", "") + "' style='cursor:hand' onclick='window.location=window.location'>");
}
[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
{
get
{
string imageUrl = (string)this.ViewState["ImageUrl"];
if (imageUrl != null)
{
return imageUrl;
}
return string.Empty;
}
set
{
this.ViewState["ImageUrl"] = value;
}
}
}
}
主题的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不一定要一样。