.NET2.0中skin的使用简化了网站整体外观的建设工作,为程序员节省不少精力。
在skin文件中.NET自带的各种控件是可以直接设置样式的,可是如果是自己开发的控件,能不能用skin来统一样式呢?
今天在部署项目的skin时候,发现了这个问题,使用了自定义的YYControl的smartgridview控件,把下面样式放到.skin文件中报错:“错误 1 未知的服务器标记“yyc:smartgridview”。”
这个控件实际上是继承了自带的GridView控件,所以其大部分默认属性都和GridView一样,可以在skin文件中定义样式。查了一下资料发现要是自己开发的用户控件,要想在skin中能够对某个属性定义样式,只需要在其属性前添加[Themeable(true)]即可。
如下面的样例:
这是一个用来刷新页面的一个自定义的ImageButton,其好处是刷新当前页,动作的触发是在客户端利用脚本来完成,不需要写任何程序代码:
在skin文件中.NET自带的各种控件是可以直接设置样式的,可是如果是自己开发的控件,能不能用skin来统一样式呢?
今天在部署项目的skin时候,发现了这个问题,使用了自定义的YYControl的smartgridview控件,把下面样式放到.skin文件中报错:“错误 1 未知的服务器标记“yyc:smartgridview”。”
<yyc:smartgridview runat="server" GridLines="None" Width="100%">
<RowStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" CssClass="title" />
<AlternatingRowStyle BackColor="#F9FFF6" />
</yyc:smartgridview>
于是就想到在.skin文件注册这个控件:加上下面代码就OK了:
<RowStyle HorizontalAlign="Left" />
<HeaderStyle HorizontalAlign="Left" CssClass="title" />
<AlternatingRowStyle BackColor="#F9FFF6" />
</yyc:smartgridview>
<%@ Register Assembly="YYControls" Namespace="YYControls" TagPrefix="yyc" %>
这个控件实际上是继承了自带的GridView控件,所以其大部分默认属性都和GridView一样,可以在skin文件中定义样式。查了一下资料发现要是自己开发的用户控件,要想在skin中能够对某个属性定义样式,只需要在其属性前添加[Themeable(true)]即可。
如下面的样例:
这是一个用来刷新页面的一个自定义的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文件配置如下: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;
}
}
}
}
<%@ 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>
<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>