.NET MAUI XAML 中的類型和屬性

  • 5 分鐘

XAML 是一種宣告式的標記語言。 它的設計初衷是為了簡化建立 UI 的程序。 XAML 中的元素會直接代表您在程式碼後置檔案中存取之物件的具現化。

在這個單元中，您將瞭解如何使用 XAML 中可用的類型，以及如何設定和讀取這些類型的屬性。

類性定義的位置為何？

.NET MAUI 會實作 XAML 剖析器，將您宣告的 XAML 元素剖析，並將每個元素具現化為 .NET 類型。 .NET MAUI 剖析器了解的 XAML 方言是 .NET MAUI 特有，但是與其他架構使用的 XAML 類似，例如 Windows Presentation Foundation。

實作 XAML 程式碼所識別項目的 .NET 類型，會以程式碼在數個 .NET 組件中實作。 許多組件都包含在 .NET MAUI 範本中。 您也可以載入適當的組件做為專案的一部分，藉此使用其他自訂類型。 許多組件都可作為 NuGet 套件使用。 MAUI 應用程式使用的大部分常見類型都位於 Microsoft.Maui.Dependencies 和 Microsoft.Maui.Extensions 套件中。

每個類型都是以命名空間所定義。 在您的 XAML 程式碼中，為您參照的類型指定命名空間。 大部分 MAUI 控制項都位於 Microsoft.Maui.Controls 命名空間中，Microsoft.Maui 命名空間會定義公用程式類型，例如 Thickness，而 Microsoft.Maui.Graphics 命名空間包含通用類型，例如 Color。 以此方法導入類型的選項能展現出 XAML 的擴充能力。 XAML 允許您自由選擇是否要包含 .NET MAUI XAML 元素、.NET 類型，以及自訂類型來建立您應用程式的 UI。 在大部分情況下，您無需擔心這些命名空間，因為其使用 C#'s 隱含 usings 功能帶入時，會自動將應用程式加寬。

如何在 XAML 中具現化類型

使用 XAML 來建置 UI 的第一個步驟，是具現化 UI 控制項類型。 在 XAML 中，您可以使用物件元素語法來建立指定類型的物件。 物件元素語法是用來宣告元素的標準、格式良好的 XML 語法。 例如，如果您想要建立具有特定色彩的標籤，您的 XAML 元素會如以下程式碼所示：

<Label TextColor="AntiqueWhite"/>

.NET MAUI XAML 剖析器會剖析此 XAML 元素以具現化記憶體中的物件。 實際上，已剖析的 XAML 標籤會等同於下列 C# 程式碼：

var myLabel = new Label
{
  TextColor = Color.FromRgb(255, 255, 100)
};

什麼是 XAML 命名空間？

請記住，若要讓 XAML 剖析器成功剖析頁面中控制項的 XAML 定義，其必須能夠存取實作控制項並定義其屬性的程式碼。 .NET MAUI 頁面可用的控制項會在安裝作為 Microsoft.Maui NuGet 封裝一部分的組件集合中實作。 控制項位於這些組件的 .NET 命名空間中。 在 C# 程式碼中，您會使用 using 指示詞來將命名空間納入範圍。 在 XAML 頁面中，您會使用頁面的 xmlns 屬性來參照命名空間。 下列程式碼顯示在上一個單元中所建立 XAML 頁面所使用的命名空間：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             ...>

    ...
</ContentPage>

第一個命名空間 http://schemas.microsoft.com/dotnet/2021/maui 是頁面的預設命名空間。 這種 URI 形式的命名空間是 XML 一般形式，外觀與您在 C# 中熟悉的呈現方式可能有些不同。 不過，此 URI 只是 Microsoft.Maui NuGet 封裝中組件所定義的一或多個命名空間別名，因此在頁面開頭指定此命名空間會將所有 .NET MAUI 類型和控制項納入範圍。 如果省略這個命名空間，您將無法使用如 Button、Label、Entry 或 StackLayout 等控制項。

第二個命名空間 http://schemas.microsoft.com/winfx/2009/xaml 即參照包含各種 .NET 內建類型的組件，例如字串、數值和屬性。 在上述的 XAML 程式碼中，已將別名 x 指派給此命名空間。 在此頁面的 XAML 程式碼中，您在此命名空間中使用 x: 將類型新增首碼來加以參照。 例如，每個 XAML 頁面都會編譯成一個類別，而您可以指定使用頁面的 x:Class 屬性產生的類別名稱：

<ContentPage ...
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiXaml.Page1"
            ...>

    ...
</ContentPage>

您可以透過 XAML 命名空間，以 XAML 程式碼參照自己組件中的類型。 例如，如果想要在專案中名為 Utils 的命名空間中定義用於 XAML 程式碼的類型和方法，您可以將 Utils 命名空間新增至頁面，如以下程式碼所示。 在此範例中，您可以使用別名 mycode 將其新增首碼來存取此命名空間中的類型。

<ContentPage ...
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mycode="clr-namespace:Utils"
            ...>

    ...
</ContentPage>

注意

您稍後會在本課程模組中看到此技術的更多範例。

如何在 XAML 中指定屬性值

在 XML 中，您會使用屬性來描述或提供元素的相關資訊。 在 XAML 中，您會使用屬性來設定基礎類型的屬性。 例如，以下列 C# 程式碼為例：

var label = new Label { Text = "Username", TextColor = Color.Black };

此陳述句會建立新的 Label 物件，並設定 Text 和 TextColor 屬性。 若要在 XAML 中設定屬性，請使用這些屬性。 對應的 XAML 程式碼應如下所示：

<Label Text="Username" TextColor="Black" />

您可能會注意到 XAML 程式碼與 C# 程式碼的一個不同之處在於屬性值。 例如，在 C# 程式碼中，您會針對 TextColor 屬性使用 Color 類型。 不過，在 XAML 定義中，您會設定使用字串值設定 TextColor。 這是因為字串是唯一可用於 XML 屬性值的有效元素。 因此，必須要有一種方法，將每個字串值轉換為其正確的類型。 在 XAML 中，您可以使用類型轉換器來進行此轉換。

什麼是類型轉換器？

類型轉換器會將已指定為字串值的 XML 屬性轉換為正確的類型。 若要進一步瞭解這個概念，請考慮下列範例：

<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic" />

此程式碼會建立 Label 並設定其 Text、TextColor、FontSize 及 FontAttributes 屬性。

讓我們以第一個屬性 Text 開始。 文字已經是字串，這表示 XAML 頁面不需要類型轉換器。 接下來，TextColor 會使用 Color 類型，因此 XAML 需要類型轉換器，才能將字串轉換成對應 Color 的值。 FontSize 屬性是整數，因此 XAML 需要類型轉換器來將字串剖析為整數。 最後，FontAttributes 是複雜物件的範例。 您可以將值合併為以逗號分隔的字串：「粗斜體」。 以逗號分隔的字串會視為 [Flags] 型的列舉，且適當的類型轉換器會將值的位元 OR 套用至屬性。

.NET MAUI 具有大部分內建類別的類型轉換器，而且會自動使用這些類型轉換器。 不過，如果某個特定轉換器不存在，您可以自行撰寫並將它關聯至您的類型，以使它可於 XAML 中使用。

複雜類型指派

類型轉換器很適合用於簡單的屬性設定，不過在某些情況下，您必須建立具有屬於自己之屬性值的完整物件。 此問題的解決方案，是將屬性指派變更為使用以元素為基礎的語法。 此語法被稱為屬性元素表單。 此語法會涉及將屬性 setter 分割為父子式表單，其中屬性會以元素標記的形式表示為 Type.PropertyName。 假設您想要將筆勢辨識器指派至某個標籤，使應用程式使用者可以點選該標籤。 筆勢辨識器是具有屬於自己之屬性的複雜物件。 一般而言，這些屬性需要被指派以確保功能可以正常運作：

<TapGestureRecognizer NumberOfTapsRequired="2" />

如果您需要將此值指派給 Label，您可以撰寫 XAML，如下所示：

<Label Text="Username" TextColor="Black" FontSize="42" FontAttributes="Bold,Italic">
    <Label.GestureRecognizers>
        <TapGestureRecognizer NumberOfTapsRequired="2" />
    </Label.GestureRecognizers>
</Label>

Label 類型有名為 GestureRecognizers 的屬性。 您可以使用 Property Element 表單，將 TapGestureRecognizer 新增至 Label 的筆勢清單。

預設內容屬性

某些 .NET MAUI 控制項有預設的內容屬性。 內容屬性可讓您在控制項上指定某個屬性的值，而不需要在 XAML 中明確陳述它。 讓我們看看下列 XAML 片段：

<VerticalStackLayout>
    <VerticalStackLayout.Children>
        <Label Text="Please log in" />
    </VerticalStackLayout.Children>
</VerticalStackLayout>

此程式碼會建立 VerticalStackLayout 並將 Label 新增為子項目。 因為將子項目新增至 VerticalStackLayout 是常見的作法，因此其 Children 屬性是預設的內容屬性。 這表示您可以新增子項目，而不須明確指定 Children，如下所示：

<VerticalStackLayout>
    <Label Text="Please log in" />
</VerticalStackLayout>

知識檢查

1.

類型轉換器有何作用？

2.

如何將您自己的自訂類型納入 XAML 檔案的範圍？