Xamarin MAUI: First iOS, Android and Windows Mobile App using Visual studio 2022

Posted by Suthahar Jegatheesan on Tuesday, November 23, 2021 18 comments

.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.

NET MAUI is the .NET Multi-platform App UI, a framework for

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.
  1. Visual Studio
  2. Visual Studio for Mac
  3. 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.

Build your first .NET MAUI app

After installation success, Open the Visual Studio IDE

What .NET MAUI Means for Xamarin Developers

In this sample demo application, I am  going to show Android, iOS, and Windows app using MAUI, so Get started with “Create New Project”

What is .NET MAUI, and How Does it Differ from Xamarin?

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 ++.

Microsoft Replaces Xamarin Toolkits with New .NET MAUI

In the Configure your new project window, name your project, choose your project location where you need to save, and click the Create button

The future of Xamarin: .NET MAUI

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.

Creating first .Net MAUI project

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.

Creating new .NET 6 MAUI project

.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

.NET MAUI: How MAUI Will it impact on Xamarin Native applications?

Application Class

The App class derives from the Application class

Workload Repair failed: `dotnet workload repair - MAUI



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.


How do I determine where the error is when I check MAUI compatibility with maui-check?How do I determine where the error is when I check MAUI compatibility with maui-check?

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 

  1. Connect same wifi network
  2. Download and install Visual Studio 2022 with MAUI

Mac Configuration

  1. Connect same wifi network
  2. Install Xcode 13.1 ++
  3. On Network preference > switch on Remote login
Pair to Mac machine from windows

Pair to Mac for Xamarin.iOS Development

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



MAUI Windows device

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

Tags

Suthahar Jegatheesan is Mobile and Cloud Specialist/Architect and he has 15+ years of IT experience as a Technology Consultant /Programmer/Developer in IT industry. Suthahar is an industry luminary focused on AI, Computer Vision, Bot, Machine Learning, UWP, Azure, Xamarin and Web Emerging User Experiences as subject matter expert (SME) in implementation, architecture, development and administration.
Facebook
Google+
Linkedin
Pinterest
Delicious

18 comments:

  1. Suthahar JegatheesanDecember 13, 2021 at 1:23 PM

    Hi, if any one getting issue - VS 2022 MAUI template is missing measns
    Open CMD
    Run following cmd command

    dotnet tool install -g Redth.Net.Maui.Check
    maui-check

    Repeated again, if MAUI didn't appear in VS 2022

    ReplyDelete
  2. Suthahar JegatheesanDecember 15, 2021 at 5:17 PM

    if any one getting Workload installation failed: The JSON value could not be converted to
    this issue is likely to occur when you have previously had Preview 6 installed.

    The recommended fix is to manually delete everything under "C:\Program Files\dotnet\metadata\workloads" and then install the workloads manually followed by another run at maui-check:

    dotnet workload install maui

    after that

    maui-check

    hope this will work

    ReplyDelete
  3. AnonymousDecember 23, 2021 at 1:37 PM

    Hi, I am having issues when it comes to publishing maui apps for deployment? I cannt find a way to create a Windows package without it erroring every time.

    ReplyDelete
  4. UnknownDecember 28, 2021 at 6:45 PM

    Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. Best Coding Android Wallpapers

    ReplyDelete
  5. Mehak KhanJanuary 3, 2022 at 1:24 PM

    Thanks a lot for sharing this excellent info! I am looking forward to seeing more posts by you as soon as possible! I have judged that you do not compromise on quality. android hidden menu lg

    ReplyDelete
  6. DuckyJanuary 16, 2022 at 6:08 PM

    A Universityachieved one hour efficient each day for IT support staff, limiting deferrals in arriving at associates to give work guidelines or resolve issues.
    sonnerie

    ReplyDelete
  7. DuckyJanuary 23, 2022 at 7:57 PM

    In this way, the augmentation in effectiveness and potential collaboration re-planning which can be cultivated will determinedly influence buyer dedication levels.e usage of met courses of action moreover engages the workforce to be more helpful through limits, for instance, flexible induction to arrange dial extensions and conferencing. phone case manufacturer

    ReplyDelete
  8. mubeenfaisalJanuary 27, 2022 at 5:28 PM

    it was a wonderful chance to visit this kind of site and I am happy to know. thank you so much for giving us a chance to have this opportunity.. https://casas-de-apuestas.mx/betcris/mobile-app/

    ReplyDelete
  9. mubeenJanuary 27, 2022 at 7:01 PM

    it was a wonderful chance to visit this kind of site and I am happy to know. thank you so much for giving us a chance to have this opportunity.. app codere

    ReplyDelete
  10. Arko AnikJanuary 31, 2022 at 4:13 AM

    Wonderful Information! Your blog is very nice, such useful information you are sharing. I really like your blog. Financial Advisors Financial Counseling Columbus Financial & Success Coach Money Coach Click Here

    ReplyDelete
  11. Jack D.February 4, 2022 at 8:46 PM

    Nice post. This content is simply awesome keep going Please visit our site for startup funding.
    Satta king fast
    Satta result

    ReplyDelete
  12. Jack D.February 5, 2022 at 10:03 PM

    Nice post. This article amazed me and it really helped me a lot. If you are interested please visit us. Thank you!
    Satta king fast
    Satta result

    ReplyDelete
  13. FinanceFebruary 6, 2022 at 10:44 PM

    Nice post. Thank you for your information. I liked the way you wrote the article. It was very straightforward and your knowledge on the subject is fantastic. Financial Advisors Financial Counseling Columbus Financial & Success Coach Money Coach Click Here



    ReplyDelete
  14. Kelley ManningFebruary 8, 2022 at 3:22 PM

    download free ringtones click here
    klingeltonekostenlos with a huge ringtone store

    ReplyDelete
  15. FinanceFebruary 9, 2022 at 3:45 AM

    Good job in presenting the correct content with the clear explanation. The content looks real with valid information. Good Work and thank you for sharing the information with us. Money Management Personal Finance Columbus Financial & Success Coach Financial Life Coach Click Here

    ReplyDelete
  16. Columbus FinancialMarch 2, 2022 at 11:25 PM

    Your blog is very nice, such useful information you are sharing. I really like your blog. Financial Plan Financial Advice Columbus Financial & Success Coach Financial Coaching services Go Here

    ReplyDelete
  17. PUBG LoverMarch 3, 2022 at 1:09 AM

    What a fantabulous post this has been. Never seen this kind of useful post. I am grateful to you and expect more number of posts like these. Thank you very much. Disawar satta

    ReplyDelete
  18. asadMarch 22, 2022 at 5:51 PM

    I just found this blog and have high hopes for it to continue. Keep up the great work, its hard to find good ones. I have added to my favorites. Thank You. mejores casas de apuestas méxico

    ReplyDelete

Featured Post

Improving C# Performance by Using AsSpan and Avoiding Substring

During development and everyday use, Substring is often the go-to choice for string manipulation. However, there are cases where Substring c...

MSDEVBUILD - English Channel

MSDEVBUILD - Tamil Channel

Popular Posts