C#의 텍스트 상자에 자리 표시자 추가

Syed Hassan Sabeeh Kazmi 2023년10월12일
  1. C#에서 자리 표시자 텍스트가 있는 텍스트 상자 만들기
  2. Visual Studio IDE에서 EnterLeave 포커스 이벤트를 사용하여 C#의 텍스트 상자에 자리 표시자 텍스트 추가
  3. Visual Studio에 Bunifu UI를 설치하여 C# 프로젝트에서 자리 표시자가 있는 텍스트 상자 추가
C#의 텍스트 상자에 자리 표시자 추가

이 자습서에서는 C#에서 텍스트 상자에 자리 표시자를 추가하는 세 가지 방법을 설명합니다. 자리 표시자는 힌트로 취급되어야 하므로 labels 또는 title을 대체할 수 없습니다.

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에서 EnterLeave 포커스 이벤트를 사용하여 C#의 텍스트 상자에 자리 표시자 텍스트 추가

Visual Studio에서 양식의 각 구성 요소에는 이벤트가 있습니다. 텍스트 상자의 경우 C# 프로젝트 양식의 Properties에서 Focus 이벤트를 찾을 수 있습니다.

EnterLeave 이벤트를 사용하여 텍스트 상자에 대한 자리 표시자를 만듭니다.

// `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_FocusLeave_Focus 이벤트는 컨트롤에 텍스트가 없고 포커스가 없을 때 표시되는 자리 표시자 텍스트를 가져오거나 설정합니다.

Visual Studio에 Bunifu UI를 설치하여 C# 프로젝트에서 자리 표시자가 있는 텍스트 상자 추가

NuGet을 사용하여 Bunifu UI를 쉽게 설치하고 활성화하세요. Visual Studio IDE에서 NuGet은 애플리케이션을 원활하게 설치, 활성화 및 배포하는 더 빠르고 쉬운 방법을 제공합니다.

NuGet 패키지 관리자 콘솔을 통해 Bunifu UI를 설치하려면 다음을 실행하십시오.

Install-Package Bunifu.UI.WinForms

C# 프로젝트에서 Tools로 이동하고 Manage NuGet Packages for Solution...솔루션용 NuGet Package Manager를 클릭합니다. 그런 다음 NuGet - 솔루션 탭이 표시되고 찾아보기 섹션으로 이동하여 Bunifu를 검색합니다.

검색 결과에서 Bunifu.UI.WinForms 패키지를 찾아 설치할 수 있습니다. C# 프로젝트에 추가하면 Toolbar 탭에서 컨트롤 목록을 볼 수 있습니다.

미리 정의된 텍스트 자리 표시자가 있는 텍스트 상자를 제공합니다. C# Visual Studio 프로젝트의 Toolbox 내에서 BunifuTextBox를 찾아 양식으로 끌어다 놓습니다.

속성을 수정하여 사용자 지정하면 자리 표시자 텍스트가 있는 텍스트 상자가 생깁니다.

이 자습서에서는 사용자에게 보다 명확한 인터페이스를 제공하기 위해 텍스트 상자의 텍스트 영역에 자리 표시자 텍스트를 추가하는 세 가지 방법을 배웠습니다. 그러나 텍스트 상자에 레이블을 지정하는 다른 항목이 없는 경우 자리 표시자가 사라지면 혼란스러울 수 있습니다.

다행히도 이 튜토리얼에서 얻을 수 있는 솔루션을 사용하면 사용자가 텍스트 입력을 시작할 때까지 자리 표시자 텍스트가 유지됩니다. 인라인으로 자리 표시자는 텍스트 상자에 입력할 정보를 식별하여 접근성을 제한합니다.

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