在學習WPF之前我們要首先瞭解並認識一個新的東西-XAML。什麼是XAML？XAML和WPF的關係是什麼？在項目中怎麼使用XAML？接下來我們來一點一點的認識Ta。 1 - 什麼是XAML？百度百科是這麼說的 XAML是eXtensible Application Markup Language的 ...

在學習WPF之前我們要首先瞭解並認識一個新的東西-XAML。什麼是XAML？XAML和WPF的關係是什麼？在項目中怎麼使用XAML？接下來我們來一點一點的認識Ta。

1 - 什麼是XAML？

百度百科是這麼說的

    XAML是eXtensible Application Markup Language的英文縮寫，相應的中文名稱為可擴展應用程式標記語言，它是微軟公司為構建應用程式用戶界面而創建的一種新的描述性語言。XAML提供了一種便於擴展和定位的語法來定義和程式邏輯分離的用戶界面，而這種實現方式和ASP.NET中的"代碼後置"模型非常類似。XAML是一種解析性的語言，儘管它也可以被編譯。它的優點是簡化編程式上的用戶創建過程，應用時要添加代碼和配置等。

維基百科是這麼說的

    XAML（Extensible Application Markup Language 讀音/ˈzæməl/)是Windows Presentation Foundation（WPF）和Universal Windows Platform(UWP)的一部分，是微軟開發的一種基於XML、基於聲明，用於初始化結構化值和對象的使用者介面描述語言，它有著HTML的外觀，又揉合了XML語法的本質，例如：可以使用<Button>標簽設定按鈕（Button）。它類似Linux平臺下的glade。至於WinFX XAML Browser Application（XBAP）是用XAML作界面描述，在瀏覽器中執行的程式，可取代過去的ActiveX、Java Applet、Flash。
    XAML本質上屬於一種.NET編程語言，屬於通用語言運行庫（Common Language Runtime），同C#、VB.NET等同。與HTML類似，特點是用來描述使用者介面。XAML的語法格式為：<Application... />，Application是必備的基本元素。XAML可以定義2D和3D物件、旋轉（rotations）、動畫（animations），以及各式各樣的效果。

微軟文檔是這麼說的

    XAML 是一種聲明性標記語言。 應用於 .NET Core 編程模型時，XAML 簡化了為 .NET Core 應用創建 UI 的過程。 你可以在聲明性 XAML 標記中創建可見的 UI 元素，然後使用代碼隱藏文件（這些文件通過分部類定義與標記相聯接）將 UI 定義與運行時邏輯相分離。 XAML 直接以程式集中定義的一組特定後備類型表示對象的實例化。 這與大多數其他標記語言不同，後者通常是與後備類型系統沒有此類直接關係的解釋語言。 XAML 實現了一個工作流，通過此工作流，各方可以採用不同的工具來處理 UI 和應用的邏輯。

通過以上我們能夠瞭解知道幾個點

xaml是微軟開發
xaml也是一種語言且屬於.net的編程語言同屬於CLR
xaml是基於XML的，唯一區別是前者較後者而言是聲明性可擴展的標記語言
能夠與業務邏輯進行分離

那麼說，在我們學習WPF過程中，xaml又扮演了什麼樣的角色呢？你可以簡單的理解為：在WPF中，xaml就是用於設計UI的一門語言。

2 - 初識XAML

2.1 - 創建第一個WPF項目

打開Visual Studio（筆記中預設使用VS2022），新建WPF項目，此處使用Framework創建，新建之後預設打開MainWindow.xaml文件

1 - 打開Visual Studio 2022 點擊創建新項目

2 - 找到WPF 應用【可選net6 或 Framework】選擇點擊下一步

3 - 選擇對應.NET Framework框架輸入解決方案名稱和項目名稱後點擊創建

4 - 新建項目成功

5 - F5 運行項目

至此，我們的第一個WPF項目就創建完成並能成功的運行起來了。

2.2 - 簡析最簡單的xaml代碼

在我們上述創建的第一個WPF項目中，我能能夠看到創建成功之後第一眼能夠看到的一個是xaml設計區一個是xaml設計預覽區。其中設計區代碼為

<Window x:Class="FirstWPFDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:FirstWPFDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
  <Grid>
    
  </Grid>
</Window>

我們來簡單分析一下這個xaml基礎的文件都包含了哪些東西。

代碼簡析

首先我們看到有個<Window></Window>的節點。之前我們已經說過xaml是基於XML的，我們都知道在xml中如果有多個根節點是會出問題的（如果不知道的可以去先看下xml）那麼對於xaml而言同樣試用，當我們在根節點之外再去定義時會提示錯誤的

接下來，我們看下window的子節點，其中有個<Grid>節點，這個Grid呢是個佈局容器，之後我們學到控制項的時候會學到。那麼在創建的基本xaml文件中我們發現除了一個根節點和一個子節點沒有其他東西了。那麼接下來我們就認真去看下再根節點Window下的那些看不懂的東西都是些什麼！也就是這一部分

PS：為什麼我的VS一保存之後樣式就變成比較統一的呢？因為安裝了一個插件叫做【XAML STYLER FOR VISUAL STUDIO 2022】如果你沒有安裝2022那麼說直接搜索xaml styler即可

聲明語法

我們知道<Window>叫做標簽那麼說標簽裡邊那些什麼等於什麼的叫什麼呢，那些叫做屬性，當然了你要是熟悉xml的話也就不用贅述。我們首先看其中包含了有兩種

第一種如Title=“MainWindow”這種xxx="*****"

這種呢叫做屬性（Attribute）隸屬於Window標簽的東西。【後續我們會講到此處帶過】

第二種呢如xmlns="*****" xmlns：x="*****"

這種是XML-Namespace的縮寫，也就是所謂的命名空間。對應的語法是

xmlns[可選的縮略名]="命名空間名稱"

如xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"就是引用後者然後指定對應名稱。

接下來我們開始挨個去瞭解下每一行都代表什麼意思

詳解

首先是第一行在瞭解第一行之前我們先去瞭解下x是什麼之後回頭再說

第二行這個是代表的聲明預設映射整個 WPF 客戶端/框架 XAML 命名空間

第三行這個是聲明映射單獨的 XAML 命名空間，（通常）將其映射到 x: 首碼。

第四行這是設計視圖下的屬性,可以理解為是為設計人員所出的，比如你窗體設置寬高都是400，此處的d:width=200 在設計界面預覽的時候還是200但是運行時是400，這個在編譯過程中是忽略不計的，也就是第九行中mc:Ignorable="d"忽略不計。

第五行定義瞭如何為XML解析器表達相容性問題。

回頭看看第一行x:Class 是什麼意思呢？就是說告訴XAML編譯器將XAML標簽的編譯結果與後臺代碼中指定的類合併。如上邊所寫FirstWPFDemo.MainWindow類合併。

至於說，剩下的Title、Width、Height這些都屬於Window標簽的屬性且是依賴屬性【後期會提及到】分別代表了標題、寬度和高度。可以自己修改試試看是什麼效果。

3 - XAML和WPF的關係

其實這個關係呢，在我個人理解中，對於同為桌面應用程式的Winform而言，WPF中比較好的一點就是能夠各乾各的事兒，比如UI設計和後臺邏輯能夠分開去進行處理。互不影響，能給專門的設計師處理界面同時還提供了專門的IDE------Blend。

總之呢，可以把xaml當做設計界面的新玩意兒就行了。在初學而言，不用過於較真這些概念性東西。不過對於xaml的用法還是必須要掌握的。

下一節開始學習XAML語法

WPF學習筆記01-初識XAML