5 Layouts
This chapter covers:
- The different types of built-in layout you can use in .NET MAUI apps
- The importance of layouts and when to use which one
- How and when to use ScrollView
- How to combine layouts to create a UI
Layout is the most important aspect of a UI design. UI design consists fundamentally of three aspects: layout, typography, and color (of course there are more, but at a high level these are the key components of a design). You can create a great looking UI in black and white with only one typeface, but fancy typography and pretty colors won’t rescue a bad layout. From the experts:
Layout is the most critical piece of website’s design. It is quite literally the foundation for the rest of the pieces that will eventually be added to the website.
Design for Developers, Stephanie Stimac, Manning 2022
Stimac uses the word ‘website’ here, but she’s really talking about UI. And that can be web, desktop, or mobile UI. As a .NET MAUI developer you’re in luck, as we have plenty of options for how we can lay out our UI. The layouts included in .NET MAUI are:
HorizontalStackLayoutVerticalStackLayoutGridFlexLayoutBindableLayoutAbsoluteLayout
We’ll look at the first three (Grid, HorizontalStackLayout, and VerticalStackLayout), with examples of varying complexity, and then look at how you can combine them to achieve any design. We’ll look at the last three (FlexLayout, BindableLayout and AbsoluteLayout) in the next chapter.