Contrôle de balise comme stackoverflow

Question

Quelqu'un at-il connaissance d'un contrôle Winforms pour C# similaire au contrôle Tags utilisé par stackoverflow (voir ci-dessous)?

Sinon, quelles sont les bonnes alternatives que vous avez utilisées pour gérer les tags?

Answer 1

Eh bien après quelques minutes de jeu, j'ai une implémentation extrêmement simple. Il y a beaucoup plus de travail à faire dans ce domaine, mais vous pouvez voir la prémisse de base derrière une façon d'accomplir ce que vous recherchez.

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; 
    } 
} 

Comment ça marche:

place un Groupe d'étude sur le formulaire, appelez-le TagInputContainer (il tiendra tous les "tags"). Définissez la propriété Cursor du Panel sur IBeam pour que l'utilisateur sache qu'il peut le saisir. Lorsque l'utilisateur clique dans le TagInputContainer, créez une "balise" (TextBox), définissez sa propriété DockStyle sur Gauche de façon à ce qu'ils se dirigent toujours vers la gauche et que vous n'ayez pas à gérer manuellement la nouvelle balise Location foreach.

Ce que vous pouvez faire pour l'améliorer:

• Mesurer la chaîne de police afin que la largeur de TextBox augmente et diminue avec le texte.
• Implémentez la fonction de retour arrière où, si vous appuyez sur la touche retour arrière jusqu'à la dernière étiquette, cela activera l'édition de la balise et du retour arrière jusqu'à ce que vous arrêtiez.
• Dessiner un « x » sur les contrôles TextBox ou à côté d'eux afin que l'utilisateur peut cliquer pour les supprimer

• Manipulez le bouton espace bar de sorte que lorsque l'utilisateur appuie sur la barre d'espace, il va créer une nouvelle balise.

• Une autre chose que vous pouvez faire est lorsque l'utilisateur crée une nouvelle balise, définissez la balise précédente sur Enabled = false pour qu'il apparaisse comme si une balise réelle venait d'être créée. Pour cet effet, je crois qu'il serait préférable que vous n'ayez pas l'effet de boîte 3d par défaut sur les zones de texte, mais choisissez un aspect plus plat, tel que BorderStyle.FixedSingle ou BorderStyle.None.

Answer 2

Je suis tombé sur votre question il n'y a pas longtemps à la recherche de la même chose. Le plus proche que j'ai pu trouver était un article de CodeProject sur les nuages ​​de tags, alors j'ai fini par renoncer à trouver quelque chose de prêt à l'emploi et j'en ai fait un moi-même. J'ai fait un paquet Nuget et la source est disponible gratuitement sur GitHub.

Source (GitHub): https://github.com/nathanchere/FerretLib.WinForms

binaire (Nuget): https://www.nuget.org/packages/FerretLib.WinForms

PS: Je ne pense pas que cela devrait être considéré comme 'spam' car il était spécifiquement écrit pour répondre au même besoin que celui présenté dans cette question.