.NET MAUI Roadmap. It is good to remember that this guide can be considered as a compliment, it can not be taken as the final guide.

There are some things you need to know before starting this Xamarin Forms roadmap as a guide.

What you should know

All the subjects shown within a specific area have a unique ID that is composed of the abbreviations of the entity to be discussed and the level of the topic to be studied.

You can use the entity level to guide yourself. For example, the correct way is to start with 001, then pass 010, and so on.

.NET MAUI

.NET MAUI is perfect for cross-platform applications where the primary goal of the application is to display data in a standardized way. This track focuses on building .NET MAUI applications that target iOS, Android, and Windows.

101: Getting Started with .NET MAUI

What is .NET MAUI? What code can I share across my apps? Can I develop on Windows and macOS? This module answers these questions and more. By the end of the module, you will be able to set up your development machine and run an app on Windows, the iOS simulator, and an Android emulator.

• Describe the mobile Software Development Lifecycle (SDLC) with .NET MAUI
• Install the .NET MAUI tools for Visual Studio
• Keep your development tools up to date
• Compile mobile applications with Visual Studio on macOS and/or Windows

Useful links

• Get Visual Studio
• Mobile app development
• Visual Studio App Center

Exploring on your own

• .NET Multi-platform App UI
• What is .NET MAUI?
• Build your first app
• Staying up to date with .NET MAUI development (blog)

110: Introduction to Cross-Platform Mobile Development

Recommended Prerequisites: Getting Started with Xamarin (101)

One of the advantages of using Xamarin over the traditional platform-specific approach is the level of code-sharing you can achieve across iOS, Android, and Windows. In this class, we will explore ways to structure your shared code using Portable Class Libraries, .NET Standard libraries, and Shared Asset Projects. We will look at the pros and cons of each approach and see how to access platform-specific features in each model.

• Work with shared packages from NuGet
• Use Shared Projects to share code between platforms
• Use Portable Class Libraries to share code between platforms
• Share code using .NET Standard libraries

Useful links

• An introduction to NuGet
• App lifecycle
• Invoke platform code

Exploring on your own

• Configure multi-targeting
• #if (C# Reference)

120: Introduction to .NET MAUI

Recommended Prerequisites: Introduction to Cross-Platform Mobile Development (110)

.NET MAUI lets you define a single UI that you share across all your supported platforms. This maximizes your ability to share code: you can share your UI and your business logic. In this module, you will create a new .NET MAUI application and define your shared UI in code. You will also see how to access platform-specific features such as the phone dialer or camera that do not have a shared-programming model integrated into .NET MAUI.

• Learn the basic structure of a .NET MAUI mobile app
• Define a shared UI for Android and iOS
• Deploy an app from Visual Studio to Android and/or iOS

Useful links

• Build your first .NET MAUI App
• Migrate your app from Xamarin.Forms

Exploring on your own

• .NET MAUI Application Fundamentals
• .NET MAUI User Interface

130: XAML in .NET MAUI

Recommended Prerequisites: Introduction to .NET MAUI (120)

.NET MAUI lets you define your UI using the eXtensible Application Markup Language (XAML). This gives you a clean separation of UI and behavior and makes it easy to utilize a design expert and design tools. This module shows you how to define your UI in XAML. You will create pages and add controls, all in markup. You will also see how to access UI elements from code so you can subscribe to UI events and update UI properties as your data changes.

• Create the UI, and add controls for .NET MAUI app using XAML
• Access XAML-based UI elements from code
• Subscribe to XAML-based UI events

Useful links

• eXtensible Application Markup Language (XAML)
• Get started with XAML

Exploring on your own

• XAML Previewer for .NET MAUI
• XAML Markup Extensions

135: Layout in .NET MAUI

Recommended Prerequisites: XAML in .NET MAUI (130)

.NET MAUI apps run on a wide range of devices with varying screen sizes and pixel densities. It is challenging to create a UI that looks good and behaves correctly in all cases. .NET MAUI helps solve this problem by providing flexible layout containers that can calculate the size and position of your UI controls automatically; they even recalculate if the user rotates the device or changes the size of the app’s window. This module contains in-depth coverage of StackLayout and Grid, the two most popular layout containers in .NET MAUI. It also shows you how to add scrolling when your UI is too large for the available screen area.

• Display views in a vertical or horizontal list using StackLayout
• Display views in rows and columns using Grid

Useful links

• .NET MAUI Controls
• .NET MAUI Layouts
• .NET MAUI Animations
• Brushes in .NET MAUI
• Graphics in .NET MAUI
• Images, App Icon, and splash screen
• Shadows in .NET MAUI
• Fonts in .NET MAUI

Exploring on your own

• StackLayout Class
• Grid Class

140: Resources and Styles in .NET MAUI

Recommended Prerequisites: XAML in .NET MAUI (130)

Using the same fonts and colors across your entire UI creates a consistent look-and-feel. .NET MAUI provides a way to define these values in one place and look them up everywhere they are used; this guarantees consistency across your app and makes updates simple. This module shows you how to define and apply a Resource both in code and in XAML. It also shows you how to group multiple settings into a Style so you can apply them all at once.

• Create consistent UI using Resources and Styles
• Apply the user’s accessibility choices with built-in Styles

Useful links

• Style apps using XAML
• Styling apps using Cascading Style Sheets (CSS)

Exploring on your own

• Theme an app
• Visual states

205: Navigation Patterns in .NET MAUI

Recommended Prerequisites: Layout in .NET MAUI (135)

Part of planning your app’s architecture is deciding how the user will move between Pages. Will users need to move forward/backward through a sequence of pages? Does your app have one start page or are there several top-level pages that are all important? Your choice of navigation should work well with your app’s content and feel native to each platform you target. This module shows you how to code two common navigation patterns: stack and tab. It includes guidelines to help you decide which pattern is appropriate for your app. The module also covers how the navigation infrastructure automatically adapts to the runtime platform and shows you how to customize the behavior when needed.

• Choose between stack and tab navigation for your app
• Implement stack and tab navigation
• Display transitory content using modal pages

Useful links

• NavigationPage
• TabbedPage
• FlyoutPage
• Modal Pages

Exploring on your own

• Shell navigation

270: Data Binding in .NET MAUI

Recommended Prerequisites: XAML in .NET MAUI (130)

Most apps need to load data from code-behind into their UI and transfer user-entered data to their code-behind models. Data Binding offers a clean way to perform both tasks. Data Binding uses binding objects that tie two properties together and keep their values in sync as either change. This module shows you how to create bindings both in code and in XAML. You will also see how to implement value converters for use when the types of the two properties are different.

• Synchronize data between your UI and code-behind using bindings
• Minimize coupling between your UI and code-behind to enable easy UI changes

Useful links

• Data Binding Basics

280: Display collections in .NET MAUI

Recommended Prerequisites: Data Binding in .NET MAUI (270)

Most apps need to present data collections in their UI. In this module, you will add .NET MAUI ListView to your app, populate it with a collection of data objects, and handle item selection. You will also use the built-in cell templates to lightly customize the appearance of each row. Finally, you will implement two common user-experience patterns: pull-to-refresh and context actions.

ListView has a limited selection of built-in cell styles. These standard cells handle common cases and you should use them if they meet your needs. If not, you can create a custom cell that will uniquely represent your data and match the overall look-and-feel of your app. This module shows you how to define a row template, how to add headers/footers, and how to display grouped data. You will also survey several performance-tuning strategies including cell caching.

• Create a ListView and populate it with items
• Respond when the user interacts with the ListView
• Customize the appearance of a ListView row by using built-in Cell types
• Create custom cell layouts for a ListView
• Use multiple cell layouts in a single ListView
• Group cells into sections

Useful links

• ListView
• Populate a ListView with data
• Define item appearance
• Choose item appearance at runtime
• Respond to item selection

Exploring on your own

• CollectionView
• CarouselView
• TableView

290: Flyout Navigation

Recommended Prerequisites: Data Binding in .NET MAUI (270), Using ListView in .NET MAUI (280), Navigation Patterns in .NET MAUI (205)

Building a great application means creating a clear navigation path through your content. As your application grows in complexity, you need to provide a UI structure that allows users to quickly switch between multiple screens. In this module, you’ll explore two UI techniques using a flyout relationship. You’ll learn how to switch between several pages of content using flyout navigation, and you’ll create a true flyout UI that enables users to browse a large collection of data while taking advantage of available screen space. This module includes an in-depth look at .NET MAUI FlyoutPage and shows you best practices for coordinating between Flyout and Detail pages.

• Choose between split and pop-over for your flyout view
• Switch between pages using pop-over drawer navigation
• Display a collection using a flyout split view

Useful links

• FlyoutPage
• Control detail page layout behavior

Exploring on your own

• FlyoutPage Class

320: Design an MVVM ViewModel in .NET MAUI

Recommended Prerequisites: Data Binding in .NET MAUI (270), Using ListView in .NET MAUI (280), XAML in .NET MAUI (130), Mobile Application Architecture (301)

We’re going to focus on how to properly architect your application to separate the presentation from the business logic and data that drives it. We’ll be looking at three primary patterns which are popular in the mobile world: Model-View-Controller (MVC), Model-View-Presenter (MVP), and Model-View-ViewModel(MVVM).

• Identify when to use the Model-View-ViewModel pattern
• Use a ViewModel to drive visual behavior
• Improve code testability through data-bindable properties

Useful links

• Simple MVVM
• Interactive MVVM
• Commanding

Resume

This is the guide you need to start using .NET MAUI today.

And hey! You are not alone, if you need help just ask on Twitter with the hashtags #dotnetmaui #dotnet and we will be there for you. Also, if you need something you can always write to me on Twitter at @luismatosluna.

I hope you find this blog post useful. A hug, and until next time.