WinForms开发基础：实现带X按钮的ClearableTextBox控件
前言
我们经常看到这样的带X按钮的输入框
如果使用WinForms开发中，该如何进行设计，普通的TextBox控件如何进行改造？为了提升用户体验，在TextBox文本框内添加一个“x”按钮，方便用户一键清除内容。本文将介绍如何通过继承TextBox控件实现自定义的ClearableTextBox。
功能需求
- 当文本框为空时，隐藏“x”按钮。
- 当文本框有输入内容时，显示“x”按钮。
- 点击“x”按钮时，清空文本框内容并隐藏按钮。
实现步骤
1. 创建ClearableTextBox控件
首先，在项目中添加一个新类ClearableTextBox，继承自TextBox。
using System;
using System.Drawing;
using System.Windows.Forms;public class ClearableTextBox : TextBox
{private Button clearButton;public ClearableTextBox(){InitializeClearButton();AttachEventHandlers();}private void InitializeClearButton(){clearButton = new Button{Text = "x",Font = new Font(FontFamily.GenericSansSerif, 8, FontStyle.Bold),Size = new Size(18, 18),FlatStyle = FlatStyle.Flat,Visible = false,Cursor = Cursors.Hand,Dock = DockStyle.Right};clearButton.FlatAppearance.BorderSize = 0;Controls.Add(clearButton);}private void AttachEventHandlers(){TextChanged += (s, e) => clearButton.Visible = !string.IsNullOrEmpty(Text);clearButton.Click += (s, e) => ClearText();}private void ClearText(){Text = string.Empty;clearButton.Visible = false;}protected override void OnResize(EventArgs e){base.OnResize(e);PositionClearButton();}private void PositionClearButton(){clearButton.Location = new Point(Width - clearButton.Width - 2, (Height - clearButton.Height) / 2);}
}
2. 关键逻辑解析
- 按钮显示与隐藏：通过
TextChanged事件，根据文本是否为空来控制按钮的可见性。 - 文本框内容清除：按钮点击时调用
ClearText()方法，清空文本并隐藏按钮。 - 按钮位置调整：重写
OnResize方法，确保在控件大小改变时，按钮始终位于右侧中央。
3. 在WinForms窗体中使用
编译之后，可以在工具箱中查看新的ClearableTextBox控件
在窗体设计器中拖拽一个ClearableTextBox控件，或通过代码添加：
public partial class Form1 : Form
{public Form1(){InitializeComponent();var textBox = new ClearableTextBox{Location = new Point(20, 20),Width = 200};Controls.Add(textBox);}
}
总结
通过继承TextBox并添加Button控件，我们实现了一个带“x”按钮的文本框，提升了用户操作的便捷性。此方法不仅简化了UI逻辑，还易于在项目中复用。