上期介紹了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代碼編輯，展示了按鈕控件的基本應用與進階樣式調整技巧。也介紹了如何從工具箱中添加一個按鈕，和手動寫代碼放置一個按鈕。介紹了自定義按鈕的代碼實現。