WPF基础 | WPF 常用控件实战：Button、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（防止抄袭，原文地址不可删除）