当前位置：首页 > news >正文

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用

news 来源：原创 2025/6/2 7:03:32

在这里插入图片描述

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用

一、前言
二、Button 控件基础
- 2.1 Button 的基本定义与显示
- 2.2 按钮样式设置
- 2.3 按钮大小与布局
三、Button 的交互功能
- 3.1 点击事件处理
- 3.2 鼠标悬停与离开效果
- 3.3 按钮禁用与启用
四、TextBox 控件基础
- 4.1 TextBox 的基本定义与显示
- 4.2 文本框属性设置
五、TextBox 的交互功能
- 5.1 文本输入事件处理
- 5.2 文本框内容获取与设置
六、Button 与 TextBox 的组合应用
- 6.1 简单的登录界面示例
- 6.2 数据计算应用
七、Button 和 TextBox 的高级特性
- 7.1 Button 的模板定制
- 7.2 TextBox 的输入验证
结束语
优质源码分享

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用 ，在当今的软件开发领域，创建直观、易用且美观的用户界面至关重要。WPF 凭借其强大的功能和丰富的可视化设计工具，成为了开发 Windows 桌面应用程序的首选框架之一。其中，Button（按钮）和 TextBox（文本框）等控件是构建用户交互界面的基础元素，熟练掌握它们的应用是开发高效、优质 WPF 应用程序的关键。

一、前言

在数字浪潮汹涌澎湃的时代，程序开发宛如一座神秘而宏伟的魔法城堡，矗立在科技的浩瀚星空中。代码的字符，似那闪烁的星辰，按照特定的轨迹与节奏，组合、交织、碰撞，即将开启一场奇妙且充满无限可能的创造之旅。当空白的文档界面如同深邃的宇宙等待探索，程序员们则化身无畏的星辰开拓者，指尖在键盘上轻舞，准备用智慧与逻辑编织出足以改变世界运行规则的程序画卷，在 0 和 1 的二进制世界里，镌刻下属于人类创新与突破的不朽印记。

在当今数字化时代，桌面应用程序的用户界面（UI）设计至关重要，它直接影响着用户体验与产品的竞争力。而 WPF（Windows Presentation Foundation）作为微软推出的一款强大的 UI 框架，其布局系统更是构建精美界面的核心要素。WPF 布局系统为开发者提供了丰富多样的布局方式，能够轻松应对各种复杂的界面设计需求，无论是简洁明了的工具软件，还是功能繁杂的企业级应用，都能借助其打造出令人惊艳的视觉效果与流畅的交互体验。

在 WPF 的布局体系中，Grid 和 StackPanel 堪称两颗耀眼的明星，它们各自拥有独特的布局特性，适用于截然不同的场景，为开发者提供了灵活多变的布局选择。Grid 以其类似表格的网格结构，能够精准地对界面进行行列划分，轻松实现复杂的布局架构，无论是多模块的信息展示，还是不同区域的精细排版，Grid 都能游刃有余地应对；而 StackPanel 则专注于简单高效的线性排列，将子元素按照水平或垂直方向依次堆叠，适用于那些需要快速搭建、布局逻辑相对单一的界面部分，如导航栏、按钮组等。深入理解并熟练掌握这两种布局控件，对于打造优质的 WPF 应用界面而言，无疑是迈出了坚实且关键的一步。接下来，让我们一同深入探究它们的奥秘。

WPF从入门到精通专栏，旨在为读者呈现一条从对 WPF（Windows Presentation Foundation）技术懵懂无知到精通掌握的学习路径。首先从基础入手，介绍 WPF 的核心概念，涵盖其独特的架构特点、开发环境搭建流程，详细解读布局系统、常用控件以及事件机制等基础知识，帮助初学者搭建起对 WPF 整体的初步认知框架。随着学习的深入，进阶部分聚焦于数据绑定、样式模板、动画特效等关键知识点，进一步拓展 WPF 开发的能力边界，使开发者能够打造出更为个性化、交互性强的桌面应用界面。高级阶段则涉及自定义控件开发、MVVM 设计模式应用、多线程编程等深层次内容，助力开发者应对复杂的业务需求，构建大型且可维护的应用架构。同时，通过实战项目案例解析，展示如何将所学知识综合运用到实际开发中，从需求分析到功能实现再到优化测试，全方位积累实践经验。此外，还探讨了性能优化、与其他技术集成以及安全机制等拓展性话题，让读者对 WPF 技术在不同维度有更深入理解，最终实现对 WPF 技术的精通掌握，具备独立开发高质量桌面应用的能力。

🛕 点击进入WPF从入门到精通专栏

在这里插入图片描述

二、Button 控件基础

2.1 Button 的基本定义与显示

在 XAML（可扩展应用程序标记语言）中，定义一个 Button 非常简单。如下代码创建了一个基本的 Button：

<Button Content="点击我"/>

上述代码中，Content 属性用于设置按钮上显示的文本。当运行应用程序时，会看到一个带有 “点击我” 文本的按钮。

2.2 按钮样式设置

背景与前景色
可以通过Background和Foreground属性来设置按钮的背景色和前景色（文本颜色）。例如：

<Button Content="彩色按钮" Background="Blue" Foreground="White"/>

这将创建一个蓝色背景、白色文本的按钮。

边框样式
通过BorderBrush和BorderThickness属性来设置按钮的边框颜色和粗细。例如：

<Button Content="带边框按钮" BorderBrush="Red" BorderThickness="2"/>

此按钮将有一个红色、粗细为 2 像素的边框。

2.3 按钮大小与布局

固定大小
可以使用Width和Height属性来指定按钮的大小。例如：

<Button Content="固定大小按钮" Width="100" Height="50"/>

这将创建一个宽度为 100 像素，高度为 50 像素的按钮。

自适应大小
若希望按钮根据其内容自适应大小，可以不设置Width和Height属性，让按钮自动调整尺寸以适应文本内容。例如：

<Button Content="自适应大小按钮"/>

三、Button 的交互功能

3.1 点击事件处理

按钮最常见的交互就是点击操作。在 XAML 中，可以通过Click属性来绑定一个事件处理方法。例如：

<Button Content="点击触发事件" Click="Button_Click"/>

在代码背后（Code - behind）的文件中，需要定义Button_Click方法：

private void Button_Click(object sender, RoutedEventArgs e)
{MessageBox.Show("按钮被点击了！");
}

当用户点击按钮时，将弹出一个消息框显示 “按钮被点击了！”。

3.2 鼠标悬停与离开效果

使用样式触发器
可以通过样式触发器（Style Triggers）来实现鼠标悬停和离开时的效果。例如，当鼠标悬停在按钮上时改变按钮的背景色：

<Button Content="悬停效果按钮"><Button.Style><Style TargetType="Button"><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="Yellow"/></Trigger></Style.Triggers></Style></Button.Style>
</Button>

当鼠标悬停在按钮上时，按钮背景将变为黄色，鼠标离开后恢复原状。

3.3 按钮禁用与启用

可以通过设置按钮的IsEnabled属性来控制按钮是否可用。例如，在代码背后的文件中根据某个条件禁用按钮：

private void SomeMethod()
{bool condition = false;myButton.IsEnabled = condition;
}

如果condition为false，则myButton按钮将被禁用，无法点击。

四、TextBox 控件基础

4.1 TextBox 的基本定义与显示

在 XAML 中定义一个基本的 TextBox 如下：

<TextBox/>

这将创建一个空白的文本框，用户可以在其中输入文本。

4.2 文本框属性设置

初始文本
可以通过Text属性设置文本框的初始显示文本。例如：

<TextBox Text="请输入内容"/>

文本框宽度与高度
与 Button 类似，可以使用Width和Height属性来设置文本框的大小。例如：

<TextBox Text="固定大小文本框" Width="200" Height="50"/>

文本对齐方式
通过TextAlignment属性可以设置文本在文本框中的对齐方式，如左对齐、居中对齐、右对齐等。例如：

<TextBox Text="居中对齐文本" TextAlignment="Center"/>

五、TextBox 的交互功能

5.1 文本输入事件处理

TextChanged 事件
当文本框中的文本发生改变时，可以通过TextChanged事件来捕获并处理。在 XAML 中绑定事件：

<TextBox TextChanged="TextBox_TextChanged"/>

在代码背后的文件中定义处理方法：

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{TextBox textBox = (TextBox)sender;string currentText = textBox.Text;// 在此处进行文本改变后的处理逻辑
}

按键事件处理
还可以处理文本框的按键事件，如KeyDown事件。在 XAML 中绑定：

<TextBox KeyDown="TextBox_KeyDown"/>

在代码背后的文件中定义处理方法：

private void TextBox_KeyDown(object sender, KeyEventArgs e)
{if (e.Key == Key.Enter){// 当用户按下回车键时的处理逻辑}
}

5.2 文本框内容获取与设置

获取文本框内容
在代码背后的文件中，可以通过Text属性获取文本框中的当前内容。例如：

private void SomeMethod()
{string textBoxContent = myTextBox.Text;
}

设置文本框内容
同样通过Text属性来设置文本框的内容。例如：

private void SomeOtherMethod()
{myTextBox.Text = "新的文本内容";
}

六、Button 与 TextBox 的组合应用

6.1 简单的登录界面示例

XAML 布局

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"><TextBox x:Name="usernameTextBox" PlaceholderText="用户名"/><TextBox x:Name="passwordTextBox" PlaceholderText="密码" PasswordChar="*"/><Button Content="登录" Click="LoginButton_Click"/>
</StackPanel>

上述代码创建了一个简单的登录界面布局，包含两个文本框用于输入用户名和密码，以及一个登录按钮。
2. 代码背后的逻辑
在代码背后的文件中定义登录按钮的点击事件处理方法：

private void LoginButton_Click(object sender, RoutedEventArgs e)
{string username = usernameTextBox.Text;string password = passwordTextBox.Password;// 在此处进行登录验证逻辑，例如检查用户名和密码是否正确if (username == "admin" && password == "123456"){MessageBox.Show("登录成功！");}else{MessageBox.Show("用户名或密码错误！");}
}

此示例展示了如何结合 Button 和 TextBox 实现一个简单的用户登录功能。

6.2 数据计算应用

XAML 布局

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"><TextBox x:Name="number1TextBox" Text="0"/><TextBox x:Name="number2TextBox" Text="0"/><Button Content="相加" Click="AddButton_Click"/><TextBlock x:Name="resultTextBlock"/>
</StackPanel>

代码背后的逻辑
在代码背后的文件中定义相加按钮的点击事件处理方法：

private void AddButton_Click(object sender, RoutedEventArgs e)
{if (double.TryParse(number1TextBox.Text, out double num1) &&double.TryParse(number2TextBox.Text, out double num2)){double result = num1 + num2;resultTextBlock.Text = "结果: " + result.ToString();}else{resultTextBlock.Text = "请输入有效的数字！";}
}

此示例展示了如何使用 Button 和 TextBox 实现简单的数据计算功能。

七、Button 和 TextBox 的高级特性

7.1 Button 的模板定制

自定义按钮外观
通过创建 ControlTemplate，可以完全自定义按钮的外观。例如，创建一个圆形按钮：

<Button Content="圆形按钮"><Button.Template><ControlTemplate TargetType="Button"><Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Ellipse></ControlTemplate></Button.Template>
</Button>

上述代码将按钮的外观定制为一个圆形，按钮的背景色、边框颜色和粗细等属性都与普通按钮的属性绑定。

7.2 TextBox 的输入验证

使用验证规则
可以通过创建自定义的验证规则来限制文本框的输入内容。例如，只允许输入正整数：

首先，创建一个验证规则类：

public class PositiveIntegerValidationRule : ValidationRule
{public override ValidationResult Validate(object value, CultureInfo cultureInfo){string input = value as string;if (string.IsNullOrEmpty(input)){return new ValidationResult(false, "不能为空");}int number;if (!int.TryParse(input, out number) || number <= 0){return new ValidationResult(false, "请输入正整数");}return ValidationResult.ValidResult;}
}

然后，在 XAML 中应用该验证规则：

<TextBox><TextBox.Text><Binding Path="SomeProperty" UpdateSourceTrigger="PropertyChanged"><Binding.ValidationRules><local:PositiveIntegerValidationRule/></Binding.ValidationRules></Binding></TextBox.Text>
</TextBox>

当用户输入不符合要求的内容时，会显示相应的错误提示。

结束语

展望未来，WPF 布局系统依然有着广阔的发展前景。随着硬件技术的不断革新，如高分辨率屏幕、折叠屏设备的日益普及，WPF 布局系统有望进一步强化其自适应能力，为用户带来更加流畅、一致的体验。在应对高分辨率屏幕时，能够更加智能地缩放和布局元素，确保文字清晰可读、图像不失真；对于折叠屏设备，可动态调整布局结构，充分利用多屏空间，实现无缝切换。

同时，与新兴技术的融合也将为 WPF 布局系统注入新的活力。例如，结合人工智能技术，布局系统能够根据用户的操作习惯和视觉偏好，自动优化界面布局，提供个性化的界面呈现；在虚拟现实（VR）与增强现实（AR）领域，WPF 布局或许能打破传统二维平面的限制，构建沉浸式的三维布局空间，为用户创造前所未有的交互体验。

Button 和 TextBox 作为 WPF 中的常用控件，具有丰富的功能和灵活的应用方式。从基础的显示设置到复杂的交互功能，再到高级的特性定制，它们为开发者提供了构建强大用户界面的基础。通过深入理解和掌握这些控件的应用，开发者能够创建出更加美观、易用且功能丰富的 WPF 桌面应用程序。在实际开发中，应根据具体的需求，合理运用这些控件的各种特性，以达到最佳的用户体验和应用程序性能。同时，随着 WPF 技术的不断发展，这些控件也可能会有更多的新特性和改进，开发者需要持续关注和学习，以跟上技术的步伐。

亲爱的朋友，无论前路如何漫长与崎岖，都请怀揣梦想的火种，因为在生活的广袤星空中，总有一颗属于你的璀璨星辰在熠熠生辉，静候你抵达。

愿你在这纷繁世间，能时常收获微小而确定的幸福，如春日微风轻拂面庞，所有的疲惫与烦恼都能被温柔以待，内心永远充盈着安宁与慰藉。

至此，文章已至尾声，而您的故事仍在续写，不知您对文中所叙有何独特见解？期待您在心中与我对话，开启思想的新交流。

--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

优质源码分享

【百篇源码模板】html5各行各业官网模板源码下载
【模板源码】html实现酷炫美观的可视化大屏(十种风格示例，附源码)
【VUE系列】VUE3实现个人网站模板源码
【HTML源码】HTML5小游戏源码
【C#实战案例】C# Winform贪吃蛇小游戏源码

在这里插入图片描述

💞 关注博主带你实现畅游前后端

🏰 大屏可视化带你体验酷炫大屏

💯 神秘个人简介带你体验不一样得介绍

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有） ，https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/145302627（防止抄袭，原文地址不可删除）

WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用

一、前言

二、Button 控件基础

2.1 Button 的基本定义与显示

2.2 按钮样式设置

2.3 按钮大小与布局

三、Button 的交互功能

3.1 点击事件处理

3.2 鼠标悬停与离开效果

3.3 按钮禁用与启用

四、TextBox 控件基础

4.1 TextBox 的基本定义与显示

4.2 文本框属性设置

五、TextBox 的交互功能

5.1 文本输入事件处理

5.2 文本框内容获取与设置

六、Button 与 TextBox 的组合应用

6.1 简单的登录界面示例

6.2 数据计算应用

七、Button 和 TextBox 的高级特性

7.1 Button 的模板定制

7.2 TextBox 的输入验证

结束语

优质源码分享

相关文章：