（一） 概述
控件名稱 工具欄控件 分為主菜單和子菜單部分 涉及到公司代碼版權 目前版本不是最終版本 且去除了一些代碼 後面可下載的僅為純控件開發技術相關代碼 通過擴展可以任意定制需要的功能 裡面一些設計思想也具有參考價值
（二） 控件運行效果截圖
默認樣式和自定義樣式
項集合編輯器
(三)
代碼部分
主控件類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( );
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( );
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( + thisText + ));
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( );
}
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;
}
}
}
}
（四） 示例代碼下載
（五） 其它控件開發文章
From:http://tw.wingwit.com/Article/program/ASP/201311/21659.html
