1. 首頁 > 生活百科 > >

MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

生活百科

一、XAML（MAUI的XAML）和HTML

  1. 兩者相似 ， 都是標簽語言（也叫標記）組成的樹形文檔 。每個標簽元素，可視為一個對象，通過“鍵=值”形式的標簽屬性（Attribute），為對象的屬性（Property）、事件等成員賦值 。注，此處特別將Attribute和Proterty區別開來，兩者雖都叫屬性，但Attribute屬于標簽，Property屬于對象，一部分Attribute與Proterty一一對應，但另一部分Attribute可能對應著對象的事件、命令等 。
  2. 區別① ， HTML的標簽語言通過瀏覽器渲染為UI控件，而XAML先要通過編譯器轉為中間代碼，并與后臺C#代碼合并，然后通過MAUI映射為Native對象，再由本機渲染為UI控件 。ps：如果MAUI編譯為安卓平臺，Native對象就指安卓平臺的原生對象，本機就指安桌平臺 。
  3. 區別②，XAML有后臺的cs文件，除了使用XAML標簽，還可以通過等效C#代碼來創建對象，可以看到文檔對象的本質 。
  4. PS：元素是語言層面的概念 ， 控件是UI層面的概念，大多數時候，可以認為是在指代同一個東西 。以下案例中出現的元素/控件分別為：Button-按鈕，Lable-單行或多行文本 ， StackLayout-水平或垂直排列布局，Grid-行列布局，ContentPage-內容頁面
二、XAML的元素和屬性
MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

文章插圖
三、屬性的賦值方式
MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

文章插圖
1、字符串賦值：值類型屬性可以直接通過字符串賦值 。部分復雜類型 ， 也能通過內置轉換器，將字符串自動轉換為對象類型
2、元素屬性：屬性為復雜的對象類型時，可以通過元素屬性的方式賦值（也叫屬性元素），即以元素的形式來表達屬性
3、擴展標記：通過擴展標記（大括號），屬性的值可以引用其它源的值或對象 。其中數據綁定Binding是擴展標記之一 。
四、內容屬性和子元素
MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

文章插圖
1、ContentPage屬于頁面類控件 ， 其內容屬性為Content，只能有一個子元素，所以一般頁面類控件的子元素使用布局類控件 。
2、StackLayout屬于布局類控件，其內容屬性為Children，是一個集合類型，可以放置多個子元素 。
 五、附加屬性
MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

文章插圖
1、上例中屬性Grid.Row和Grid.Column，在Label元素上使用，但它們屬于Grid 。
2、在等效的c#代碼中，設置子元素所在行列，表現為調用Grid的兩個靜態方法，參數為子元素和行列
3、附加屬性屬于可綁定屬性，將在后續章節中深入學習其實現原理 。
六、根元素和多頁面
MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

文章插圖
1、MAUI是傳統的多頁面應用，區別于目前流行的單頁面應用（如React、Vue等） ， 頁面的組織、導航、狀態管理等，都更加直白簡單 。
【MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command】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為類的全路徑名稱） 。
七、事件和命令
MAUI新生-XAML語法基礎：語法入門Element&Property&Event&Command

文章插圖
1、事件和命令 ， 均提供了用戶與UI的交互功能 。
2、事件為傳統的事件響應機制，響應事件的方法，寫在當前頁面的后臺代碼文件中 。如當前面頁為MainPage.xmal，后臺文件為MainPage.xaml.cs 。

推薦閱讀