也算是自己刚毕业时候的作品吧，当时在一家创业公司工作，考虑给公司建立一个公司的控件库，于是也学习过一段时间的控件设计，当时领我入门的是《道不远人》那本控件开发书，觉得谭振宁写的还是相当不错的，推荐一下：）。那么就开始分享我设计的一些控件，并且告诉一些基本的设计思路。

具体实现了这些控件：

CheckTextBox: 可以对于输入TextBox的字符做出判断

HighSlideHyperLink: 点击HyperLink可以弹出相关Div层或者Img图象

ContextMenu: 上下文菜单特效

Menu: 菜单特效

EnablePageDataList: 具有分页功能的DataList

EnablePageRepeater: 具有分页功能的Repeater

GroupDropDownList: 具有分组选项功能的DropDownList

GroupListBox: 具有分组选项功能的ListBox

SearchCloud:Tag云图,可以根据关键词的搜索数量，进行排列

 1. CheckTextBox

效果图：

p_w_picpath

 

该控件继承自TextBox控件：

 

其中DefaultProperty将Text作为默认属性，代表着在属性窗口中自动被选中的是Text属性；ToolboxData代表你从工具箱拖动控件到设计页面时，会自动在代码中产生该字符串的代码。

 

控件的属性代码：

Description属性将在设计窗口属性中显示出描述：

p_w_picpath

通过AddAttributesToRender方法实现脚本的注册：

其中InputType包括几种方式以及一些事件发生的脚本：

 

调用服务器控件页面代码：

 

 

 

 

 

 

 

 

2. HighSlideHyperLink

效果图：

p_w_picpath

看到类的头部：

1[assembly: WebResource("Conovosoft.Web.UI.WebControls.highslide.css","text/css")]
2[assembly: WebResource("Conovosoft.Web.UI.WebControls.highslide.js","text/javascript")]
3[assembly: WebResource("Conovosoft.Web.UI.WebControls.highslide-html.js", "text/javascript")]

这里控件需要引用一些JS以及CSS的资源文件，highslide作为第三方的JS脚本，为了实现图片放大的效果。

在OnPreRender方法中注册脚本文件：

 

 

调用代码：

 

<cc1:HighSlideHyperLink NavigateUrl="p_w_picpaths/full.jpg" CssClass="highslide" ControlType="img" 
ID="HighSlideHyperLink2" runat="server"> 
<img border="0" src="p_w_picpaths/thumb.jpg" /> 
</cc1:HighSlideHyperLink>

 

 

3. EnablePageRepeater

效果图：

p_w_picpath

 

 
控件代码：

 

实现了带分页的Repeater控件。同理，也可以实现带分页的DataList。

 

4. GroupDropDownList

效果图：

p_w_picpathp_w_picpath

控件代码：

注意到RenderContents方法调用了OptionAndGroupRenderContents，通过该方法的逻辑实现Option以及OptionGroup的呈现。

调用代码：

<cc1:GroupDropDownList ID="GroupDropDownList1" runat="server"> 
</cc1:GroupDropDownList> 

后台绑定数据代码：

同样GroupListBox实现代码和GroupDropDownList.cs类似。

p_w_picpath

 

5. SearchCloud标签云

效果图：

p_w_picpath

控件代码：

调用代码：

<cc1:SearchCloud ID="SearchCloud1" runat="server" />

后台绑定数据代码：

这样就实现了类似博客系统中的标签云。

 

最后附上我的源代码：WebControl.UI.rar，希望能够给大家带来些ASP.NET服务器控件开发上的帮助！