自定义控件主题使用研究
我们在使用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不一定要一样。