簡介

  • 2 分鐘

在整個 UI 中使用相同的字型和色彩可建立一致的外觀與風格。 .NET MAUI 可讓您集中定義這些值，然後在一切使用之處查閱。 重複使用值可確保應用程式之間的一致性，並簡化更新程序。

假設您在建立一個名為 TipCalculator 的行動應用程式。 該應用程式用於餐旅業，可讓服務生快速計算每項服務的小費。 貴公司最近變更了其公司品牌的外觀。 您的工作是要更新應用程式的 UI，以符合新的外觀。 您需要變更字型、文字色彩與背景色彩。 您想要讓這類更新變得輕鬆，因為隨著公司成長，一定會有更多的品牌變更。

在本課程模組中，您將於程式碼與 XAML 中定義並套用資源。 您也會了解如何將多個設定組成一個樣式，以一次全部套用。

注意

本課程模組需要 Visual Studio 2022。 您可以使用 Windows 或 Mac。 如果在 Windows 上執行，請確定已安裝「使用 .NET 進行行動開發」工作負載。 若需加入安裝中，請參閱文件。 如果在 Mac 上執行，則標準 Visual Studio for Mac 安裝包含以 .NET MAUI 建立應用程式所需的一切。

學習目標

在本課程模組中，您將了解如何：

  • 在 MAUI XAML 使用者介面中建立和使用靜態資源。
  • 建立和使用動態資源。
  • 使用樣式來建立一致性的使用者介面。
  • 建立和使用整個應用程式的資源。
  • 使用內建樣式來套用使用者協助工具選項。

必要條件

  • 已安裝 .NET MAUI 工作負載的 Visual Studio 2022。
  • 選擇性：已安裝 .NET MAUI 延伸模組的 Visual Studio Code 和已安裝 .NET MAUI 工作負載的 .NET SDK。
  • 熟悉 C# 和 .NET。

.NET MAUI 開發的需求

若要使用 .NET 8 建立 .NET MAUI 應用程式，您必須安裝 已安裝下列工作負載的 Visual Studio 17.8 版或更新版本：

  • .NET Multi-Platform App UI 開發

此外，如果您想要建置 .NET MAUI Blazor 應用程式，您必須安裝 ASP.NET 和 Web 開發工作負載。

如需設定的逐步解說，請參閱本文。

使用 Visual Studio Code 的開發

如果您要在 macOS 或 Linux 上進行開發，則需要安裝 Visual Studio Code 和 .NET MAUI 延伸模組，以及 .NET SDK 和 .NET MAUI 工作負載。 如需設定的逐步解說，請參閱本文。