.Net MAUI is a cross-platform framework for creating native mobile and desktop app with c# and Xaml. In my previous article, we did warn welcome to Dotnet MAUI and shared information about the History of Xamarin.
MAUI as everybody already knows is a name for a new upgrade solution as a Multi-platform APP UI framework for building native cross-platform apps with .Net for android, iOS, macOS, and Windows. I am going to show how to create, build and debug the First MAUI application using Visual Studio 2022.
MAUI and other third-party framework teams started working on support for upgrading the app and old NuGet package to MAUI. MAUI will also provide you support for building the apps in different modern patterns and frameworks MVVM, MVU and RxUI.
.NET MAUI IDE
Microsoft provided 3 fantastic IDE Tools to create and develop apps with .NET MAUI and the happy news is MAUI is an open source.
Visual Studio
Visual Studio for Mac
Visual Studio Code
Visual Studio 2022
On Windows or Mac machines you can use Visual Studio Code or Visual Studio/ VS for Mac for development. You will need the visual studio 2022 17.1.0 preview version. Microsoft released Visual studio 2022 version 17.0 in Nov month, but MUAI is still in preview so you can start to install visual studio 2022 17.1.0 preview version to create your first MUAI application.
After installation success, Open the Visual Studio IDE
In this sample demo application, I am going to show Android, iOS, and Windows app using MAUI, so Get started with “Create New Project”
On the new Project template, select project type as an” MAUI” and you will all the MAUI preview template, if you are not finding the MAUI template means, you have not installed the latest preview version so make sure you have installed the latest preview version 17.1 ++.
In the Configure your new project window, name your project, choose your project location where you need to save, and click the Create button
MAUI Solutions Structure
After clicking on Create, MAUI solutions default template loaded with all the related MAUI NuGet packages. There is a single project with different platform folders and resources.
MainPage.XAML
The main page, whichever design, will support all other platforms as well, and also Main Page XAML build action modified in MAUI app.
Main Page.Xaml build action modified with MAUIXAML, make sure Xaml Build action is correct.
Right click on the XAML page >>Properties>>BuildAction of XAML Page to MauiXaml.
.NET Generic Host
The Worker Service templates, create a .NET Generic Host, HostBuilder. The Generic Host can be used with other types of .NET applications, such as Console apps.
Maui Program class enables apps to be initialized from a single location, and provides the ability to configure fonts, services, and third-party libraries.
iOS, Android, windows, and all the platform entry point calls a CreateMauiApp method of the static MauiProgram class that creates and returns a MauiApp, while lunch the application
Application Class
The App class derives from the Application class
Resources
The resources are a good improvement in MAUI. The AppIcon, image and font 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.
Run IOS App
Building MAUI iOS applications requires access to Apple's build tools, which only run on a Mac. Because of this, Visual Studio 2022 must connect to a network-accessible Mac to build iOS applications.
You must install the Xcode 13.1++ version on the Mac machine before connecting Visual Studio 2022 to the Windows machine.
Windows Configuration
Connect same wifi network
Download and install Visual Studio 2022 with MAUI
Mac Configuration
Connect same wifi network
Install Xcode 13.1 ++
On Network preference > switch on Remote login
Pair to Mac machine from windows
Program.cs
Program class file is the main entry file on IOS app and executes the main method of the application, here you can define your custom app delegate file and other configuration files
Appdelegate.cs
Each platform will call MauiProgram static class for initialize. On iOS will call as below
You can select iOS simulator and device and click Run icon for executing the application
The out as like below
Run Android App
The android application, MainApplication.cs will execute first, it will call the MauiProgram static class initially as like below
You can select android simulator or device as below, press F5 to run the application
The output like below
Run Windows App
The Windows application executes App.xaml.cs file first, it will call the MauiProgram static class initially as like below
Select the device and run the Application
Demo Video
I have shared a recorded demo video with two versions, English and Tamil. It will help you to understand more about creating, building, and debuging the First MAUI application.
English Demo Video
Tamil Demo Video
Hope this article is very useful for you, If you have any questions/ feedback/ issues, please write in the comment box
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 has been acquired by Microsoft, after that Xamarin is open source and removed payment options. This helped the adoption of Xamarin. Microsoft then integrated Xamarin into Visual Studio. All the mobile development company started using visual studio in both Windows and Mac, it is great improvement after Microsoft acquires 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.
Davidblog 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 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 was install 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 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 the 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
public class Startup : IStartup
{ public void Configure(IAppHostBuilder appBuilder) { appBuilder .UseMauiApp<App>();
} }
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
appBuilder
.UseFormsCompatibility()
.UseMauiApp<App>()
.ConfigureFonts(fonts => {
fonts.AddFont("ionicons.ttf", "IonIcons");
})
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.
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
using Microsoft.Maui; using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;
namespace HelloMaui
{
public partial class App : Microsoft.Maui.Controls.Application
{
public App()
{
InitializeComponent();
} public override IWindow CreateWindow(IActivationState activationState)
The application icon is one great improvement, the AppIcon folder will 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 looks like below and you can observe below code the concept of SemanticProperties is added
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 download 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.
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
Once the build is successful, the Android emulator / on-device application will run 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
Once the build is successful, the iOS simulator/ Device will show the output like below
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
Enable GingerCannot connect to Ginger Check your internet connection or reload the browserDisable in this text fieldRephraseRephrase current sentenceEdit in Ginger×