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

public void Configure(IAppHostBuilder appBuilder) {  
    appBuilder.ConfigureLifecycleEvents(lifecycle => {  
        #if ANDROID  
        lifecycle.AddAndroid(d => {  
            d.OnBackPressed(activity => {  
                System.Diagnostics.Debug.WriteLine("Back button pressed!");  
            });  
        });  
        #endif  
    });  
}

using Microsoft.Maui;  
using Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;  
namespace HelloMaui {  
    public partial class App: Microsoft.Maui.Controls.Application {  
        public App() {  
            Initialize Component();  
        }  
        public override IWindow Create Window(IActivationState activationState) {  
            Microsoft.Maui.Controls.Compatibility.Forms.Init(activationState);  
            this.On < Microsoft.Maui.Controls.PlatformConfiguration.Windows > ().SetImageDirectory("Assets");  
            return new MainWindow();  
        }  
    }  
}

In App.Xaml, will work same like xamairn form and will add the all the common resources and style

<Application  
    xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    xmlns:local="clr-namespace:HelloMaui"  
      x:Class="HelloMaui.App">  
    <Application.Resources>  
        <ResourceDictionary>  
            <!-- Add any additional resources here. -->  
            <Color x:Key="PageBackgroundColor">White</Color>  
            <Color x:Key="PrimaryTextColor">Black</Color>  
            <Color x:Key="GlyphColor">#2B0B98</Color>  
            <Style TargetType="Label">  
                <Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />  
            </Style>  
            <Style TargetType="Label" x:Key="Glyph">  
                <Setter Property="TextColor" Value="{DynamicResource GlyphColor}" />  
                <Setter Property="FontFamily" Value="IonIcons" />  
                <Setter Property="FontSize" Value="32" />  
            </Style>  
        </ResourceDictionary>  
    </Application.Resources>  
</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

<ContentPage  
    xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
      x:Class="HelloMaui.MainPage"  
      BackgroundColor="{DynamicResource PageBackgroundColor}">  
    <ScrollView>  
        <StackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">  
            <Label Text="Getting started with MAUI Xamarin Forms Application using Visual Studio 2019 Preview 16.10"  
               SemanticProperties.HeadingLevel="Level1"  
               FontSize="32"  
               HorizontalOptions="CenterAndExpand" />  
            <Label Text="Welcome to .NET MAUI!"  
               HorizontalOptions="CenterAndExpand" />  
            <Image  
               Source="dotnet_bot.png"  
               SemanticProperties.Description="Cute dotnet bot waving hi to you!"  
               Margin="40,0" />  
        </StackLayout>  
    </ScrollView>  
</ContentPage>

In MainPage.xaml.cs removed using Xamarin.Forms, add an inheritance from IPage, added the Maui namespace

using System;  
using Microsoft.Maui;  
using Microsoft.Maui.Controls;  
using Microsoft.Maui.Controls.Xaml;  
namespace HelloMaui {  
    [XamlCompilation(XamlCompilationOptions.Compile)]  
    publicpartialclassMainPage: ContentPage, IPage {  
        public Main Page() {  
            Initialize Component();  
        }  
        public IView View {  
            get => (IView) Content;  
            set => Content = (View) value;  
        }  
    }  
}

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,

{  
    "sdk": {  
        "version": "6.0.100-preview.3.21202.5",  
        "rollForward": "disable",  
        "allowPrerelease": true  
    }  
} 

Nuget.Config looks like below and has the reference key for dotnet6,Xamarin and public.

<?xml version="1.0" encoding="utf-8"?>  
   <configuration>  
      <packageSources>  
         <clear />  
            <!-- ensure only the sources defined below are used -->  
            <add key="dotnet6" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet6/nuget/v3/index.json" />  
            <add key="xamarin" value="https://pkgs.dev.azure.com/azure-public/vside/_packaging/xamarin-impl/nuget/v3/index.json" />  
            <add key="public" value="https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet-public/nuget/v3/index.json" />  
         </packageSources>  
<config>  
<add key="globalPackagesFolder" value="packages" />  
</config>  
</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.