C# のテキストボックスにプレースホルダーを追加する
-
C#
でプレースホルダーテキストを使用してテキストボックスを作成する -
Visual Studio IDE の
Enter
およびLeave
フォーカスイベントを使用して、C#
のテキストボックスにプレースホルダーテキストを追加する -
Visual Studio に
Bunifu UI
をインストールして、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つの異なる方法を学習しました。ただし、テキストボックスにラベルを付けるものが他にない場合、プレースホルダーが表示されなくなると混乱する可能性があります。
幸い、このチュートリアルで取得するソリューションでは、ユーザーがテキストの入力を開始するまで、プレースホルダーテキストは残ります。インラインとしてのプレースホルダーは、テキストボックスに入力する情報を識別し、そのアクセスを制限します。
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