Ответ 1
После нескольких минут игры, у меня очень простая реализация. В этом гораздо больше работы, но вы можете видеть основную предпосылку для одного из способов достижения того, что вы после.
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 (она будет содержать все теги). Установите для свойства Cursor Panel значение IBeam, чтобы пользователь знал, что он может ввести его. Когда пользователь нажимает на TagInputContainer, создайте "тег" (TextBox), установите его свойство DockStyle влево, чтобы они всегда шли влево, и вам не нужно вручную обрабатывать местоположение для нового "тега".
Что вы можете сделать, чтобы улучшить его:
- Измените строку Font, чтобы ширина TextBox увеличивалась и сжималась с текстом.
- Внедрите функцию backspace, где, если вы нажмете backspace до последнего тега, он затем включит редактирование тега и backspace до тех пор, пока вы не остановитесь.
- Нарисуйте "x" в элементах управления TextBox или рядом с ними, чтобы пользователь мог щелкнуть, чтобы удалить их.
-
Обращайтесь к кнопке space, чтобы при нажатии на пробел пользователь создавал новый тег.
-
Еще одна вещь, которую вы можете сделать, - это когда пользователь создает новый тег, установите предыдущий тег на Enabled = false, чтобы он выглядел так, как будто только что был создан настоящий тег. Для этого эффекта я считаю, что это выглядело бы лучше, если бы у вас не было эффекта 3d-окна по умолчанию для текстовых полей, но выберите более плоский внешний вид, например BorderStyle.FixedSingle или BorderStyle.None.
