Book Image

.NET MAUI for C# Developers

By : Jesse Liberty, Rodrigo Juarez
3.7 (6)
Book Image

.NET MAUI for C# Developers

3.7 (6)
By: Jesse Liberty, Rodrigo Juarez

Overview of this book

While UI plays a pivotal role in retaining users in a highly competitive landscape, maintaining the same UI can be tricky if you use different languages for different platforms, leading to mismatches and un-synced pages. In this book, you'll see how .NET MAUI allows you to create a real-world application that will run natively on different platforms. By building on your C# experience, you’ll further learn to create beautiful and engaging UI using XAML, architect a solid app, and discover best practices for this Microsoft platform. The book starts with the fundamentals and quickly moves on to intermediate and advanced topics on laying out your pages, navigating between them, and adding controls to gather and display data. You’ll explore the key architectural pattern of Model-View-ViewModel: and ways to leverage it. You’ll also use xUnit and NSubstitute to create robust and reliable code. By the end of this book, you’ll be well-equipped to leverage .NET MAUI and create an API for your app to interact with a web frontend to the backend data using C#.
Table of Contents (18 chapters)
1
Part 1 – Getting Started
8
Part 2 – Intermediate Topics
12
Part 3 – Advanced Topics

FlexLayout

FlexLayout is similar to VerticalStackLayout and HorizontalStackLayout with one crucial distinction: if you are using one of the stack layouts and the items extend past the end of the page (and you don’t use ScrollView), anything that doesn’t fit won’t be rendered.

FlexLayout – seem familiar?

FlexLayout might be familiar if you’ve worked with CSS. FlexLayout is very similar to the Flexible Box Layout and, in fact, was based on the CSS module.

You can see the effect of FlexLayout by removing ScrollView from PreferencesPage. All of the remaining preferences are inaccessible.

With FlexLayout, the items are wrapped to the next row or column. You define which by setting the direction in FlexLayout. The possible directions are as follows:

  • Row: Stacks children horizontally
  • Row-reverse: Stacks horizontally in reverse order
  • Column: Stacks children vertically
  • Column-reverse: Stacks vertically in reverse order
...