C# WPF入门学习（四）—— 按钮控件

上期介绍了WPF的实现架构和原理，之后我们开始来使用WPF来学习各种控件。

一、尝试插入一个按钮（方法一）

1. VS2019 在界面中，点击工具栏中的视图，在下拉菜单中选择工具箱。

至于编译器中的视图怎么舒服怎么来布置，我也会出一期文章讲述我的编译器界面如何布局的，新手和强迫症到时候可以来参考参考。

2. 言归正传，打开工具箱界面之后，我们找到button按键控件，拖入进来。

这样，一个按键就创建好了，但是如何才能修改属性变成左下角的按键的样式呢？那就需要修改XAML了

XAML 是一种强大且灵活的标记语言，适用于创建现代化、响应迅速的 Windows 应用程序界面。它的声明式语法和与 C# 的紧密集成，使其成为 WPF 和 UWP 开发的核心工具。通过学习 XAML，开发者可以更高效地设计和实现复杂的 UI 需求。

二、在XAML中插入一个button（方法二）

在可视化UI下面有一个xaml代码编辑器，在编辑器中可以更改代码和增删代码来改变布局，红框就是XAML代码编辑区。

---

XAML格式和内容编辑：

1. XAML中的Window元素

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525">
</Window>

<Window> 元素是 WPF 中一个顶级容器，表示一个窗口。它通常是一个应用程序的主窗口或弹出窗口。这个元素包含了一些属性，用于定义窗口的外观和行为。

x:Class: 是一个 XAML 语言的特性，指定了这个 XAML 文件所对应的后台代码类。在例子中，x:Class="WpfApp.MainWindow" 指定了窗口的后台代码类是 WpfApp.MainWindow。这个类位于 MainWindow.xaml.cs 文件中，并包含窗口的逻辑代码。

xmlns: 定义了 XAML 文件中使用的命名空间。xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"：这是默认的 WPF 命名空间，包含了 WPF 中的各种控件和功能。

xmlns:x: 定义了 XAML 的命名空间，包含 XAML 语言的功能。xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"：这是 XAML 命名空间，提供了如 x:Class、x:Name、x:Key 等 XAML 语言功能。

Title: 定义窗口的标题栏文本。Title="MainWindow" 将窗口的标题设置为 "MainWindow"。

Height 和 Width: 定义窗口的高度和宽度（以像素为单位）。Height="350" 和 Width="525" 设置了窗口的初始大小。

这是完整的一个窗口的界面描述代码。

<Window x:Class="WpfApp.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"Title="MainWindow" Height="350" Width="525"><!-- 这里可以添加更多的控件和布局 --><Grid><Button Content="Click Me" Width="100" Height="50" HorizontalAlignment="Center" VerticalAlignment="Center"Click="Button_Click"/></Grid>
</Window>

2. XAML中的Grid元素

<Grid><Button Content="Button" HorizontalAlignment="Left" Margin="366,99,0,0" VerticalAlignment="Top" Width="99" Height="38"/><Button Content="XAML创建的按钮" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200" Height="30"></Button>
</Grid>

3. Button元素

当我们会创建一个按钮元素之后，在侧边的属性栏中可以改文字、颜色、背景等属性。那么如果圆角这种没有的属性如何更改和美化呢（毕竟做出来是给人看的）？直接粘代码：

<Button x:Name="myButton" Content="Click Me"Width="104" Height="69"HorizontalAlignment="Center" VerticalAlignment="Center"FontSize="16" FontWeight="Bold"Background="LightBlue" Foreground="White"BorderBrush="Blue" BorderThickness="2"Click="MyButton_Click" Margin="18,230,399,25"><Button.Style><Style TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Grid><Ellipse x:Name="ellipse" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SkyBlue"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SteelBlue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button>

像上面的代码实现的效果是什么样的呢？

x:Name="myButton"          <!-- 设置按钮的名称为myButton，便于在代码后端引用 -->Content="Click Me"         <!-- 按钮上显示的文字内容 -->Width="104" Height="69"     <!-- 设置按钮的宽度和高度 -->HorizontalAlignment="Center" VerticalAlignment="Center"  <!-- 让按钮在容器中水平和垂直居中对齐 -->FontSize="16" FontWeight="Bold"   <!-- 设置按钮文字的字体大小和加粗 -->Background="LightBlue" Foreground="White"  <!-- 按钮的背景色为浅蓝色，前景色（文字颜色）为白色 -->BorderBrush="Blue" BorderThickness="2"      <!-- 设置按钮边框颜色为蓝色，边框厚度为2 -->Click="MyButton_Click"             <!-- 指定按钮被点击时执行的事件处理方法 -->Margin="18,230,399,25">           <!-- 设置按钮的外边距，顺序为左、上、右、下 -->

  <!-- 自定义Button的样式 --><Button.Style><Style TargetType="Button"> <!-- 定义一个针对Button类型的样式 --><!-- 重写Button的控制模板 --><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><!-- 使用Grid布局来包含按钮的内容 --><Grid><!-- 创建一个椭圆用于自定义按钮的背景形状 --><Ellipse x:Name="ellipse" Fill="{TemplateBinding Background}" <!-- 绑定到按钮背景色属性 -->Stroke="{TemplateBinding BorderBrush}" <!-- 绑定到按钮边框色属性 -->StrokeThickness="{TemplateBinding BorderThickness}"/> <!-- 绑定到按钮边框厚度属性 --><!-- 内容展示器，用于放置按钮上的内容（如文本） --><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid><!-- 添加触发器来改变按钮状态时的外观 --><ControlTemplate.Triggers><!-- 鼠标悬停时改变椭圆背景色 --><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SkyBlue"/></Trigger><!-- 按钮被按下时改变椭圆背景色 --><Trigger Property="IsPressed" Value="True"><Setter TargetName="ellipse" Property="Fill" Value="SteelBlue"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Button.Style>

这些就是代码的详细解释了。

总结一下：

了解如何在WPF应用程序中实现按钮的创建与自定义，通过Visual Studio 2019的图形界面操作及深入XAML代码编辑，展示了按钮控件的基本应用与进阶样式调整技巧。也介绍了如何从工具箱中添加一个按钮，和手动写代码放置一个按钮。介绍了自定义按钮的代码实现。