自定义控件主题使用研究

王朝asp·作者佚名  2006-01-10
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航