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

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

上述代码创建了一个简单的登录界面布局，包含两个文本框用于输入用户名和密码，以及一个登录按钮。

代码背后的逻辑

在代码背后的文件中定义登录按钮的点击事件处理方法：

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 技术的不断发展，这些控件也可能会有更多的新特性和改进，开发者需要持续关注和学习，以跟上技术的步伐。

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

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

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

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

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

优质源码分享

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

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

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

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

① 🉑提供云服务部署（有自己的阿里云）；

② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；

如🈶合作请联系我，期待您的联系。

注：本文撰写于CSDN平台 ,作者：xcLeigh （所有权归作者所有） ，https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

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

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