自定义控件主题使用研究

  我们在使用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' οnclick='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不一定要一样。