像 stackoverflow 一样的标签控制

Question

有人知道 c# 的 Winforms 控件类似于 stackoverflow 使用的标签控件（见下文）吗？

如果没有，您用来处理标签的一些好的替代方法是什么？

Answer 1

不久前我遇到了你的问题，正在寻找同样的东西。我能找到的最接近的是关于标签云的 CodeProject 文章，所以最终我放弃了寻找开箱即用的东西并自己制作了一个。我用它制作了一个 Nuget 包，源代码在 GitHub 上免费提供。

来源（GitHub）：https://github.com/nathanchere/FerretLib.WinForms

二进制（Nuget）：https://www.nuget.org/packages/FerretLib.WinForms

PS：我认为这不应被视为“垃圾邮件”，因为它是专门为解决与此问题中提出的相同需求而编写的。

Answer 2

在玩了几分钟之后，我有了一个非常简单的实现。在这方面还有很多工作要做，但您可以看到实现您所追求的一种方法背后的基本前提。

Form1.cs：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace TagInput
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void TagInputContainer_Click(object sender, EventArgs e)
        {
            TextBox box = new TextBox()
            {
                Width = 100,
                Height = 30,
                Font = new Font("Segoe UI Light", 12),
                BorderStyle = BorderStyle.None,
                BackColor = Color.Khaki,
                Location = new Point(0,0),
                Dock = DockStyle.Left,
                Margin = new Padding(2, 0, 0, 0)
            };

            TagInputContainer.Controls.Add(box);
        }
    }
}

Form1.Designer.cs：

namespace TagInput
{
    partial class Form1
    {
        /// <summary>
        /// Required designer variable.
        /// </summary>
        private System.ComponentModel.IContainer components = null;

        /// <summary>
        /// Clean up any resources being used.
        /// </summary>
        /// <param name="disposing">true if managed resources should be disposed; otherwise, false.</param>
        protected override void Dispose(bool disposing)
        {
            if (disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows Form Designer generated code

        /// <summary>
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        /// </summary>
        private void InitializeComponent()
        {
            this.TagInputContainer = new System.Windows.Forms.Panel();
            this.SuspendLayout();
            // 
            // TagInputContainer
            // 
            this.TagInputContainer.Cursor = System.Windows.Forms.Cursors.IBeam;
            this.TagInputContainer.Location = new System.Drawing.Point(157, 161);
            this.TagInputContainer.Name = "TagInputContainer";
            this.TagInputContainer.Size = new System.Drawing.Size(406, 30);
            this.TagInputContainer.TabIndex = 0;
            this.TagInputContainer.Click += new System.EventHandler(this.TagInputContainer_Click);
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(664, 395);
            this.Controls.Add(this.TagInputContainer);
            this.Name = "Form1";
            this.Text = "Form1";
            this.ResumeLayout(false);

        }

        #endregion

        private System.Windows.Forms.Panel TagInputContainer;
    }
}

它是如何工作的：

在表单上放置一个面板，将其命名为 TagInputContainer（它将包含所有“标签”）。将 Panel 的 Cursor 属性设置为IBeam，以便用户知道他们可以输入它。当用户在 TagInputContainer 中单击时，创建一个“标签”（TextBox），将其 DockStyle 属性设置为 Left，以便它们始终向左移动，这样您就不必为每个新的“标签”手动处理 Location。

你可以做些什么来改进它：

• 测量字体字符串，使文本框的宽度随文本增大和缩小。
• 实现退格功能，如果您按退格键直到最后一个标签，它将启用对标签和退格键的编辑，直到您停止。
• 在 TextBox 控件上或旁边画一个“x”，以便用户可以点击删除它们

• 处理空格栏按钮，这样当用户按下空格键时，它将创建一个新标签。

1234563对于这种效果，我相信如果您没有在文本框上使用默认的系统 3d 框效果，而是选择更扁平的外观，例如 BorderStyle.FixedSingle 或 BorderStyle.None，它会更好看。