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代码编辑，展示了按钮控件的基本应用与进阶样式调整技巧。也介绍了如何从工具箱中添加一个按钮，和手动写代码放置一个按钮。介绍了自定义按钮的代码实现。