模板圆角控件

分享于 

4分钟阅读

Web开发

  繁體

介绍

发布了一个名为圆角角控件的令人兴奋的服务器控件,它可以动态创建图像,从而使HTML角看起来更。 由于图形初学者不容易创建图像,这样的想法非常酷。 但是,如果可以使它成为模板控件,使它的内容不限于文本,则这里控件将更有用。 为了将该控件转换为模板控件,本文解释如何增强该控件。

Sample screenshot

图像 上面 来自原始控件。 文本在中间显示。 将它转换为模板控件后,可以与数据绑定一起使用,如下图所示:

Sample screenshot

在demo页面中,我还展示了一些关于嵌套 DataList 和数据绑定的高级技巧。 请下载代码并与之一起播放。 单击这里单击 查看联机演示。

增强

感谢Scott分享他的源代码。 首先,你下载圆角控制。 然后下载代码 上面。 按照 below的指令合并代码。 有关如何编写模板服务器控件的参考信息,请在这里单击

  • 在命名空间 PrettyUI 中添加模板容器类。
//Change attribute in RoundedCorner.cs : [ParseChildren(true)]
publicclass ContentTemplateContainer : WebControl, INamingContainer
{
 public ContentTemplateContainer():base(){}
 private RoundedCorners _parent;
 public ContentTemplateContainer(RoundedCorners parent)
 {
 this._parent = parent;
 }
 public RoundedCorners Container
 {
 get{returnthis._parent;}
 }
}
  • 将下面的代码添加到文件 RoundedCorners.cs.
private ITemplate _contentTemplate = null;
[TemplateContainer(typeof(ContentTemplateContainer))]public ITemplate ContentTemplate
{
 get{returnthis._contentTemplate;}
 set{this._contentTemplate = value;}
}public ContentTemplateContainer _contentTemplateContainer;
  • 将方法 CreateChildControls 重命名为 private 函数 CreateControlTree 再次重写 CreateChildControls
protectedoverridevoid CreateChildControls()
{
 Controls.Clear();
 if(this.ContentTemplate!= null)
 {
 this._contentTemplateContainer = 
 new ContentTemplateContainer(this);
 this.ContentTemplate.InstantiateIn(this._contentTemplateContainer);
 this.Controls.Add(this._contentTemplateContainer);
 }
 this.ChildControlsCreated = true;
}
  • 修改方法 RenderDataBind,如下所示:
publicoverridevoid DataBind()
{
 base.OnDataBinding(System.EventArgs.Empty);
 this.CreateChildControls();
 this.ChildControlsCreated = true;
 base.DataBind ();
}
protectedoverridevoid Render(HtmlTextWriter writer)
{
 CreateControlTree();
 this.RenderContents(writer);
}
  • 接下来,我们必须重新设计方法 CreateControlTree。 在我们清除 Controls 集合之前,我们必须保存它。 下面的代码实现了这里目的。 把它放在现有代码的前面。
ArrayList arrList = new ArrayList();foreach(Control con inthis.Controls)
 arrList.Add(con);

接下来,用内容模板替换中间单元格。 将下面的代码添加到 CreateControlTree的末尾:

TableCell _midCell= box.Rows[1].Cells[1];if(this.ContentTemplate!= null)
{
 foreach( Control con in arrList)
 {
 _midCell.Controls.Add(con);
 }
}

演示

下载测试页 上面 并添加修改后的PrettyUI项目。 以下图片由测试页产生。 单击嵌套的DataList,该消息将显示 111,222和 333,根据你单击的链接。

要查看现场演示,请在这里单击

Sample screenshot


控制  TEMP  template  round  corner  
相关文章