MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command
- 2022 年 11 月 12 日
- 筆記
- maui, MAUI/Blazor/Vue/ArkUI, XAML
一、XAML（MAUI的XAML）和HTML
- 兩者相似，都是標籤語言（也叫標記）組成的樹形文檔。每個標籤元素，可視為一個對象，通過「鍵=值」形式的標籤屬性（Attribute），為對象的屬性（Property）、事件等成員賦值。注，此處特別將Attribute和Proterty區別開來，兩者雖都叫屬性，但Attribute屬於標籤，Property屬於對象，一部分Attribute與Proterty一一對應，但另一部分Attribute可能對應著對象的事件、命令等。
- 區別①，HTML的標籤語言通過瀏覽器渲染為UI控制項，而XAML先要通過編譯器轉為中間程式碼，並與後台C#程式碼合併，然後通過MAUI映射為Native對象，再由本機渲染為UI控制項。ps：如果MAUI編譯為Android平台，Native對象就指Android平台的原生對象，本機就指安桌平台。
- 區別②，XAML有後台的cs文件，除了使用XAML標籤，還可以通過等效C#程式碼來創建對象，可以看到文檔對象的本質。
- PS：元素是語言層面的概念，控制項是UI層面的概念，大多數時候，可以認為是在指代同一個東西。以下案例中出現的元素/控制項分別為：Button-按鈕，Lable-單行或多行文本，StackLayout-水平或垂直排列布局，Grid-行列布局，ContentPage-內容頁面
二、XAML的元素和屬性
三、屬性的賦值方式
1、字元串賦值：值類型屬性可以直接通過字元串賦值。部分複雜類型，也能通過內置轉換器，將字元串自動轉換為對象類型
2、元素屬性：屬性為複雜的對象類型時，可以通過元素屬性的方式賦值（也叫屬性元素），即以元素的形式來表達屬性
3、擴展標記：通過擴展標記（大括弧），屬性的值可以引用其它源的值或對象。其中數據綁定Binding是擴展標記之一。
四、內容屬性和子元素
1、ContentPage屬於頁面類控制項，其內容屬性為Content，只能有一個子元素，所以一般頁面類控制項的子元素使用布局類控制項。
2、StackLayout屬於布局類控制項，其內容屬性為Children，是一個集合類型，可以放置多個子元素。
五、附加屬性
1、上例中屬性Grid.Row和Grid.Column，在Label元素上使用，但它們屬於Grid。
2、在等效的c#程式碼中，設置子元素所在行列，表現為調用Grid的兩個靜態方法，參數為子元素和行列
3、附加屬性屬於可綁定屬性，將在後續章節中深入學習其實現原理。
六、根元素和多頁面
1、MAUI是傳統的多頁面應用，區別於目前流行的單頁面應用（如React、Vue等），頁面的組織、導航、狀態管理等，都更加直白簡單。
2、每個頁面，都必須要有一個根元素，代表當前頁面的類型，目前有ContentPage、FlyoutPage、NavigationPage、TabbedPage等幾種頁面類型。
3、每個頁面，在C#層面，本質是由開發者定義的類，由xaml定義的部分類和後台程式碼定義的部分類組成。根元素指定了這個類的父類類型，x:Class指定了這個類的名稱。
4、屬性xmlns和xmlns:x，引用命名空間，相當於using。屬性值像一個網址，但和網址沒有關係，可以認為是多個命名空間的集合。每個頁面可以有一個默認的xmlns，這個命名空間下的類型可以直接引用，如上例中的xmlns屬性，引用了maui的所有控制項類型，所以可以直接使用控制項，而不需要前綴。而xmlns:x，引用了xaml命名空間，使用了別命x，使用時需要加前綴x:使用，如x:Class。
5、上例中的兩個命名空間默認引入，其中xmlns:x稱之為x命名空間，這個命名空間比較特殊，與XAML編譯器相關，規定了編譯器在將XAML標籤語言編譯為C#中間語言時的一些特定行為。比如上例中的x:Class，就指示編譯器在編譯這個類時，編譯為類名為MainPage的部分類。（MauiApp6.MainPage為類的全路徑名稱）。
七、事件和命令
1、事件和命令，均提供了用戶與UI的交互功能。
2、事件為傳統的事件響應機制，響應事件的方法，寫在當前頁面的後台程式碼文件中。如當前面頁為MainPage.xmal，後台文件為MainPage.xaml.cs。
3、命令屬於MVVM模式，我們使用MVVM開發模式後，基本就很少在後台文件中寫程式碼，後續詳述。
