介绍

首先我们设计这个控件的时候要明白控件是怎样交互的， 熟悉b站的小伙伴应该知道 ，我们上传视频的时候会去选择标签 ，我们输入标签文本 按下回车就代表该标签已经添加成功了，效果图如下！

控件拆分

我们首先拆分一下该控件， 整个控件可以看成是一个已选标签界面和一个文本输入界面。

已选标签界面里面是有很多小标签，一个一个组成的。

一：那么我们首先实现已选标签界面里面标签控件

标签控件我是继承的UserControl 然后再userControl界面添加一个label控件来模拟关闭按钮。

public partial class TagControl : BaseRadiusUserControl

 然后写  一个定义的关闭事件  

[Description("关闭事件"), Category("自定义")]public event EventHandler CloseClick;

     在label控件点击X去触发该关闭事件

private void close_Click(object sender, EventArgs e){CloseClick?.Invoke(this,e);}

然后写一个赋值的方法 当文本值大于2的时候去调整控件的大小。

public void SetText(string text){this.Content = text;if (text.Length > 1){this.Width = 60 + (text.Length - 1) * 20;}}

这样小标签控件就实现了！

二：然后我们去实现 标签的整体控件

     上半部分是一个已选标签控件， 下半部分是一个文本框。

      我们新建一个标签控件继承usercontrol

上半部分使用flowlaoutpanel控件， 下半部分使用文本框。

我们在文本框的KeyUp事件中添加小控件， 添加完成后清空文本框。

if (e.KeyCode == Keys.Enter){TagControl tagControl = new TagControl();tagControl.SetText(txtFlag.Text);tagControl.CloseClick += TagControl_CloseClick;flowTag.Controls.Add(tagControl);txtFlag.Text = "";}

我们在动态加载小标签控件的时候写上close关闭事件

private void TagControl_CloseClick(object sender, EventArgs e){TagControl tagControl = (TagControl)sender;flowTag.Controls.Remove(tagControl);}

实际效果

这样我们仿b站标签控件就实现成功了！

 如果觉得我的文章还不错，请点赞并给个关注，谢谢各位看官姥爷！