Build apps for Android, iOS, macOS, and Windows using Microsoft's .NET Multi-platform App UI and Blazor
An evolution of Xamarin.Forms, .NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML. Using .NET MAUI, you can develop apps that'll run on Android, iOS, macOS, and Windows from a single shared code-base. This step-by-step guide provides a comprehensive introduction to those who are new to .NET MAUI that will have you up to speed with app development using .NET MAUI in no time.
The book begins by showing you how to develop a cross-platform application using .NET MAUI and then helps you build an app throughout the chapters. You'll gain all the knowledge needed to create a cross-platform application for Android, iOS, the mac OS, and Windows from a single shared code-base using .NET MAUI. As you advance, you'll get to grips with the entire application development lifecycle, from design and implementation through to deployment to the app store through the development of a password manager app using KeePassLib. The concluding chapters will teach you how to integrate the latest frontend technology into your app through .NET MAUI Blazor.
By the end of this book, you'll have learned how to develop your own cross-platform applications using .NET MAUI.
What you will learn
Who this book is for
This book is an entry-level .NET MAUI book for mobile developers interested in cross-platform application development with working experience of the .NET Core framework, as well as fresh or junior engineers who've just begun their career in mobile app development. Native application developers (desktop) or Xamarin developers who want to migrate to .NET MAUI will also benefit from this book. Basic knowledge of modern object-oriented programming language, such as C#, Java or Kotlin, is assumed.
Sie lesen das E-Book in den Legimi-Apps auf:
Leverage a first-class cross-platform UI framework to build native apps on multiple platforms
Copyright © 2023 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
Group Product Manager: Rohit Rajkumar
Publishing Product Manager: Nitin Nainani
Senior Editor: Keagan Carneiro
Senior Content Development Editor: Debolina Acharyya
Technical Editor: Simran Udasi
Copy Editor: Safis Editing
Project Coordinator: Sonam Pandey
Proofreader: Safis Editing
Indexer: Rekha Nair
Production Designer: Aparna Bhagat
Marketing Coordinator: Nivedita Pandey
First published: February 2023
Production reference: 1050123
Published by Packt Publishing Ltd.
35 Livery Street
B3 2PB, UK.
To my family: my wife Bo Quan and my daughter Yuxin Ye, and the memory of my father and my mother.
– Roger Ye
Roger Ye is a software engineering manager who has worked in the software industry for many years.
Roger started his career as a software engineer in embedded system development at companies such as Motorola, Emerson, and Intersil. During this period, he wrote two books about embedded system programming, Embedded Programming with Android and Android System Programming.
In 2013, Roger joined McAfee as a software engineering manager. He recently started working at EPAM Systems, moving from system programming to application programming. His first book on application programming is on .NET MAUI.
I want to thank the team at Packt, who worked very hard with me to keep to schedule.
Glenn Stephens is a software developer and product designer, implementing solutions for the mobile-, desktop-, and cloud-centered worlds we all live in. Glenn has worked in many different roles, such as managing director, chief executive officer, solution architect, software development manager, and programmer; has worked in fields spanning high-end security, e-health, education, and finance; and has won several awards along the way. Glenn has a bachelor’s degree in computer science, an MBA with a specialization in e-business, and a Graduate Certificate in Arts in theatre and performance. He considers himself a lifelong learner.
An author, speaker, and product builder, he has been writing code since the 80s, with the musical taste to match. When he’s not working, he enjoys playing the piano, reading, and spending time with his children.
Rohit Vinod Kelkar is an artist, a techie, and an experienced mobile application developer who is enthusiastic about cross-platform mobile application technologies. He has expertise in technologies such as Xamarin, Flutter, native iOS, and .NET as a full stack developer. He was an early adopter of .NET MAUI and works with a community of developers to share updates and blog about the technology. He also shares an interest in consulting and helping products in their initial stages.
Siddharth Singh has over 12 years of software development experience, having worked on a variety of platforms such as Windows, web, and mobile applications. Having worked at Expedia, Adobe, and Salesforce, his experience ranges from COM-/ASP-based legacy apps to React/ASP.NET Core modern applications. While working on Xamarin apps, he developed a passion for the Microsoft cross-platform framework.
He currently works at Microsoft as a senior developer for Azure Data Factory, writing data integration applications. When not at work, you can find him reading about theoretical computer science and artificial general intelligence.
In the first part of this book, we will learn about .NET MAUI programming. We will start with the introduction of .NET MAUI and its ancestor Xamarin.Forms. After that, we will create a code base using the Visual Studio template for our application. We will build a password manager app called PassXYZ.Vault step by step in this book. During the development of this app, we will introduce user interface design using XAML, the MVVM pattern, data binding, the shell, dependency injection, and so on. By the end of Part 1, we will have a fully functional password manager application.
This section comprises the following chapters:Chapter 1, Getting Started with .NET MAUIChapter 2, Building Our First .NET MAUI AppChapter 3, User Interface Design with XAMLChapter 4, Exploring MVVM and Data BindingChapter 5,Navigation using .NET MAUI Shell and NavigationPageChapter 6,Introducing Dependency Injection and Platform-Specific Services
Since the release of .NET 5, Microsoft has been trying to unify different .NET implementations into one .NET release. .NET Multi-platform App UI (or .NET MAUI) is an effort to provide a unified cross-platform UI framework. We will learn how to use .NET MAUI to develop cross-platform applications in this book.
If you’re new to .NET development, this chapter will help you to understand the .NET landscape. For Xamarin developers, many topics in this book may sound familiar, and this chapter will give you an overview of what we will discuss in this book.
Before discussing cross-platform technologies, let’s review the application development landscape first to understand the different cross-platform technologies better.
.NET MAUI is a cross-platform development framework from Microsoft for building apps, targeting both mobile and desktop form factors on Android, iOS, macOS, Windows, and Tizen.
Generally, software development can be divided into two categories – systems programming and application programming. Application programming aims to produce software that provides services to the user directly, whereas system programming aims to produce software and software platforms that provide services to other software. In the .NET domain, the development of the .NET platform itself belongs to systems programming, whereas the application development on top of the .NET platform belongs to application programming.
The design or architecture in a modern system includes the client and server side of software, which we can refer to as the frontend and backend.
For the software on the client side, we can further divide it into two categories – native applications and web applications.
In native application development, we usually refer to application development for a particular operating system. With desktop applications, this could be Windows applications, macOS applications, or Linux applications. With mobile applications, this could be Android or iOS.
When we develop a native application, we have to develop it for each platform (Windows, Linux, Android, or macOS/iOS). We need to use different programming languages, tools, and libraries to develop each of them individually.
Both native applications and web applications usually need some backend services to access business logic or a database. For backend development, many languages and frameworks can be used, such as Java/Spring, .NET, Node.js, Ruby on Rails, or Python/Django. Usually, native applications and web applications can share the same backend service. Java and .NET are the most popular choices for backend service developments.
Technologies used in web application development and backend services development are not platform-specific and can be used on different platforms as they are. When we talk about cross-platform development, we usually refer to native application development. In native application development, cross-platform development technologies can help to reduce costs and improve efficiency. The most popular cross-platform development technologies in this category include Flutter, .NET MAUI/Xamarin, and React Native. Table 1.1 provides an overview of available cross-platform technologies and alternative solutions from Microsoft. The technologies listed here are not exhaustive. I just want to give you a feeling of what kind of technologies exist in each category and what Microsoft solution can be used as an alternative.
React, Angular, or Vue
React Native, Cordova, Ionic, Electron, or NW.js
Table 1.1: A comparison of languages and frameworks with Microsoft solutions
There is no best choice of cross-platform tool or framework. The final choice is usually decided according to business requirements. However, from the preceding table, we can see that the .NET ecosystem provides a full spectrum of tools for your requirements. The development team for a large system usually requires people with experience in different programming languages and frameworks. With .NET, the complexity of programming languages and frameworks can be dramatically simplified.
Java is developed as a language with the goal to write once and run anywhere. It is built around the Java programming language and the Java Virtual Machine (JVM). The JVM is a mechanism to run on supported platforms that helps to remove platform dependency for developers. With this cross-platform capability, Java becomes a common choice for cross-platform applications and services development.
Area of comparison
C#, F#, VB, C++, PHP, Ruby, Python, and more
Java, Kotlin, Clojure, Groovy, Scala, and more
Microsoft Visual Studio, Rider, MonoDevelop, and Visual Studio Code
Eclipse, IntelliJ Idea, Oracle NetBeans, and Oracle JDeveloper
Visual Studio Code, Webstorm, and Atom
ASP.NET Core Razor/Blazor
Only supports server-side rendering such as JSP or Thymeleaf
React, Angular, or Vue
WinForms, Win UI, WPF, UWP, and more
Swing, JavaFX, and more
Electron, NW.js, and more
React Native, Cordova, Iconic, and more
The Spring Framework
Java is built around the JVM while .NET is built around the Common Language Runtime (CLR) and the Common Type System (CTS). With the CTS and CLR as the core of a .NET implementation, it supports multiple languages naturally with the capability to share a Base Class Library (BCL) in all supported languages.
While there are multiple languages that use the JVM as the abstraction layer for cross-platform capability, the interoperation between Java-derived languages is not at the same level as .NET languages. All .NET languages are built on one architecture and share the same BCL, while Java languages, such as Java, Kotlin, or Scala, are developed separately for very different purposes.
This comparison helps us to choose or evaluate a tech stack for cross-platform development. As a .NET MAUI developer, this analysis can help you understand your choice better. To understand where .NET MAUI is located in the .NET ecosystem, let’s have a quick overview of the history of the .NET landscape in the next section.
Before we dive into the details of .NET MAUI, let’s have an overview of the .NET landscape. This section is relevant if you are new to .NET. If you are a .NET developer, you can skip this section.
Since Microsoft introduced the .NET platform, it has evolved from a proprietary software framework for Windows to a cross-platform and open source platform.
There are many ways to look at the .NET technology stack. Basically, it contains the following components:Common infrastructure (Compiler and tools suite)BCLsRuntime (Windows Runtime (WinRT) or Mono)
The history of .NET history begins with .NET Framework. It is a proprietary software framework developed by Microsoft that runs primarily on Microsoft Windows. .NET Framework started as a future-oriented application framework to standardize the software stack in the Windows ecosystem. It is built around a Common Language Infrastructure (CLI) and C#. Even though the primary programming language is C#, it is designed to be a language-agnostic framework. Supported languages can share the same CTS and CLR. Most Windows desktop applications are developed using .NET Framework, and it is shipped as a part of the Windows operating system.
The first attempt to make .NET an open source framework was made by a company called Ximian. When the CLI and C# were ratified by ECMA in 2001 and ISO in 2003, it provided a potential opportunity for independent implementations.
In 2001, the open source project Mono was launched, aimed at implementing .NET Framework on Linux desktop software.
Since .NET Framework was a proprietary technology at that time, .NET Framework and Mono had their own compiler, BCL, and runtime.
Over time, Microsoft moved toward open source, and .NET source code became open source. The Mono project adopted some source code and tools from the .NET code base.
At the same time, Mono projects went through many changes as well. At the time that Mono was owned by the Xamarin company, Xamarin developed the Xamarin platform based on Mono to support the .NET platform on Android, iOS, Universal Windows Platform (UWP), and macOS. In 2016, Microsoft acquired Xamarin, which became the cross-platform solution in the .NET ecosystem.
Before the acquisition of Xamarin, Microsoft has already started work to make .NET a cross-platform framework. The first attempt was the release of .NET Core 1.0 in 2016. .NET Core is a free and open source framework, available for Windows, Linux, and macOS. It can be used to create modern web apps, microservices, libraries, and console applications. Since .NET Core applications can run on Linux, we can build microservices using containers and cloud infrastructure.
After .NET Core 3.x was released, Microsoft worked toward integrating and unifying .NET technology on various platforms. This unified version was to supersede both .NET Core and .NET Framework. To avoid confusion with .NET Framework 4.x, this unified framework was named .NET 5. Since .NET 5, a common BCL can be used on all platforms. In .NET 5, there are still two runtimes, which are WinRT (used for Windows) and the Mono runtime (used for mobile and macOS).
In this book, we use will the .NET 6 release.
Before the .NET 5 releases, with .NET Framework, Mono, and .NET Core, we had a different subset of BCLs on different platforms. In order to share code between different runtimes or platforms, a technique called Portable Class Libraries (PCLs) was used. When you create a PCL, you have to choose a combination of platforms that you want to support. The level of compatibility choices is decided by the developers. If you want to reuse any PCL, you must carefully study the list of platforms that can be supported.
Even though a PCL provides a way to share code, it cannot resolve compatibility issues nicely. To overcome the compatibility issues, Microsoft introduced .NET Standard.
.NET Standard is not a separate .NET release but instead a specification of a set of .NET APIs that must be supported by most .NET implementations (.NET Framework, Mono, .NET Core, .NET 5 or 6, and so on).
After .NET 5 and later versions, a unified BCL is available, but .NET Standard will be still part of this unified BCL. If your applications only need to support .NET 5 or later, you don’t really need to care too much about .NET Standard. However, if you want to be compatible with old .NET releases, .NET Standard is still the best choice for you. We will use .NET Standard 2.0 in this book to build our data model, since this is a version that can support most existing .NET implementations and all future .NET releases.
There will be no new versions of .NET Standard from Microsoft, but .NET 5, .NET 6, and all future versions will continue to support .NET Standard 2.1 and earlier. Table 1.3 shows the platforms and versions that .NET Standard 2.0 can support, and this is also the compatible list for our data model in this book.
.NET and .NET Core
2.0, 2.1, 2.2, 3.0, 3.1, 5.0, and 6.0
.NET Framework 1
4.6.1 2, 4.6.2, 4.7, 4.7.1, 4.7.2, and 4.8
5.4 and 6.4
10.14 and 12.16
3.8 and 5.16
8.0 and 10.0
Table 1.3: .NET Standard 2.0-compatible implementations
The open-source project KPCLib is a .NET Standard 2.0 library, and we will use it in our app. In Table 1.3, we can see that .NET Standard libraries can be used in both Xamarin and .NET MAUI apps.
As we mentioned in an earlier section, Xamarin was part of the Mono project and was an effort to support .NET on Android, iOS, and macOS. Xamarin.Forms is a cross-platform UI framework from Xamarin. .NET MAUI is an evolution of Xamarin.Forms. Before we discuss .NET MAUI and Xamarin.Forms, let us review the following diagram of Xamarin implementation on various platforms.
Figure 1.1: Xamarin implementations
Figure 1.1 shows the overall architecture of Xamarin. Xamarin allows developers to create native UIs on each platform and write business logic in C# that can be shared across platforms.
On supported platforms, Xamarin contains bindings for nearly the entire underlying platform SDKs. Xamarin also provides facilities for directly invoking the Objective-C, Java, C, and C++ libraries, giving you the power to use a wide array of third-party code. You can use existing Android, iOS, or macOS libraries written in Objective-C, Swift, Java, or C/C++.
The Mono runtime is used as the .NET runtime on these platforms. It has two modes of operation – Just-in-Time (JIT) and Ahead-of-Time (AOT). JIT compilation generates code dynamically as it is executed. In AOT compilation mode, Mono precompiles everything, so it can be used on operating systems where dynamic code generation is not possible.
As we can see in Figure 1.1, JIT can be used on Android and macOS, while AOT is used for iOS where dynamic code generation is not allowed.
There are two ways to develop native applications using Xamarin.
You can develop native applications just like Android, iOS, or macOS developers, using native APIs on each platform. The difference is that you use .NET libraries and C# instead of the platform-specific language and libraries directly. The advantage of this approach is you can use one language and share a lot of components through the .NET BCL, even if you work on different platforms. You can also leverage the power of underlying platforms like native application developers.
If you want to reuse code on the user interface layer, you can use Xamarin.Forms instead of the native UI.
Xamarin.Android, Xamarin.iOS, and Xamarin.Mac provide a .NET environment that exposes almost the entire original SDK capability on their respective platforms. For example, as a developer, you have almost the same capability with Xamarin.Android as you do with the original Android SDK. To further improve code sharing, an open source UI framework, Xamarin.Forms, was created. Xamarin.Forms includes a collection of cross-platform user interface components. The user interface design can be implemented using the XAML markup language, which is similar to Windows user interface design in WinUI or WPF.
Since Xamarin exposes the capability of the underlying platform SDKs, you can access device features using the .NET API. However, the implementation is platform-specific. For example, when you use a location service on Android or iOS, the .NET API can be different. To further improve code sharing across platforms, Xamarin.Essentials can be used to access native device features. Xamarin.Essentials provides a unified .NET interface for native device features. If you use Xamarin.Essentials instead of native APIs, your code can be reused across platforms.
Some examples of functionalities provided by Xamarin.Essentials include the following:Device infoThe filesystemAn accelerometerA phone dialerText-to-speechScreen lock
Using Xamarin.Forms together with Xamarin.Essentials, most implementations, including business logic, user interface design, and some level of device-specific features, can be shared across platforms.
Most modern application development on various platforms uses the Model-View-Controller (MVC) design pattern. To separate the business logic and user interface design, there are different approaches used on Android, iOS/macOS, and Windows. On all the platforms involved, even though the programming languages used are different, they all use XML-based markup language to design user interfaces.
On an iOS/macOS platform, developers can use Interface Builder in XCode to generate .storyboard or .xib files. Both are XML-based script files used to keep user interface information, and this script is interpreted at runtime together with Swift or Objective-C code to create the user interface. In 2019, Apple announced a new framework, SwiftUI. Using SwiftUI, developers can build user interfaces using the Swift language in a declarative way directly.
On the Android platform, developers can use Layout Editor in Android Studio to create a user interface graphically and store the result in layout files. The layout files are in the XML format as well and can be loaded at runtime to create the user interface.
On the Windows platform, Extensible Application Markup Language (XAML) is used in user interface design. XAML is an XML-based language used for user interface design on the Windows platform. For a WPF or UWP application, the XAML Designer can be used for user interface design. In .NET MAUI, the XAML-based UI is the default application UI. Another pattern, the Model View Update (MVU) pattern, can also be used. In the MVU pattern, the user interface is implemented in C# directly without XAML. The coding style of MVU is similar to SwiftUI.
Even though SwiftUI on Apple platforms or MVU in .NET MAUI can be used, but the classic user interface implementation is the XML-based markup language. Let us do a comparison in Table 1.4.
.NET MAUI Blazor
Table 1.4: A comparison of user interface design
In Table 1.4, we can see a comparison of user interface design on different platforms.
.NET MAUI and Xamarin.Forms use a dialect of XAML to design user interfaces on all supported platforms. For .NET MAUI, we have another choice for user interface design, which is Blazor. We will discuss Blazor later in this chapter.
In Xamarin.Forms, we create user interfaces in XAML and code-behind in C#. The underlying implementation is still the native controls on each platform, so the look and feel of Xamarin.Forms applications are the same as native ones.
Some examples of features provided by Xamarin.Forms include the following:XAML user interface languageData bindingGesturesEffectsStyling
Even though we can share almost all UI code with Xamarin.Forms, we still need to handle most of the resources used by an application in each platform individually. These resources could be images, fonts, or strings. In the project structure of Xamarin.Forms, we have a common .NET standard project and multiple platform-specific projects. Most of the development work will be done in the common project, but the resources are still handled in the platform-specific projects separately.
With the .NET unification, Xamarin has become a part of the .NET platform, and Xamarin.Forms integrates with .NET in the form of .NET MAUI.
.NET MAUI is a first-class .NET citizen with the Microsoft.Maui namespace.
Making the move to .NET MAUI is also an opportunity for Microsoft to redesign and rebuild Xamarin.Forms from the ground up and tackle some of the issues that have been lingering at a lower level. Compared to Xamarin.Forms, .NET MAUI uses a single project structure, supports hot reloads better, and supports MVU and Blazor development patterns.
From Figure 1.2, we can see that there is a common BCL for all supported operating systems. Under the BCL, there are two runtimes, WinRT and the Mono Runtime, according to the platform. For each platform, there is a dedicated .NET implementation to provide full support for native application development.
Figure 1.2: .NET MAUI architecture
Comparing to Xamarin.Forms, we can see from Table 1.5, there are many improvements in .NET MAUI.
.NET MAUI uses a single project structure to simplify project management. We can manage resources, dependency injection, and configurations in one location instead of managing them separately per platform.
.NET MAUI is fully integrated as part of .NET, so we can create and build projects using the .NET SDK command line. In this case, we have more choices in terms of development environments.
One location for all platforms
Managed per platform
Fully integrated with .NET
Namespace in Microsoft.Maui and other IDEs can be chosen beside Visual Studio.
Command-line support. We can create, build, and run in a console:dotnet new maui dotnet build -t:Run -f net6.0-android dotnet build -t:Run -f net6.0-ios dotnet build -t:Run -f net6.0-maccatalyst
Namespace in Xamarin.Forms and it uses Visual Studio as an IDE
Design improvementConfiguration through .NET Generic HostDependency injection supportConfiguration scattered in different locations
A modern type of UI implementation
Support through BlazorWebView
Table 1.5: .NET MAUI improvement
In Table 1.5, we can see that .NET MAUI supports application configuration using .NET generic host, can work with multiple IDE environments, supports dependency injection, and can use the MVVM toolkit, etc. It also supports the MVU pattern and Blazor Hybrid UI. Next, we will look at the Blazor Hybrid app.
In Table 1.4, where we compared the user interface design options on different platforms, we mentioned that there is another way to design cross-platform user interfaces in .NET MAUI, which is Blazor.
Released in ASP.NET Core 3.0, Blazor is a framework for building an interactive client-side web UI with .NET. With .NET MAUI and Blazor, we can build cross-platform apps in the form of Blazor Hybrid apps. This way, the boundary between a native application and a web application becomes blurred. .NET MAUI Blazor Hybrid apps enable Blazor components to be integrated with native platform features and UI controls. The Blazor components have full access to the native capabilities of a device.
The way to use the Blazor web framework in .NET MAUI is through a BlazorWebView component. .NET MAUI Blazor enables both native and web UIs in a single application, and they can co-exist in a single view. With .NET MAUI Blazor, applications can leverage the Blazor component model (Razor components), which uses HTML, CSS, and the Razor syntax. The Blazor part of an app can reuse components, layouts, and styles that are used in an existing regular web app. BlazorWebView can be composed alongside native elements; additionally, they leverage platform features and share states with their native counterparts.
To design the user interface of your .NET MAUI application, you have a few choices for implementation:XAML
„Ich bin wirklich begeistert. Auch die Möglichkeit des zusätzlichen eReaders im Abo finde ich persönlich toll.”
„Die Auswahl von Legimi ist großartig.”
„Der Leser findet seine E-Books/Hörbücher sehr schnell und sie lassen sich, ob mit oder ohne Internetverbindung problemlos öffnen.”
Wurm sucht Buch
„Ich finde das Angebot von Legimi richtig toll.”
„Besonders schön finde ich die große Auswahl an möglichen Abo-Modellen und besonders die Abos mit eReader.”
Miss Foxy Reads
„Ich muss sagen, dass ich von dem E-Reader mehr als positiv überrascht bin.”
„Das ist wirklich eine großartige Idee und mal was ganz Anderes.”
Mikka liest das Leben...
Tausende von E-Books und Hörbücher
Ihre Zahl wächst ständig und Sie haben eine Fixpreisgarantie.
Sie haben über uns geschrieben:
Dabei gewährt der E-Book-Anbieter größtmögliche Freiheiten
Größter Vorteil die Möglichkeit, in der aktuellen App komfortabel zwischen E-Book und Hörbuchversion eines Titels
Spotify for E-Books