Agregar marcador de posición a un cuadro de texto en C#

Syed Hassan Sabeeh Kazmi 12 octubre 2023
  1. Crear un cuadro de texto con texto de marcador de posición en C#
  2. Use los eventos de enfoque Enter y Leave en Visual Studio IDE para agregar texto de marcador de posición a un cuadro de texto en C#
  3. Instale Bunifu UI en Visual Studio para agregar el cuadro de texto con un marcador de posición en proyectos de C#
Agregar marcador de posición a un cuadro de texto en C#

Este tutorial enseñará los tres métodos para agregar un marcador de posición a un cuadro de texto en C#. Como los marcadores de posición deben tratarse como una pista, no sustituyen a las etiquetas o al título.

Crear un cuadro de texto con texto de marcador de posición en C#

La creación de un cuadro de texto con un texto de marcador de posición que desaparece y permite a los usuarios ingresar su texto brinda libertad de personalización completa a los desarrolladores. Además, le permite diseñar el texto del marcador de posición de un elemento de formulario.

Generalmente, un cuadro de texto contiene un marcador de posición; cuando se enfoca, el marcador de posición se elimina para que el usuario agregue texto. Si el cuadro de texto pierde el foco y el usuario no ha ingresado ningún texto, el marcador de posición se vuelve a agregar al cuadro de texto.

El siguiente código C# creará un cuadro de texto con un marcador de posición.

Form1.Diseñador.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;
      }
    }
  }
}

El evento de carga Form1 contiene el método InitializeComponent() que contiene el código para crear el cuadro de texto PlaceholderTxtB. En Form1.cs, cree los eventos .GotFocus y .LostFocus de un cuadro de texto.

Cada vez que el cuadro de texto PlaceholderTxtB obtenga el foco, se eliminará el texto del marcador de posición. Sin embargo, cuando el cuadro de texto pierde el foco del usuario y permanece vacío, volverá a aparecer el texto del marcador de posición.

Use los eventos de enfoque Enter y Leave en Visual Studio IDE para agregar texto de marcador de posición a un cuadro de texto en C#

En Visual Studio, cada componente de un formulario tiene eventos. En el caso de un cuadro de texto, puede encontrar eventos Focus en Properties de tus formularios del proyecto C#.

Utilice los eventos Enter y Leave para crear un marcador de posición para tu caja de texto.

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

El textBox1.Text = phd es un texto de marcador de posición que se muestra cuando la entrada está vacía y el usuario pierde el foco de un cuadro de texto para sugerir un posible valor. Los eventos Enter_Focus y Leave_Focus de un cuadro de texto obtienen o establecen el texto de marcador de posición que se muestra cuando el control no tiene texto y no tiene el foco.

Instale Bunifu UI en Visual Studio para agregar el cuadro de texto con un marcador de posición en proyectos de C#

Use NuGet para instalar y activar fácilmente Bunifu UI. En Visual Studio IDE, NuGet ofrece una forma más rápida y sencilla de instalar, activar e implementar sus aplicaciones sin problemas.

Para instalar Bunifu UI a través de NuGet Package Manager Console, ejecute:

Install-Package Bunifu.UI.WinForms

En su proyecto de C#, vaya a Herramientas y haga clic en Manage NuGet Packages for Solution... accediendo al NuGet Package Manager. Luego, verá la pestaña NuGet - Solución, navegue por su sección Browse y busca Bunifu.

Encontrará el paquete Bunifu.UI.WinForms en los resultados de búsqueda y podrá instalarlo. Agréguelo a su proyecto C# para ver su lista de controles en la pestaña Barra de herramientas.

Ofrece un cuadro de texto con marcadores de posición de texto predefinidos. Localice BunifuTextBox dentro de la Caja de herramientas de su proyecto C# Visual Studio y arrástrelo a su formulario.

Personalícelo modificando sus propiedades y tendrá un cuadro de texto con un texto de marcador de posición.

En este tutorial, ha aprendido los tres métodos diferentes para agregar texto de marcador de posición en el área de texto de un cuadro de texto para proporcionar una interfaz más clara para los usuarios. Sin embargo, los marcadores de posición que desaparecen pueden confundirlo si no hay nada más que etiquete sus cuadros de texto.

Afortunadamente, con las soluciones que obtendrá en este tutorial, el texto del marcador de posición permanece hasta que el usuario comienza a ingresar texto. Los marcadores de posición en línea identifican qué información ingresar en un cuadro de texto, lo que limita su accesibilidad.

Syed Hassan Sabeeh Kazmi avatar Syed Hassan Sabeeh Kazmi avatar

Hassan is a Software Engineer with a well-developed set of programming skills. He uses his knowledge and writing capabilities to produce interesting-to-read technical articles.

GitHub

Artículo relacionado - Csharp Textbox

Artículo relacionado - Csharp GUI