.NET MAUI Project Structure

• .NET MAUI projects contain code and resources to create applications

Building Blocks

• MauiProgram.cs configures the Application object.
• App.xaml and App.xaml.cs provide UI resources and create the initial application window.
• AppShell.xaml and AppShell.xaml.cs specify the initial page and handle navigation routing.
• MainPage.xaml and MainPage.xaml.cs define the default page's layout and UI logic.
• .NET MAUI projects have default application resources like images, icons, fonts, and bootstrap code.

The Application Class

• The App class represents the .NET MAUI application and inherits from Microsoft.Maui.Controls.Application.
• The App class is instantiated and loaded by bootstrap code.
• The App class constructor creates an AppShell instance and assigns it to the MainPage property, controlling the first screen.
• The App class contains methods for handling app lifecycle events, like when the app goes to the background.
• The App class also facilitates creating new windows; a .NET MAUI app defaults to a single window but can launch more.

Navigation Structures: Shell

• .NET MAUI Shell simplifies app development by providing features like describing the visual hierarchy, common navigation, URI-based navigation, and a search handler.
• The visual hierarchy in a .NET MAUI Shell app is described in a subclass of the Shell class.
• Shell classes consist of three main hierarchical objects, FlyoutItem or TabBar, Tab, and ShellContent.
• FlyoutItem represents items in a flyout (for navigation patterns needing a flyout).
• TabBar represents the bottom tab bar (for navigation starting with bottom tabs).
• Tab represents grouped content, navigable by bottom tabs.
• ShellContent represents the ContentPage objects for each tab.
• These objects organize the app's visual hierarchy, and Shell produces the navigation UI.

Pages

• Pages are the root UI hierarchy in .NET MAUI inside of a Shell
• The MainPage class derives from ContentPage, the simplest page type, and displays a single view.
• Other .NET MAUI page types include TabbedPage, FlyoutPage, and NavigationPage.
• TabbedPage is the root page for tab navigation and contains child page objects for each tab.
• FlyoutPage enables a master/detail style presentation, containing a list of items with a detailed view appearing upon selection.
• NavigationPage enables hierarchical navigation through pages.

Views

• Content pages display a view.
• A view enables users to retrieve and present data.
• The default view for a content page is a ContentView, which displays items as-is; items may disappear if the view shrinks.
• A ScrollView displays items in a scrolling window, allowing scrolling if the window shrinks.
• A CarouselView is a scrollable view for swiping through items.
• A CollectionView retrieves data from a source and presents items using a template.

Controls and Layouts

• A view contains a single control, such as a button, label, or text box.
• Views are also controls so it can contain another view.
• Controls are positioned in a layout.
• A layout defines how controls are displayed relative to each other and can be added to a view.
• The VerticalStackLayout element in MainPage.xaml is a control for fine-tuning the layout.
• Common controls used to define layouts include VerticalStackLayout and HorizontalStackLayout.
• VerticalStackLayout and HorizontalStackLayout are optimized stack layouts that lay out controls in a top-to-bottom or left-to-right stack, respectively.
• Modifying the StackOrientation property in the application code enables display adjustment if the user rotates the device.
• AbsoluteLayout sets exact coordinates for controls.
• FlexLayout is similar to StackLayout but wraps child controls if they don't fit and provides alignment options.
• Grid positions child elements in rows and columns, with defined sizes and spans.

Tuning a Layout

• Margin adds space around a control, pushing other controls away.
• Padding keeps children from getting close to the border of the layout.
• Spacing in VeticalStackLayout or HorizontalStackLayout adds space between the children of the layout.