Asp.net 2.0 自定义控件开发

（一） 概述

控件名称 工具栏控件 分为主菜单和子菜单部分 涉及到公司代码版权 目前版本不是最终版本 且去除了一些代码 后面可下载的仅为纯控件开发技术相关代码 通过扩展可以任意定制需要的功能 里面一些设计思想也具有参考价值

（二） 控件运行效果截图

默认样式和自定义样式

项集合编辑器

(三) 代码部分

主控件类ToolButton代码:

/// <summary>

/// Author: 【金鹰】【专注于DotNet技术】【ChengKing(ZhengJian)】

/// Blog: Http:///ChengKing

/// </summary>

using System;

using SystemCollectionsGeneric;

using SystemComponentModel;

using SystemText;

using SystemWeb;

using SystemWebUI;

using SystemWebUIWebControls;

using SystemWebUIHtmlControls;

using SystemIO;

using SystemDrawing;

namespace ToolButton

{

[DefaultProperty(Text)]

[ToolboxData(<{}:ToolButton runat=server></{}:ToolButton>)]

public class ToolButton : CompositeControl INamingContainer

{

#region 内部变量

//含下拉箭头单元格的ID

private string tcDownID = ;

//本控件的ID

private string tbID = ;

#endregion

#region 属性

/// <summary>

/// 设置或获取显示的文本

/// </summary>

[Bindable(true)]

[Category(Appearance)]

[DefaultValue([按钮文本])]

[Localizable(true)]

[Description(显示的文本)]

public string Text

{

get

{

string s = (string)ViewState[Text];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[Text] = value;

}

}

/// <summary>

/// 设置或获取图片路径

/// </summary>

[Bindable(true)]

[Category(Appearance)]

[DefaultValue(NoPicgif)]

[Localizable(true)]

[Description(显示图像的文件名)]

public string ImageName

{

get

{

String s = (String)ViewState[ImageName];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[ImageName] = value;

}

}

/// <summary>

/// 设置或获取图片文件夹目录

/// </summary>

[Bindable(true)]

[Category(客户端路径)]

[DefaultValue()]

[Localizable(true)]

[Description(资源(image/css/js)的客户端根目录)]

public string ClientPath

{

get

{

String s = (String)ViewState[ClientPath];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[ClientPath] = value;

}

}

/// <summary>

/// 设置或获取点击按钮执行的命令(点击大按钮执行的命令)

/// </summary>

[Bindable(true)]

[Category(行为)]

[DefaultValue()]

[Localizable(true)]

[Description(点击控件执行的命令字串)]

public string Command

{

get

{

string s = (string)ViewState[Command];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[Command] = value;

}

}

private PopupMenu _Items = new PopupMenu();

/// <summary>

/// 获取子菜单集合

/// </summary>

[PersistenceMode(PersistenceModeInnerDefaultProperty)]

[DesignerSerializationVisibility(DesignerSerializationVisibilityContent)]

[Description(获取或设置下拉子菜单项集合)]

[Category(杂项)]

[NotifyParentProperty(true)]

[TypeConverter(typeof(CollectionConverter))]

[DesignOnly(false)]

public PopupMenu Items

{

get

{

if (_Items == null)

{

_Items = new PopupMenu();

}

return _Items;

}

}

/// <summary>

/// 设置或获取子菜单集合句柄

/// </summary>

[Browsable(false)]

[Description(获取或设置菜单)]

public PopupMenu Menu

{

get

{

return _Items;

}

set

{

this_ItemsClear();

foreach (PopupMenuItem item in value)

{

this_ItemsAdd(item);

}

}

}

[Browsable(true)]

[Category(CSS样式)]

[Description(获取或设置主控件的OnMouseOver样式)]

public string CSS_MAIN_ONMOUSEOVER_CLASSNAME

{

get

{

string s = (string)ViewState[CSS_MAIN_ONMOUSEOVER];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[CSS_MAIN_ONMOUSEOVER] = value;

}

}

[Browsable(true)]

[Category(CSS样式)]

[Description(获取或设置主控件的OnMouseOut样式)]

public string CSS_MAIN_ONMOUSEOUT_CLASSNAME

{

get

{

string s = (string)ViewState[CSS_MAIN_ONMOUSEOUT];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[CSS_MAIN_ONMOUSEOUT] = value;

}

}

[Browsable(true)]

[Category(CSS样式)]

[Description(获取或设置下拉款项的OnMouseOver样式)]

public string CSS_SUBITEM_ONMOUSEOVER_CLASSNAME

{

get

{

string s = (string)ViewState[CSS_SUBITEM_ONMOUSEOVER];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[CSS_SUBITEM_ONMOUSEOVER] = value;

}

}

[Browsable(true)]

[Category(CSS样式)]

[Description(获取或设置下拉款项的OnMouseOut样式)]

public string CSS_SUBITEM_ONMOUSEOUT_CLASSNAME

{

get

{

string s = (string)ViewState[CSS_SUBITEM_ONMOUSEOUT];

return ((s == null) ? StringEmpty : s);

}

set

{

ViewState[CSS_SUBITEM_ONMOUSEOUT] = value;

}

}

#endregion

#region 构造函数

/// <summary>

/// 构造函数

/// </summary>

public ToolButton()

{

//设置一套默认风格

thisBackColor = ColorFromName(MenuBar);//ViewState[BackColor] = ColorFromName(MenuBar);

ViewState[Text] = [按钮文本];

//ViewState[ClientPath] = ToolButtonImages;

ViewState[ImageName] = NoPicgif;

thisBorderStyle = BorderStyleNotSet;//ViewState[BorderStyle] = BorderStyleNotSet;

thisBorderWidth = UnitPixel();//ViewState[BorderWidth] = UnitPixel();

thisBorderColor = ColorFromName(ControlDark);//ViewState[BorderColor] = ColorFromName(ControlDark);

thisHeight = UnitPixel();//ViewState[Height] = UnitPixel();

//thisWidth = UnitPixel();]

}

#endregion

#region 方法

protected override void Render(HtmlTextWriter writer)

{

//baseRender(writer);

PrepareControlForRendering();

baseRenderContents(writer);

}

/// <summary>

/// 设置控件树的样式和客户端事件

/// </summary>

private void PrepareControlForRendering()

{

if (thisControlsCount < )

{

return;

}

bool IsCustomStyle = CSS_MAIN_ONMOUSEOVER_CLASSNAME != StringEmpty && CSS_MAIN_ONMOUSEOUT_CLASSNAME != StringEmpty;

Table t = (Table)thisControls[];

tCellPadding = ;

tCellSpacing = ;

tStyleAdd(Cursor default);

tCopyBaseAttributes(this);

tHeight = thisHeight;

tWidth = thisWidth;

tBorderStyle = thisBorderStyle;

tBorderWidth = UnitPixel();

tAttributesAdd(onselectstart return false;);

//tStyleAdd(aligh left);

//tStyleAdd(tablelayout fixed);

//tStyleAdd(wordwrap breakword);

//***display:inline block);

//if (CSS_MAIN_ONMOUSEOVER_CLASSNAME != StringEmpty && CSS_MAIN_ONMOUSEOUT_CLASSNAME != StringEmpty)

//{

// tCssClass = thisCSS_MAIN_ONMOUSEOUT_CLASSNAME;

// tAttributesAdd(onmouseenter ChangeClassName(this + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ));

// tAttributesAdd(onmouseleave ChangeClassName(this + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ));

//}

if (tRowsCount > )

{

TableRow tr = tRows[];

//if (IsCustomStyle == false)

//{

trBorderWidth = UnitPixel();

// }

////应用用户定义样式

//if (IsCustomStyle)

//{

// trCssClass = thisCSS_MAIN_ONMOUSEOUT_CLASSNAME;

// trAttributesAdd(onmouseenter ChangeClassName(this + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ));

// trAttributesAdd(onmouseleave ChangeClassName(this + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ));

//}

for (int i = ; i < trCellsCount; i++)

{

TableCell tc = trCells[i];

//tcStyleAdd(align left);

if (IsCustomStyle == false)

{

tcBorderColor = thisBorderColor;

tcBorderStyle = thisBorderStyle;

}

string strBorderWidth = intParse(thisBorderWidthValueToString())ToString();

//应用用户定义样式

if (IsCustomStyle)

{

tcCssClass = thisCSS_MAIN_ONMOUSEOUT_CLASSNAME;

}

else

{

tcCssClass = this CssClass;

}

if (i == )

{

if (IsCustomStyle == false)

{

tcBorderWidth = thisBorderWidth;

tcStyleAdd(borderWidth strBorderWidth + px px + strBorderWidth + px + strBorderWidth + px);

}

else

{

tcStyleAdd(borderRightWidth px);

//固定Borderwidth

//tcStyleAdd(borderWidth px px px px);

}

if (thisCommand != null && thisCommandLength > )

{

string strCommand = thisCommandTrim()Replace(\ )Replace(&nbsp; );

tcAttributesAdd(onclick strCommand);

if (IsCustomStyle == false)

{

string str = ColorFromName(LightGray)ToString();

tcAttributesAdd(onmouseenter thisstyleborderStyle=inset; thisparentElementchildren()styleborderStyle=inset;);

tcAttributesAdd(onmouseleave thisstyleborderStyle=outset;thisparentElementchildren()styleborderStyle=outset;);

}

else

{

tcAttributesAdd(onmouseenter ChangeClassName(this + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ); + ChangeClassName(thisparentElementchildren() + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ););

tcAttributesAdd(onmouseleave ChangeClassName(this + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ); + ChangeClassName(thisparentElementchildren() + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ););

}

}

//tcStyleAdd(bordercolor red);

//tcStyleAdd(width ((SystemWebUIWebControlsImage)tcControls[])WidthToString());

}

else if (i == )

{

if (IsCustomStyle == false)

{

tcBorderWidth = thisBorderWidth;

tcStyleAdd(borderWidth strBorderWidth + px px + strBorderWidth + px px);

}

else

{

tcStyleAdd(borderLeftWidth px);

//固定Borderwidth

//tcStyleAdd(borderWidth px px px px);

}

if (thisCommand != null && thisCommandLength > )

{

string strCommand = thisCommandTrim()Replace(\ )Replace(&nbsp; );

tcAttributesAdd(onclick strCommand);

if (IsCustomStyle == false)

{

tcAttributesAdd(onmouseenter thisstyleborderStyle=inset; thisparentElementchildren()styleborderStyle=inset;);

tcAttributesAdd(onmouseleave thisstyleborderStyle=outset;thisparentElementchildren()styleborderStyle=outset;);

// tcCssClass = mainexit;

// tcAttributesAdd(onmouseenter ChangeClassName(this mainfocus);ChangeClassName(thisparentElementchildren()mainfocus););

// tcAttributesAdd(onmouseleave ChangeClassName(this mainexit);ChangeClassName(thisparentElementchildren()mainexit););

}

else

{

tcAttributesAdd(onmouseenter ChangeClassName(this + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ); + ChangeClassName(thisparentElementchildren() + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ););

tcAttributesAdd(onmouseleave ChangeClassName(this + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ); + ChangeClassName(thisparentElementchildren() + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ););

}

}

if (IsCustomStyle == false)

{

tcFontMergeWith(thisFont);

}

}

else if (i == )

{

if (IsCustomStyle == false)

{

tcBorderWidth = thisBorderWidth;

}

else

{

//固定Borderwidth

//tcStyleAdd(borderWidthpx px px px);

}

if (IsCustomStyle == true)

{

tcAttributesAdd(onmouseenter ChangeClassName(this + CSS_MAIN_ONMOUSEOVER_CLASSNAME + ););

tcAttributesAdd(onmouseleave ChangeClassName(this + CSS_MAIN_ONMOUSEOUT_CLASSNAME + ););

}

else

{

tcAttributesAdd(onmouseenter thisstyleborderStyle=inset;);

tcAttributesAdd(onmouseleave thisstyleborderStyle=outset;);

}

//tcStyleAdd(bordercolor red);

}

if (IsCustomStyle == false)

{

tcForeColor = thisForeColor;

tcBackColor = thisBackColor;

}

if (tcID == tcDownID)

{

if (thisItemsCount > )

{

tcAttributesAdd(onclick activeMenu( + thisUniqueID + ););

}

else

{

tcEnabled = false;

//tcStyleAdd(display none);

if (tcParentControlsCount >= )

{

((TableCell)tcParentControls[])StyleAdd(borderRightWidth px);

}

}

}

}

}

}

/// <summary>

/// 创建子控件的层次结构

/// </summary>

protected override void CreateChildControls()

{

Table t = new Table();

tbID = thisUniqueID + _table;

tID = tbID;

TableRow tr = new TableRow();

tRowsAdd(tr);

TableCell tc_img = new TableCell();

if (thisClientPath != StringEmpty || thisImageName != StringEmpty)

{

string strImageUrl = PathCombine(thisClientPath ToolButtonImages\\ + thisImageName);

SystemWebUIWebControlsImage image = new SystemWebUIWebControlsImage();

imageBorderWidth = UnitPixel();

imageImageUrl = strImageUrl;

tc_imgControlsAdd(image);

trCellsAdd(tc_img);

}

TableCell tc_text = new TableCell();

tc_textControlsAdd(new LiteralControl(&nbsp; + thisText + &nbsp;));

trCellsAdd(tc_text);

TableCell tc_downmenu = new TableCell();

tcDownID = thisUniqueID + tcDown;

tc_downmenuID = tcDownID;

tc_downmenuControlsAdd(new LiteralControl(<font size=>▼</font>));

trCellsAdd(tc_downmenu);

thisControlsAdd(t);

baseCreateChildControls();

}

//protected override void RenderContents(HtmlTextWriter writer)

//{

// baseRenderContents(writer);

//}

/// <summary>

/// 注册客户端脚本

/// </summary>

/// <param name=e></param>

protected override void OnPreRender(EventArgs e)

{

//引用JS文件

if (!PageClientScriptIsClientScriptBlockRegistered(thisGetType() BuildMenu))

{

//string jsPath = clientPath + /Js/ + jsscriptjs;

PageClientScriptRegisterClientScriptBlock(thisGetType() BuildMenu

<script type=text/javascript src=js/ToolButton_JScriptjs></script>);

}

///<summary>

/// 注册makeMenu方法脚本

///<summary>

StringBuilder strAddMenuItemScript = new StringBuilder();

if (thisItemsCount != )

{

//if (thisCSS_MAIN_ONMOUSEOUT_CLASSNAME != StringEmpty)

//{

// TableCell tc = new TableCell();

// tcCssClass = thisCSS_MAIN_ONMOUSEOUT_CLASSNAME;

// Color c = tcBorderColor;

//}

strAddMenuItemScriptAppend( function makeMenu+thisUniqueID+(UniqueID));

strAddMenuItemScriptAppend( { );

strAddMenuItemScriptAppend( var myMenu item; );

strAddMenuItemScriptAppend( );

strAddMenuItemScriptAppend( );

strAddMenuItemScriptAppend( myMenu = new contextMenu(UniqueID); );

strAddMenuItemScriptAppend( );

foreach (PopupMenuItem item in thisItems)

{

string strImageSrc;

strImageSrc = PathCombine(thisClientPath @ToolButtonImages\ + itemImageName);

strImageSrc = strImageSrcReplace(\\ \\\\);

string strCommand;

try

{

strCommand = itemCommandTrim()Replace(\ )Replace(&nbsp; );

}

catch

{

strCommand = null;

}

strAddMenuItemScriptAppend( item = new contextItem( + (itemText == null ? : itemText) + + strImageSrc + \ + (strCommand == null ? : (strCommand + ; hideCurrentMenu())) + \ + Menu + + thisCSS_SUBITEM_ONMOUSEOVER_CLASSNAME + + thisCSS_SUBITEM_ONMOUSEOUT_CLASSNAME + ););

strAddMenuItemScriptAppend( myMenuaddItem(item); );

}

strAddMenuItemScriptAppend( );

strAddMenuItemScriptAppend( myMenushow(thisdocument););

strAddMenuItemScriptAppend( );

strAddMenuItemScriptAppend( delete item;);

strAddMenuItemScriptAppend( delete myMenu;);

strAddMenuItemScriptAppend( });

}

else

{

strAddMenuItemScriptAppend( function makeMenu+thisUniqueID+(UniqueID));

strAddMenuItemScriptAppend( { );

//strAddMenuItemScriptAppend( alert(No Set Items Property!););

strAddMenuItemScriptAppend( });

}

if (!PageClientScriptIsClientScriptBlockRegistered(thisGetType() AddMenuItemScript+thisUniqueID))

{

PageClientScriptRegisterClientScriptBlock(thisGetType() AddMenuItemScript+thisUniqueID strAddMenuItemScriptToString() true);

}

/////<summary>

///// 注册contextMenu方法脚本

/////<summary>

//StringBuilder strCreateDiv = new StringBuilder();

//strCreateDivAppend(function contextMenu + thisUniqueID + ());

//strCreateDivAppend({\r\n);

//strCreateDivAppend(ems = new Array();\r\n);

//strCreateDivAppend(thisaddItem = function(item)\r\n);

//strCreateDivAppend({\r\n);

//strCreateDivAppend( ems[emslength] = item;\r\n);

//strCreateDivAppend(}\r\n);

//strCreateDivAppend(thisshow = function (oDoc)\r\n);

//strCreateDivAppend({\r\n);

//strCreateDivAppend( var strShow = \\;\r\n);

//strCreateDivAppend( var i;\r\n);

//strCreateDivAppend( strShow = \<div id=rightmenu + thisUniqueID + onclick=eventcancelBubble=true;return true; style=BACKGROUNDCOLOR: system; BORDER: # px solid; LEFT: px; POSITION: absolute; TOP: px; display: none; ZINDEX: >\; \r\n);

//strCreateDivAppend( strShow += \<table border= height=\; \r\n);

//strCreateDivAppend( strShow += emslength * ;\r\n);

//strCreateDivAppend( strShow += \ cellpadding= cellspacing=>\;\r\n);

//strCreateDivAppend( oDocwrite(strShow);\r\n);

//strCreateDivAppend( for(i=; i<emslength; i++)\r\n);

//strCreateDivAppend( {\r\n);

//strCreateDivAppend( ems[i]show(oDoc);\r\n);

//strCreateDivAppend( }\r\n);

//strCreateDivAppend( strShow += \</table>\;\r\n);

//strCreateDivAppend( strShow += \</div>\;\r\n);

//strCreateDivAppend( oDocwrite(strShow);\r\n);

//strCreateDivAppend( }\r\n);

//strCreateDivAppend(}\r\n);

//if (!PageClientScriptIsClientScriptBlockRegistered(thisGetType() CreateMainDiv + thisUniqueID))

//{

// PageClientScriptRegisterClientScriptBlock(thisGetType() CreateMainDiv + thisUniqueID strCreateDivToString() true);

//}

///<summary>

/// 注册contextMenu方法脚本

///<summary>

// StringBuilder strChangeStyle = new StringBuilder();strChangeStyleAppend(

///<summary>

///添加StartUp脚本

///<summary>

Control tcDown = thisFindControl(tcDownID);

Control table = thisFindControl(tbID);

StringBuilder strInitScript = new StringBuilder();

strInitScriptAppend(<script text/javascript> );

strInitScriptAppend( var tbClientID + thisUniqueID + = + tableClientID + ; makeMenu + thisUniqueID + ( + thisUniqueID + ););

strInitScriptAppend( if( documentall&&windowprint ) );

strInitScriptAppend( { );

strInitScriptAppend( var objClientId = + tcDownClientID + ;);

strInitScriptAppend( var obj = documentgetElementById(objClientId););

strInitScriptAppend( documentonclick = hideCurrentMenu;);

strInitScriptAppend( } );

strInitScriptAppend(</script>);

if (!PageClientScriptIsStartupScriptRegistered(thisGetType() InitScript + thisUniqueID))

{

PageClientScriptRegisterStartupScript(thisGetType() InitScript + thisUniqueID

strInitScriptToString());

}

baseOnPreRender(e);

}

#endregion

}

}

单个菜单项类PopupMenuItem代码

/// <summary>

/// Author: 【金鹰】【专注于DotNet技术】【ChengKing(ZhengJian)】

/// Blog: Http:///ChengKing

/// </summary>

using System;

using SystemCollectionsGeneric;

using SystemComponentModel;

using SystemText;

using SystemWebUI;

namespace ToolButton

{

/// <summary>

/// 下拉菜单子项类

/// </summary>

[ToolboxItem(false)]

public class PopupMenuItem

{

private string _ImageName;

private string _Text;

private string _Command;

//private ItemType _Type;

public PopupMenuItem()

{ }

public PopupMenuItem(string _ImageName string Text string Command)

{

this_ImageName = _ImageName;

this_Text = Text;

this_Command = Command;

//this_Type = Type;

}

/// <summary>

/// 设置或获取命令图标路径

/// </summary>

public string ImageName

{

get

{

return _ImageName;

}

set

{

_ImageName = value;

}

}

/// <summary>

/// 设置或获取下拉子菜单项显示的文本

/// </summary>

public string Text

{

get { return _Text; }

set { _Text = value; }

}

/// <summary>

/// 设置或获取当点击下拉子菜单项时所调用的命令

/// </summary>

public string Command

{

get { return _Command; }

set { _Command = value; }

}

///// <summary>

///// 设置或获取子菜单项的类别(菜单项或分割符)

///// </summary>

//public ItemType Type

//{

// get { return _Type; }

// set { _Type = value; }

//}

}

}

菜单集合类PopupMenu代码

/// <summary>

/// Author: 【金鹰】【专注于DotNet技术】【ChengKing(ZhengJian)】

/// Blog: Http:///ChengKing

/// </summary>

using System;

using SystemCollections;

using SystemCollectionsGeneric;

using SystemComponentModel;

using SystemWebUI;

namespace ToolButton

{

/// <summary>

/// 菜单实现类[实用泛型集合]

/// </summary>

[

ToolboxItem(false)

ParseChildren(true)

]

public class PopupMenu : List<PopupMenuItem>

{

#region 定义构造函数

public PopupMenu()

: base()

{

}

#endregion

/// <summary>

/// 得到集合元素的个数

/// </summary>

public new int Count

{

get

{

return baseCount;

}

}

/// <summary>

/// 表示集合是否为只读

/// </summary>

public bool IsReadOnly

{

get

{

return false;

}

}

/// <summary>

/// 添加对象到集合

/// </summary>

/// <param name=item></param>

public new void Add(PopupMenuItem item)

{

baseAdd(item);

}

/// <summary>

/// 清空集合

/// </summary>

public new void Clear()

{

baseClear();

}

/// <summary>

/// 判断集合中是否包含元素

/// </summary>

/// <param name=item></param>

/// <returns></returns>

public new bool Contains(PopupMenuItem item)

{

return baseContains(item);

}

/// <summary>

/// 移除一个对象

/// </summary>

/// <param name=item></param>

/// <returns></returns>

public new bool Remove(PopupMenuItem item)

{

return baseRemove(item);

}

/// <summary>

/// 设置或取得下拉菜单索引项

/// </summary>

/// <param name=index></param>

/// <returns></returns>

public new PopupMenuItem this[int index]

{

get

{

return base[index];

}

set

{

base[index] = value;

}

}

}

}

（四） 示例代码下载

（五） 其它控件开发文章