While .NET MAUI layouts are extremely useful for developing graphical interfaces, it’s always nice to have additional options for arranging elements on the screen. In this article, you will learn about the DockLayout, a layout provided by the .NET MAUI Community Toolkit!
To facilitate the understanding of this explanation, I will divide it into the following subtopics:
🔹 .NET MAUI Community Toolkit installation
🔹 What is a DockLayout?
🔹 Explaining the DockLayout structure
🔹 Discovering the Properties of DockLayout
🔧 First of all… What do I need to know?
What is .NET MAUI Community Toolkit??
- It’s a collection of reusable elements such as animations, behaviors converters, among others, for developing applications for iOS, Android, macOS and WinUI using MAUI.
🔧 Still haven't implemented it? Check it here!
- Add from NuGet Package: Community.Toolkit.Maui
- Now let’s initialize: Go to your MauiProgram.cs file
CreateMauiApp method, place in the .
UseMauiApp<App>() line and just below it add the following line of code:
⚠ Don’t forget to add the
using CommunityToolkit.Maui;at the top of the class.
- Finally, add the following namespace:
What is a DockLayout?
The DockLayout is a layout that enables views to be docked to the top, left, right, or bottom of the layout and it is provided by the .NET MAUI Community Toolkit.
Explaining the DockLayout structure
This layout is essentially composed of different pre-defined positions that enable you to dock secondary views, providing an organized arrangement of your elements. Among the default we have the following: