C# のテキストボックスにプレースホルダーを追加する

Syed Hassan Sabeeh Kazmi 2023年10月12日
  1. C# でプレースホルダーテキストを使用してテキストボックスを作成する
  2. Visual Studio IDE の Enter および Leave フォーカスイベントを使用して、C# のテキストボックスにプレースホルダーテキストを追加する
  3. Visual Studio に Bunifu UI をインストールして、C# プロジェクトにプレースホルダー付きのテキストボックスを追加する
C# のテキストボックスにプレースホルダーを追加する

このチュートリアルでは、C# のテキストボックスにプレースホルダーを追加する 3つの方法を説明します。プレースホルダーはヒントとして扱う必要があるため、ラベルタイトルの代わりにはなりません。

C# でプレースホルダーテキストを使用してテキストボックスを作成する

プレースホルダーテキストが消えてユーザーがテキストを入力できるテキストボックスを作成すると、開発者は完全にカスタマイズできます。さらに、フォーム要素のプレースホルダーテキストのスタイルを設定できます。

通常、テキストボックスにはプレースホルダーが含まれています。フォーカスが移動すると、ユーザーがテキストを追加できるようにプレースホルダーが削除されます。テキストボックスがフォーカスを失い、ユーザーがテキストを入力しなかった場合、プレースホルダーがテキストボックスに追加されます。

次の C# コードは、プレースホルダーを含むテキストボックスを作成します。

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

Form1 ロードイベントには、PlaceholderTxtB テキストボックスを作成するためのコードを保持する InitializeComponent() メソッドが含まれています。Form1.cs で、テキストボックスの .GotFocus イベントと .LostFocus イベントを作成します。

PlaceholderTxtB テキストボックスがフォーカスを取得するたびに、プレースホルダーテキストは削除されます。ただし、テキストボックスがユーザーフォーカスを失い、空のままになると、プレースホルダーテキストが再表示されます。

Visual Studio IDE の Enter および Leave フォーカスイベントを使用して、C# のテキストボックスにプレースホルダーテキストを追加する

Visual Studio では、フォームの各コンポーネントがイベントを取得しました。テキストボックスの場合、C# プロジェクトのフォームの Properties の下に Focus イベントを見つけることができます。

Enter および Leave イベントを使用して、テキストボックスのプレースホルダーを作成します。

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

textBox1.Text = phd は、入力が空のときに表示されるプレースホルダーテキストであり、ユーザーはテキストボックスのフォーカスを失って可能な値を提案します。テキストボックスの Enter_Focus および Leave_Focus イベントは、コントロールにテキストがなく、フォーカスがない場合に表示されるプレースホルダーテキストを取得または設定します。

Visual Studio に Bunifu UI をインストールして、C# プロジェクトにプレースホルダー付きのテキストボックスを追加する

NuGet を使用すると、Bunifu UI を簡単にインストールしてアクティブ化できます。Visual Studio IDE では、NuGet を使用すると、アプリケーションをシームレスにインストール、アクティブ化、および展開するためのより高速で簡単な方法が提供されます。

NuGet パッケージマネージャーコンソールを介して Bunifu UI をインストールするには、次のコマンドを実行します。

Install-Package Bunifu.UI.WinForms

C# プロジェクトで、[ツール]に移動し、[NuGet パッケージマネージャー]にアクセスして[ソリューション用の NuGet パッケージの管理…]をクリックします。その後、[NuGet-ソリューション]タブが表示され、[参照]セクションに移動して、[Bunifu]を検索します。

検索結果に Bunifu.UI.WinForms パッケージが表示され、インストールできます。これを C# プロジェクトに追加すると、Toolbar タブにコントロールのリストが表示されます。

事前定義されたテキストプレースホルダーを備えたテキストボックスを提供します。C# Visual Studio プロジェクトのツールボックス内で BunifuTextBox を見つけて、フォームにドラッグします。

プロパティを変更してカスタマイズすると、プレースホルダーテキストを含むテキストボックスが作成されます。

このチュートリアルでは、テキストボックスのテキスト領域にプレースホルダーテキストを追加して、ユーザーにより明確なインターフェイスを提供する 3つの異なる方法を学習しました。ただし、テキストボックスにラベルを付けるものが他にない場合、プレースホルダーが表示されなくなると混乱する可能性があります。

幸い、このチュートリアルで取得するソリューションでは、ユーザーがテキストの入力を開始するまで、プレースホルダーテキストは残ります。インラインとしてのプレースホルダーは、テキストボックスに入力する情報を識別し、そのアクセスを制限します。

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

関連記事 - Csharp Textbox

関連記事 - Csharp GUI