Getting Started With MAUI Xamarin Forms Application Using Visual Studio 2019 Preview 16.10

Introduction

 
Xamarin was released 10 years before, it has helped many developers to develop mobile apps with multi-platform with native feel but now it’s time to say goodbye to Xamarin and happily welcome .NET MAUI (Multi-platform App UI).
 
Let’s go back a bit in time first, the name Xamarin comes from the name of the Tamarin monkey, replacing the leading T with an X.
  • On May 16, 2011, Miguel de Icaza announced on his blog that Mono would be developed and supported by Xamarin.
  • In 2016, Xamarin was acquired by Microsoft, after that Xamarin was open source and removed payment options. This helped the adoption of Xamarin. Microsoft then integrated Xamarin into Visual Studio. All the mobile development companies started using visual studio in both Windows and Mac, it is a great improvement after Microsoft acquired Xamarin.
 
Every developer and company should be very clear, Microsoft isn’t throwing away Xamarin. Mono won’t be going anywhere yet. .NET MAUI is the next generation of Xamarin Forms, intended to allow developers to build an app once in a single Visual Studio project with a single codebase, targeting any supported device. The aim is to deliver a simplified project structure. Rather than a single solution with separate projects for each platform you’re targeting, with MAUI a single project will contain the resources needed to target specific platforms.
 
David blog helped me to understand more about setup. In this article, I will explain how to create the first hello world app using the MAUI application.
 

Visual Studio 2019 Preview

 
Visual studio 2019 early access preview version you can download from the Microsoft website. This release is not "go-live" so not recommended to use on production computers or for creating production code.
 
 

Verify MAUI SDK Installation

 
Previously installed, all the required SDK is manual, Now, Jonathan Dick has put together a useful dotnet tool that evaluates your system and gathers as many of the required pieces as it can. To get started, install maui-check globally from the command line.
 
Open Run CMD as an Administrator mode and install the MAUI Check tool using the below line
 
dotnet tool install -g Redth.Net.Maui.Check
 
 
After MAUI check tool install, will start to execute the below line of code to verify the SDK installation
 
maui-check
 
 
You need to install the Preview 2 version of the dotNet 6 SDK, as well as the Preview 2 Android, iOS, and Mac Catalyst workloads so if you are getting any error alert saying SDK is missing, keep give input as “Yes” for install the missing SDK and wait for the “Congratulations, everything looks great!” message, that means, you are ready to start the new MAUI application.
 
 

Create a new MAUI Mobile application

 
Visual Studio 2019 Preview version default available MAUI project template and select Create a new project, otherwise, you can download the default project sample available in the Git MAUI official repository.
 
 
Search for "MAUI" or choose Mobile from the Project type menu. Select the .Net Maui Mobile application
 
 
Choose a project name – the example uses "HelloMaui" and click on Create
 
 
Once you click on create button automatically solutions will generate. Before building the solutions, Let quickly understand all the folders and files.
 

MAUI Application Startup

 
Multi-targeted .NET MAUI Single Project for iOS and Android. .NET MAUI starts every application using Microsoft.Extensions HostBuilder.
 
 
Each platform has a different starting point, and the consistent point of entry for your application is Startup.cs will allow the following
  • It includes a Configure method to pipe service registration, handler registration
    1. public class Startup: IStartup {  
    2.     public void Configure(IAppHostBuilder appBuilder) {  
    3.         appBuilder.UseMauiApp < App > ();  
    4.     }  
    5. }  
  • Application customization processes, this is where you can do such things as register fonts and register compatibility for Xamarin.Forms renderers or your own custom renderers, By default, if you don't want to customize anything special, ignore this
    1. appBuilder  
    2. .UseFormsCompatibility()  
    3. .UseMauiApp<App>()  
    4. .ConfigureFonts(fonts => {  
    5.    fonts.AddFont("ionicons.ttf""IonIcons");  
    6. })  

MAUI Application Life cycle

 
.Net MAUI Application preview 3 Support to manage the life cycle of the application. Life Cycle API included in Startup.cs file and will write platform-specific.
  1. public void Configure(IAppHostBuilder appBuilder) {  
  2.     appBuilder.ConfigureLifecycleEvents(lifecycle => {  
  3.         #if ANDROID  
  4.         lifecycle.AddAndroid(d => {  
  5.             d.OnBackPressed(activity => {  
  6.                 System.Diagnostics.Debug.WriteLine("Back button pressed!");  
  7.             });  
  8.         });  
  9.         #endif  
  10.     });  
  11. }  

MAUI App.Xaml

 
In App.Xaml.cs project inherited by Microsoft.Maui.Controls.Application and make sure MAUI namespace added specify common Image directory for all the platform
  1. using Microsoft.Maui;  
  2. using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;  
  3. namespace HelloMaui {  
  4.     public partial class App: Microsoft.Maui.Controls.Application {  
  5.         public App() {  
  6.             Initialize Component();  
  7.         }  
  8.         public override IWindow Create Window(IActivationState activationState) {  
  9.             Microsoft.Maui.Controls.Compatibility.Forms.Init(activationState);  
  10.             this.On < Microsoft.Maui.Controls.PlatformConfiguration.Windows > ().SetImageDirectory("Assets");  
  11.             return new MainWindow();  
  12.         }  
  13.     }  
  14. }  
In App.Xaml, will work same like xamairn form and will add the all the common resources and style
  1. <Application  
  2.     xmlns="http://xamarin.com/schemas/2014/forms"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.     xmlns:local="clr-namespace:HelloMaui"  
  5.       x:Class="HelloMaui.App">  
  6.     <Application.Resources>  
  7.         <ResourceDictionary>  
  8.             <!-- Add any additional resources here. -->  
  9.             <Color x:Key="PageBackgroundColor">White</Color>  
  10.             <Color x:Key="PrimaryTextColor">Black</Color>  
  11.             <Color x:Key="GlyphColor">#2B0B98</Color>  
  12.             <Style TargetType="Label">  
  13.                 <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />  
  14.             </Style>  
  15.             <Style TargetType="Label" x:Key="Glyph">  
  16.                 <Setter Property="TextColor" Value="{DynamicResource GlyphColor}" />  
  17.                 <Setter Property="FontFamily" Value="IonIcons" />  
  18.                 <Setter Property="FontSize" Value="32" />  
  19.             </Style>  
  20.         </ResourceDictionary>  
  21.     </Application.Resources>  
  22. </Application>  
Application icon
 
The application icon is one great improvement, the AppIcon folder will be available under the MAUI project and it is just a single SVG, Looks like Maui will just automatically take care of generating all the different icon sizes for different devices.
 
 

MAUI Design Screen

 
AssemblyInfo.cs file is removed from solutions. Main Page Name not changed. The xaml look like below and you can observe below code the concept of SemanticProperties is added
  1. <ContentPage  
  2.     xmlns="http://xamarin.com/schemas/2014/forms"  
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.       x:Class="HelloMaui.MainPage"  
  5.       BackgroundColor="{DynamicResource PageBackgroundColor}">  
  6.     <ScrollView>  
  7.         <StackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">  
  8.             <Label Text="Getting started with MAUI Xamarin Forms Application using Visual Studio 2019 Preview 16.10"  
  9.                SemanticProperties.HeadingLevel="Level1"  
  10.                FontSize="32"  
  11.                HorizontalOptions="CenterAndExpand" />  
  12.             <Label Text="Welcome to .NET MAUI!"  
  13.                HorizontalOptions="CenterAndExpand" />  
  14.             <Image  
  15.                Source="dotnet_bot.png"  
  16.                SemanticProperties.Description="Cute dotnet bot waving hi to you!"  
  17.                Margin="40,0" />  
  18.         </StackLayout>  
  19.     </ScrollView>  
  20. </ContentPage>  
In MainPage.xaml.cs removed using Xamarin.Forms, add an inheritance from IPage, added the Maui namespace
  1. using System;  
  2. using Microsoft.Maui;  
  3. using Microsoft.Maui.Controls;  
  4. using Microsoft.Maui.Controls.Xaml;  
  5. namespace HelloMaui {  
  6.     [XamlCompilation(XamlCompilationOptions.Compile)]  
  7.     publicpartialclassMainPage: ContentPage, IPage {  
  8.         public Main Page() {  
  9.             Initialize Component();  
  10.         }  
  11.         public IView View {  
  12.             get => (IView) Content;  
  13.             set => Content = (View) value;  
  14.         }  
  15.     }  
  16. }  

Restore MAUI Nuget package

 
Before you will build and run solutions make sure NuGet packages referenced in the configuration file.
 
Right Click on Solutions > Open Folder in File Explorer
 
 
Make sure global.json and NuGet.config file available before building the solutions global.json file look like below,
  1. {  
  2.     "sdk": {  
  3.         "version""6.0.100-preview.3.21202.5",  
  4.         "rollForward""disable",  
  5.         "allowPrerelease"true  
  6.     }  
  7. }  
Nuget.Config looks like below and has the reference key for dotnet6,Xamarin and public.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.    <configuration>  
  3.       <packageSources>  
  4.          <clear />  
  5.             <!-- ensure only the sources defined below are used -->  
  6.             <add key="dotnet6" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet6/nuget/v3/index.json" />  
  7.             <add key="xamarin" value="https://pkgs.dev.azure.com/azure-public/vside/_packaging/xamarin-impl/nuget/v3/index.json" />  
  8.             <add key="public" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-public/nuget/v3/index.json" />  
  9.          </packageSources>  
  10. <config>  
  11. <add key="globalPackagesFolder" value="packages" />  
  12. </config>  
  13. </configuration>  

Build and Run MAUI Android App

 
Inside Android Folder, not find any MainActivity.cs, only available Resource folder and Androidmanifest file.You will need the Android SDK installed as well as Android SDK Platform 30. When you did a verified MAUI check, SDK was downloaded and installed, if no, a simple way to get this is to install the current Xamarin workload and go to Tools > Android > Android SDK Manager from within Visual Studio.
 
 

Build and Run Application

 
Try to click on Run Icon, if you are getting any issue, Right-click on the solution and Select in the open terminal
 
 
Build the MAUI Project, run the below comment in the Visual studio terminal
 
dotnet build HelloMaui
 
You can launch the Android project to an attached emulator or device
 
dotnet build HelloMaui -t:Run -f net6.0-android
 
 
The build and run the success, you will get output like below
 
 

Build and Run iOS Project in window machine

 
The build and debug .NET 6 iOS applications from Visual Studio 2019 preview. iOS folder is very clean, you can find Appdelegate.cs, Entitlements.plist, info.plist, Launchscreen.storyboard and Program.CS(Main.cs gets renamed Program.cs)
 
 
If while connecting Visual Studio to your Mac through XMA you are prompted to install a different version of the SDK, you can ignore that since it refers to the legacy one. Make sure Xcode 12.4 installed in mac machine,
 
 
You can launch the iOS project to an attached iOS Simulator. Initially not working for me run the ios app in windows after that start working
 
dotnet build HelloMaui -t:Run -f net6.0-ios
 
The output looks like below in ioS
 
 

Summary

 
In this article, you learned about the setup Maui development preview environment and you said hello to Maui, Will share details in the next article for setup Visual Studio Code and Visual Studio for Mac. If you have any questions/ feedback/ issues, please write in the comment box.