自定义控件c#winform自定义控件实现标签控件

Posted 2022-03-19 dotNET跨平台

介绍

首先我们设计这个控件的时候要明白控件是怎样交互的， 熟悉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站标签控件就实现成功了！

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