自定義控件主題使用研究

  我們在使用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不一定要一樣。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章