InputBox 输入框控件
控件名称
InputBox
中文名称
输入框控件

相关控件:


控件优点
InputBox 是一个功能丰富的输入框控件,支持前缀后缀图标、占位符、清除按钮、圆角边框等功能。适用于表单输入、搜索框、数据录入等场景。
主要特性
- 前缀后缀:支持文本和图标前缀后缀
- 占位符:支持占位符文本显示
- 清除按钮:支持显示清除按钮
- 圆角边框:支持自定义圆角半径
- 边框状态:支持悬停和聚焦状态边框颜色
- 数据绑定:实现 INotifyPropertyChanged 接口
重要参数说明
基本属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
Text |
string | "" | 输入文本 |
Placeholder |
string | "" | 占位符文本 |
PlaceholderColor |
Color | Gray | 占位符颜色 |
AllowClear |
bool | false | 是否允许清除 |
MaxLength |
int | 0 | 最大输入字符数(0表示无限制) |
前缀属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
PrefixText |
string | "" | 前缀文本 |
PrefixColor |
Color | Gray | 前缀颜色 |
PrefixIconSvg |
string | "" | 前缀图标SVG |
PrefixIconColor |
Color | Gray | 前缀图标颜色 |
PrefixIconSize |
int | 16 | 前缀图标大小 |
后缀属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
SuffixText |
string | "" | 后缀文本 |
SuffixColor |
Color | Gray | 后缀颜色 |
SuffixIconSvg |
string | "" | 后缀图标SVG |
SuffixIconColor |
Color | Gray | 后缀图标颜色 |
SuffixIconSize |
int | 16 | 后缀图标大小 |
边框属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
BorderColor |
Color | 200, 200, 200 | 边框颜色 |
HoverBorderColor |
Color | 64, 158, 255 | 悬停边框颜色 |
FocusBorderColor |
Color | 64, 158, 255 | 聚焦边框颜色 |
BorderWidth |
int | 1 | 边框宽度 |
BorderStyle |
InputBorderStyle | Full | 边框样式 |
CornerRadius |
int | 4 | 圆角半径 |
边框样式枚举 (InputBorderStyle)
| 枚举值 | 说明 | 预览 |
|---|---|---|
None |
无边框 | 无边框线 |
BottomOnly |
只有底部边框 | 只有底部一条线 |
Full |
全边框(默认) | 四边都有边框 |
外观属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
FillColor |
Color | White | 填充颜色 |
TextAlign |
HorizontalAlignment | Left | 文本对齐方式 |
Padding |
Padding | 2 | 内边距 |
InnerPadding |
Padding | 8, 4, 8, 4 | 内部内边距 |
Spacing |
int | 4 | 间距 |
主题支持
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
FollowGlobalTheme |
bool | true | 是否跟随全局主题变化 |
主题颜色说明:
| 元素 | 亮色模式 | 暗色模式 |
|---|---|---|
| 填充颜色 | 白色 | 深灰 (45,45,48) |
| 边框颜色 | 浅灰 (217,217,217) | 深灰 (80,80,80) |
| 悬停边框 | 蓝色 (64,158,255) | 蓝色 |
| 聚焦边框 | 蓝色 (64,158,255) | 蓝色 |
| 文字颜色 | 深灰 | 浅灰 |
| 前缀/后缀颜色 | 中灰 | 浅灰 |
| 前缀/后缀图标颜色 | 中灰 | 浅灰 |
| 占位符颜色 | 浅灰 | 深灰 (80,80,80) |
重要事件
| 事件名 | 说明 |
|---|---|
TextChanged |
文本改变时触发 |
PrefixClick |
点击前缀时触发 |
SuffixClick |
点击后缀时触发 |
ClearClick |
点击清除按钮时触发 |
InnerKeyPress |
键盘按键按下并释放时触发 |
InnerKeyDown |
键盘按键按下时触发 |
InnerKeyUp |
键盘按键释放时触发 |
PropertyChanged |
属性值改变时触发 |
⚠️ 键盘事件注意事项
InputBox 内部使用 TextBox 控件处理输入,因此标准 KeyPress/KeyDown/KeyUp 事件不会触发。请使用以下事件:
// ✅ 正确:使用 InnerKeyPress
inputBox.InnerKeyPress += (sender, e) =>
{
if (e.KeyChar == (char)Keys.Enter)
{
Console.WriteLine("按下了回车键");
}
};
// ✅ 正确:使用 InnerKeyDown
inputBox.InnerKeyDown += (sender, e) =>
{
if (e.KeyCode == Keys.Enter)
{
Console.WriteLine("按下了回车键");
}
};
// ❌ 错误:标准 KeyPress 不会触发
inputBox.KeyPress += ... // 不会执行
使用示例
基本使用
// 创建输入框
InputBox inputBox = new InputBox();
inputBox.Size = new Size(200, 32);
inputBox.Placeholder = "请输入内容";
this.Controls.Add(inputBox);
// 文本改变事件
inputBox.TextChanged += (sender, e) =>
{
Console.WriteLine($"输入内容:{inputBox.Text}");
};
前缀后缀
// 带前缀图标
inputBox1.PrefixIconSvg = "user";
inputBox1.PrefixIconColor = Color.Gray;
inputBox1.Placeholder = "用户名";
// 带后缀文本
inputBox2.SuffixText = "@qq.com";
inputBox2.SuffixColor = Color.Gray;
// 带后缀图标
inputBox3.SuffixIconSvg = "search";
inputBox3.SuffixIconColor = Color.Blue;
清除按钮
// 启用清除按钮
inputBox.AllowClear = true;
// 清除事件
inputBox.ClearClick += (sender, e) =>
{
Console.WriteLine("内容已清除");
};
圆角边框
// 设置圆角
inputBox.CornerRadius = 8;
// 直角
inputBox.CornerRadius = 0;
边框颜色
// 设置边框颜色
inputBox.BorderColor = Color.Gray;
inputBox.HoverBorderColor = Color.Blue;
inputBox.FocusBorderColor = Color.DarkBlue;
inputBox.BorderWidth = 2;
搜索框示例
// 创建搜索框
InputBox searchBox = new InputBox();
searchBox.Size = new Size(300, 36);
searchBox.Placeholder = "请输入搜索关键词";
searchBox.PrefixIconSvg = "search";
searchBox.PrefixIconColor = Color.Gray;
searchBox.AllowClear = true;
searchBox.CornerRadius = 18; // 圆角搜索框
// 搜索事件
searchBox.SuffixClick += (sender, e) =>
{
Console.WriteLine($"搜索:{searchBox.Text}");
};
数据绑定
// 属性改变事件
inputBox.PropertyChanged += (sender, e) =>
{
if (e.PropertyName == nameof(InputBox.Text))
{
Console.WriteLine($"文本已更改:{inputBox.Text}");
}
};
// 绑定到数据源
inputBox.DataBindings.Add("Text", dataSource, "UserName");
注意事项
- 前缀后缀:可以同时设置文本和图标,图标会优先显示
- 清除按钮:AllowClear 为 true 时,输入框有内容时会显示清除按钮
- 圆角半径:CornerRadius 为 0 时为直角
- 边框状态:悬停和聚焦时会自动切换边框颜色
- 键盘事件:必须使用
InnerKeyPress、InnerKeyDown、InnerKeyUp代替标准键盘事件 - 前缀后缀点击:点击前缀或后缀图标/文本时,对应的事件会触发