簡介

已完成

.NET MAUI 版面配置面板可協助您在各種不同的裝置之間，為應用程式建立一致的使用者介面。

假設您要建置小費計算機應用程式，並打算部署在多部電腦和裝置上。 每部裝置可能會有不同的螢幕大小和像素密度。 您的目標是讓應用程式在所有裝置上盡可能看起來類似。 您想要避免必須為每種螢幕大小手動計算檢視大小和位置。 .NET MAUI 包含為您進行這些計算的版面配置管理系統。 您可以將檢視放入版面配置面板內，以自動管理其子檢視的大小和位置。 這些面板可讓您更輕鬆地在不同裝置之間建立一致的使用者介面。

在本課程模組中，您會建置一個在不同裝置上看起來相似的 .NET Multi-platform App UI (MAUI) 應用程式。 一開始您會為檢視畫面設定慣用的大小和位置。 然後您會使用 StackLayout 垂直排列檢視畫面。 接下來，您會使用 Grid 將檢視放入資料列和資料行。 在本課程模組結束時，您會擁有一個在每種裝置類型和螢幕大小上看起來都一致的 .NET MAUI 應用程式。

學習目標

在本單元中，您將：

• 排列應用程式中的使用者介面元素並調整其大小。
• 使用 StackLayout 以垂直或水平清單顯示檢視。
• 使用 Grid 以資料列和資料行顯示檢視。

必要條件

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

.NET MAUI 開發的需求

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

• .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 工作負載。 如需設定的逐步解說，請參閱本文。