Introduction
.NET MAUI layout panels help you create consistent user interfaces for your application across a wide range of devices.
Suppose you're building a tip calculator application that you plan to deploy on many computers and devices. Each device could have a different screen size and pixel density. Your goal is to make the application look as similar as possible on all devices. You'd like to avoid manual calculation of view size and position for each screen size. .NET MAUI includes a layout management system that does these calculations for you. You put your views inside layout panels that automatically manage the size and position of their child views. The panels make it much easier to create consistent user interfaces across different devices.
In this module, you build a .NET MAUI application that looks similar across different devices. You start by setting the preferred size and position of a view. Then you arrange views vertically using a StackLayout. Next, you place views into rows and columns using a Grid. By the end of the module, you have a .NET MAUI application that looks consistent on every device type and screen size.
Learning objectives
In this module, you will:
- Arrange user interface elements in an app and size them.
- Display views in a vertical or horizontal list using
StackLayout. - Display views in rows and columns using
Grid.`
Prerequisites
- Visual Studio 2022 with the .NET MAUI workload installed
- Optional: Visual Studio Code with the .NET MAUI Extension and .NET SDK with the .NET MAUI workload installed
- Familiarity with C# and .NET
Requirements for .NET MAUI development
To create .NET MAUI apps with .NET 8, you need to install Visual Studio version 17.8 or newer with the following workload installed:
- .NET Multi-Platform App UI development
Additionally, if you want to build .NET MAUI Blazor apps, you must install the ASP.NET and web development workload.
See the documentation for a walkthrough of setup.
Development with Visual Studio Code
If you're developing on macOS or Linux, you'll need to install Visual Studio Code and the .NET MAUI Extension along with the .NET SDK and .NET MAUI Workload. See the documentation for a walkthrough of setup.