MAUI: Hello World

Bogusław Błoński
4 min readJan 20, 2022

1.1 MAUI: Introduction to .NET MAUI- creating project and run.

Tools

Download and install Visual Studio 2022:

In Visual Studio Installer choose: Mobile development with .NET

ensure that .NET MAUI is enabled in Optional

Visual Studio Installer

Create new project: MAUI

Open Visual Studio 2022 on your right you should see “Create new project”:

Visual Studio 2022: Create a new project

Use search entry to find “maui” project

Visual Studio 2022: Create a new project

Name project and select location and “Create” project

Visual Studio 2022: Configure your project

Success project view

Visual Studio 2022: project view

Single project

Single project is unified way to share common code and resources as fonts, images, icons and other files.

Single project solution gives also easy way possibility to support platform specific / operation specific cases.

Dependencies

How you can see bellow One project and in Dependencies there are libraries related with Android, iOS, Mac Catalyst, Windows they enable work on those OS (operation systems/platforms).

Visual Studio: Solution Explorer

Platforms

In “Platforms” Folder(Catalogue) there are subfolders for each supported operation system: Android, iOS, Mac Catalyst, Windows.

Here you can make operation system/platform specific code modifications.

Android specific code and Platforms Folder: Android, iOS, Mac Catalyst, Windows

Resources

Having Resources as Images, Fonts in one place is great achievement and productivity booster. Resources are are platform specific thing and each platform handles it different way, but for developer comfort and development speed resources are kept in common place but also could be stored per platform.

Visual Studio 2022, Solution Explorer: All Resources folders

Common resources:

Visual Studio 2022, Solution Explorer: Common resources

Platform specific resources:

Visual Studio 2022, Solution Explorer: Android resources
Visual Studio 2022, Solution Explorer: iOS resources

MauiProgram.cs

MauiProgram is main class where app is created and all configuration happens:

MauiProgram.cs

App.xaml and XAML files

EXtensible Application Markup Language (XAML)files are files used to create User Interface (UI) / Graphic User Interface (GUI).

In Microsoft app world XAML is common language but have many dialects some them are used in WPF, UWP, XAMARIN.FORMS.

App.xaml is special, holds whole application, first that create others.

App.xaml and MainPage.xaml

Start — App run

Developer can run app(program) and chosen platform(Android, iOS, Mac Catalyst, Windows) on real device, remote device, emulator or simulator.

Android Emulator Run

Xaml, Xaml Preview, Android Emulator

Hot Reload

Notice when running application there is “NEW” red flame icon it is Hot reload.

Red flame/comet icon it is Hot reload.
Android Hot Reload

Hot reload is next productivity booster that enables changing UI in when app is running(in runtime):

Hot Reload: Label text and color change in runtime

Sometimes you will need to “Restart Application” to see more complex UI changes.

iOS Simulator run

iOS run require real iPhone device connected via cable or pairing Mac remote machine:

Windows run

When you are running on windows it can be faster to deploy and test your app on Windows.

App after “Windows Machine” run

Summary

After successful download on windows you should be able to run and edit your code on any supported platform on real device, emulator, simulator via remote device.

Developer can manipulate UI on Android and iOS via “Hot reload” mechanism.

See also:

Old Xamarin concepts in same problem domain:

--

--

Bogusław Błoński

Did small internal corporate and big projects with over 1 000 000 active users in ASP.NET and XAMARIN.FORMS and XAMARIN.NATIVE. Blogging for better sleep.