Ajouter un espace réservé à une zone de texte en C#

1. Créer une zone de texte avec un texte d’espace réservé en C#
2. Utilisez les événements de focus Enter et Leave dans Visual Studio IDE pour ajouter du texte d’espace réservé à une zone de texte en C#
3. Installez Bunifu UI dans Visual Studio pour ajouter la zone de texte avec un espace réservé dans les projets C#

Ce didacticiel vous apprendra les trois méthodes pour ajouter un espace réservé à une zone de texte en C#. Comme les espaces réservés doivent être traités comme un indice, ils ne remplacent pas les labels ou le title.

Créer une zone de texte avec un texte d’espace réservé en C#

La création d’une zone de texte avec un texte d’espace réservé qui disparaît et permet aux utilisateurs de saisir leur texte donne aux développeurs une liberté de personnalisation complète. De plus, il vous permet de styliser le texte de l’espace réservé d’un élément de formulaire.

Généralement, une zone de texte contient un espace réservé ; lorsqu’il est ciblé, l’espace réservé est supprimé pour que l’utilisateur puisse ajouter du texte. Si la zone de texte perd le focus et que l’utilisateur n’a saisi aucun texte, l’espace réservé est rajouté à la zone de texte.

Le code C# suivant créera une zone de texte avec un espace réservé.

Form1.Designer.cs :

// `Form1` as your C# project form
// `Form1.Designer.cs` Code to create a `PlaceholderTxtB` textbox

namespace TextboxPlaceholder {
  partial class Form1 {
    private System.ComponentModel.IContainer components = null;

    protected override void Dispose(bool disposing) {
      if (disposing && (components != null)) {
        components.Dispose();
      }
      base.Dispose(disposing);
    }

#region Windows Form Designer generated code

    private void InitializeComponent() {
      this.PlaceholderTxtB = new System.Windows.Forms.TextBox();
      this.button1 = new System.Windows.Forms.Button();
      this.SuspendLayout();
      //
      // PlaceholderTxtB
      //
      this.PlaceholderTxtB.Location = new System.Drawing.Point(12, 12);
      this.PlaceholderTxtB.Name = "PlaceholderTxtB";
      this.PlaceholderTxtB.Size = new System.Drawing.Size(188, 20);
      this.PlaceholderTxtB.TabIndex = 0;
      //
      // Create a `button1` button to lose focus from the `PlaceholderTxtB` textbox
      //
      this.button1.Location = new System.Drawing.Point(57, 39);
      this.button1.Name = "button1";
      this.button1.Size = new System.Drawing.Size(75, 23);
      this.button1.TabIndex = 1;
      this.button1.Text = "Focus";
      this.button1.UseVisualStyleBackColor = true;
      //
      // Form1
      //
      this.ClientSize = new System.Drawing.Size(284, 261);
      this.Controls.Add(this.button1);
      this.Controls.Add(this.PlaceholderTxtB);
      this.Name = "Form1";
      this.ResumeLayout(false);
      this.PerformLayout();
    }

#endregion

    private System.Windows.Forms.TextBox PlaceholderTxtB;
    private System.Windows.Forms.Button button1;
  }
}

Form1.cs :

// `Form1.cs` code to add a placeholder text to `PlaceholderTxtB` textbox

using System;
using System.Drawing;
using System.Windows.Forms;

namespace TextboxPlaceholder {

  public partial class Form1 : Form {
    string ph = "Type your user name here...";

    public Form1() {
      InitializeComponent();
      PlaceholderTxtB.GotFocus += RemoveText;
      PlaceholderTxtB.LostFocus += AddText;
    }

    private void Form1_Load(object sender, EventArgs e) {}
    public void RemoveText(object sender, EventArgs e) {
      if (PlaceholderTxtB.Text == ph)
        PlaceholderTxtB.Text = "";
    }
    public void AddText(object sender, EventArgs e) {
      if (String.IsNullOrWhiteSpace(PlaceholderTxtB.Text)) {
        PlaceholderTxtB.ForeColor = Color.Gray;
        PlaceholderTxtB.Text = ph;
      }
    }
  }
}

L’événement de chargement Form1 contient la méthode InitializeComponent() qui contient le code pour créer la zone de texte PlaceholderTxtB. Dans Form1.cs, créez un événement .GotFocus et .LostFocus d’une zone de texte.

Chaque fois que la zone de texte PlaceholderTxtB obtient le focus, le texte de l’espace réservé sera supprimé. Cependant, lorsque la zone de texte perd le focus de l’utilisateur et reste vide, le texte de l’espace réservé réapparaît.

Utilisez les événements de focus Enter et Leave dans Visual Studio IDE pour ajouter du texte d’espace réservé à une zone de texte en C#

Dans Visual Studio, chaque composant d’un formulaire a des événements. Dans le cas d’une zone de texte, vous pouvez trouver des événements Focus sous Properties des formulaires de votre projet C#.

Utilisez les événements Enter et Leave pour créer un espace réservé pour votre zone de texte.

// `Form1.cs` code for `Enter Focus` and `Leave Focus` events to add a placeholder text to a
// `textBox1` textbox

string phd = "Password@123";

private void Enter_Focus(object sender, EventArgs e) {
  // textBox1.ForeColor = Color.Gray;
  if (textBox1.Text == phd)
    textBox1.Text = "";
}

private void Leave_Focus(object sender, EventArgs e) {
  textBox1.ForeColor = Color.Gray;
  if (textBox1.Text == "")
    textBox1.Text = phd;
}

Le textBox1.Text = phd est un texte d’espace réservé affiché lorsque l’entrée est vide et que l’utilisateur perd le focus d’une zone de texte pour suggérer une valeur possible. Les événements Enter_Focus et Leave_Focus d’une zone de texte obtiennent ou définissent le texte d’espace réservé affiché lorsque le contrôle n’a pas de texte et n’a pas le focus.

Installez Bunifu UI dans Visual Studio pour ajouter la zone de texte avec un espace réservé dans les projets C#

Utilisez NuGet pour installer et activer facilement Bunifu UI. Dans Visual Studio IDE, NuGet offre un moyen plus rapide et plus facile d’installer, d’activer et de déployer vos applications de manière transparente.

Pour installer Bunifu UI via NuGet Package Manager Console, exécutez :

Install-Package Bunifu.UI.WinForms

Dans votre projet C#, allez dans Tools et cliquez sur Manage NuGet Packages for Solution... en accédant à NuGet Package Manager. Ensuite, vous verrez l’onglet NuGet - Solution, naviguez dans sa section Browse et recherchez Bunifu.

Vous trouverez le package Bunifu.UI.WinForms dans les résultats de recherche et pourrez l’installer. Ajoutez-le à votre projet C# pour voir sa liste de contrôles dans l’onglet Toolbar.

Il propose une zone de texte avec des espaces réservés de texte prédéfinis. Localisez BunifuTextBox dans la Toolbox de votre projet C# Visual Studio et faites-le glisser sur votre formulaire.

Personnalisez-le en modifiant ses propriétés, et vous aurez une zone de texte avec un texte d’espace réservé.

Dans ce didacticiel, vous avez appris les trois méthodes différentes pour ajouter du texte d’espace réservé dans la zone de texte d’une zone de texte afin de fournir une interface plus claire aux utilisateurs. Cependant, les espaces réservés qui disparaissent peuvent vous dérouter s’il n’y a rien d’autre pour étiqueter vos zones de texte.

Heureusement, avec les solutions que vous obtiendrez dans ce didacticiel, le texte de l’espace réservé reste jusqu’à ce que l’utilisateur commence à saisir du texte. Les espaces réservés en ligne identifient les informations à saisir dans une zone de texte, limitant son accessibilité.