Exibir origem

Visão Geral

O Xamarin.Forms geralmente é usado para desenvolver aplicativos multiplataforma nativos. Basicamente, o Xamarin.Forms é uma camada de abstração que permite a interação do código compartilhado com o código da plataforma subjacente do Android, iOS e Windows.

Usando o Xamarin.Forms, um desenvolvedor de aplicativo móvel multiplataforma pode economizar tempo de desenvolvimento escrevendo toda a lógica de negócios em um único idioma. Quase 90% do código necessário para desenvolver um aplicativo é compartilhado entre plataformas, permitindo que você obtenha desempenho nativo e a mesma aparência em cada uma delas.

Como você sabe, a interface do usuário do aplicativo multiplataforma .NET é popularmente conhecida como .NET MAUI. Ele é usado para criar aplicativos multiplataforma nativos com .NET para Android, iOS, macOS e Windows. O .NET MAUI é construído sobre o Xamarin.Forms, evoluindo a plataforma para o próximo nível.

Com o .NET MAUI, a Microsoft inicia uma jornada para criar uma plataforma .NET unificada como uma única classe base para .NET Core e Mono/Xamarin juntos.

Como o .NET MAUI é uma evolução do Xamarin.Forms, eles têm a maioria de seus recursos em comum. É possível obter quase tudo que o Xamarin possui no .NET MAUI, como controles, layouts, Shell, gestures, templates e APIs multiplataforma para recursos de dispositivo.

Não é necessário reescrever os aplicativos Xamarin.Forms para migra-los para o .NET MAUI. No entanto, será preciso fazer algumas alterações de código em cada aplicativo. Da mesma forma, é possível utilizar os recursos de projeto único sem mesclar todos os projetos do Xamarin.Forms em um projeto. Para iniciar a migração, siga os seguintes passos:

Passo 1
Passo 2
Passo 3
Passo 4

Criando uma Nova Solução

Visão geral

Para migrar o aplicativo Xamarin.Forms, crie uma nova solução MAUI.

Certifique-se de que o novo nome da solução corresponda ao namespace raiz do aplicativo existente.

Isso garantirá o mínimo de conflito possível ao importar os componentes existentes.

Linha de Comando

Em um terminal, execute o seguinte comando para gerar um novo MAUI App:

dotnet new maui -n TotvsApp

Visual Studio 2022

Criar um novo projeto com o modelo padrão .NET MAUI App.

Navegando na Solução

A nova solução será criada e conterá um arquivo TotvsApp.sln que pode ser aberto com o Visual Studio 2022 no Windows ou Mac.

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-20_15-29-29.png

A solução recém-gerada conterá um aplicativo MAUI simples. Os projetos MAUI têm uma nova estrutura, consolidando todos os projetos específicos de plataforma em um único projeto. Eles foram movidos para a pasta Platforms. Ainda é possível escrever código iOS, Android ou Windows e configurações específicas para cada plataforma nesta pasta. Em Resources conterá outros arquivos necessários para o aplicativo, como imagens, fontes, arquivos de banco de dados etc.

Compatibilidade entre Plataformas

Para evitar erros de compilação, remova as plataformas que não são compatíveis com os pacotes do seu Aplicativo no arquivo de projeto (.csproj):

<TargetFrameworks>net6.0-android;net6.0-ios;~~net6.0-maccatalyst~~</TargetFrameworks>

~~<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>~~

~~<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>~~

~~<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>~~

~~<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>~~

Migrando XAML e Códigos Existentes

O primeiro passo é trazer o XAML e o código-fonte do aplicativo existente no Xamarin.Forms. Abaixo está uma lista de todos os arquivos e pastas que foram migrados.

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-20_15-39-54.png

Seria uma boa ideia adicionar o projeto MAUI a um provedor de controle de versão e verificar regularmente as alterações ao longo da migração.

Isso facilitará a reversão para alterações anteriores ou a execução de algumas tentativas e erros.

Usando o explorador de arquivos, arraste e solte o conteúdo necessário do projeto existente para a pasta raiz do seu novo projeto MAUI. O conteúdo ficará semelhante à figura abaixo.

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-20_15-41-11.png

Etapas Principais de Migração de Código do Xamarin.Forms

Substitua as seguintes informações do Xamarin.Forms pelo equivalente Microsoft MAUI:

Valor Antigo	Valor Novo
xmlns="http://xamarin.com/schemas/2014/forms"	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
using Xamarin.Forms	using Microsoft.Maui / using Microsoft.Maui.Controls
using Xamarin.Forms.Xaml	using Microsoft.Maui.Controls.Xaml
Rg.Plugins.Popup	Mopups
Plugin.*	Microsoft.Maui.Devices.*
Xamarin.Forms.Device.RuntimePlatform	Microsoft.Maui.Devices.DeviceInfo.Platform
Xamarin.Forms.Device.Platform	Microsoft.Maui.Devices.DevicePlatform
CarouselView.FormsPlugin.Abstractions	Microsoft.Maui.Controls.CarouselView
MasterDetailPage	FlayoutPage
Device.BeginInvokeOnMainThread()	Dispatcher.Dispatch()
Xamarin.Forms.Color	Microsoft.Maui.Graphics.Colors
new Rectangle	new Rect
Grid.Children.Add(view, 0, 0)	Grid.SetRow((IView)view, 0) Grid.SetColumn((IView)view, 0)

Exclua ou comente o conteúdo do arquivo AssemblyInfo.cs. As propriedades poderão ser reativadas quando o aplicativo compilar e executar sem erros. A maioria dessas propriedades foram incorporadas como parte do novo .NET MAUI csproj, portanto, verifique quais realmente são necessárias.

Em MauiProgram.cs, atualize o objeto builder para configurar efeitos (linha 11):

using CommunityToolkit.Maui;

namespace MinhaQualidade;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>()
        .ConfigureEffects(
            effects =>
            {
            })
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        })
        return builder.Build();
    }
}

Etapas de Migração do Xamarin Community Toolkit

Adicione o pacote Maui Community Toolkit no nuget:

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-20_16-38-21.png

Substitua as seguintes informações do Xamarin Community Toolkit pelo equivalente ao MAUI Community Toolkit:

Valor Antigo	Valor Novo
`xmlns:xct="http://xamarin.com/schemas/2020/toolkit"`	`xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"`
`xct:`	`mct:`
`using Xamarin.CommunityToolkit.UI.Views;`	`using CommunityToolkit.Maui.Views;`
`using Xamarin.CommunityToolkit.Extensions;`	Substituir por uma string vazia
`Navigation.ShowPopup`	`this.ShowPopup`
`xct:IsNullOrEmptyConverter`	`mct:IsStringNullOrEmptyConverter`
`xct:ListIsNullOrEmptyConverter`	`mct:IsListNullOrEmptyConverter`
`xct:ListIsNotNullOrEmptyConverter`	`mct:IsListNotNullOrEmptyConverter`

Em MauiProgram.cs, atualize seu construtor para usar o Maui Community Toolkit (linha 15).

using CommunityToolkit.Maui;

namespace MinhaQualidade;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>()
        .ConfigureEffects(
            effects =>
            {
            })
	    .UseMauiCommunityToolkit()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        })
        return builder.Build();
    }
}

Adicionando o Pacote do SQLite

Adicione o pacote sqlite-net-pcl e suas dependências:

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-20_18-25-57.png

Lista de pacotes após inseridos:

<PackageReference Include="sqlite-net-pcl" Version="1.8.116" />
<PackageReference Include="SQLitePCLRaw.bundle_green" Version="2.1.2" />
<PackageReference Include="SQLitePCLRaw.core" Version="2.1.2" />
<PackageReference Include="SQLitePCLRaw.provider.dynamic_cdecl" Version="2.1.2" />
<PackageReference Include="SQLitePCLRaw.provider.sqlite3" Version="2.1.2" />

No iOS é necessário definir o provedor do SQLite no arquivo AppDelegate.cs:

protected override MauiApp CreateMauiApp()
{
    raw.SetProvider(new SQLite3Provider_sqlite3());
    return MauiProgram.CreateMauiApp();
}

Adicionando o Pacote do Firebase

Adicione o pacote Plugin.Firebase ( >= 1.2.0) no nuget. Depois os arquivos GoogleService-Info.plist e google-services.json à pasta raiz do projeto e inclua-os no arquivo .csproj dessa forma:

<ItemGroup Condition="'$(TargetFramework)' == 'net6.0-android'">
    <GoogleServicesJson Include="google-services.json" />
</ItemGroup>

<ItemGroup Condition="'$(TargetFramework)' == 'net6.0-ios'">
    <BundleResource Include="GoogleService-Info.plist" />
</ItemGroup>

Coloque a chamada de inicialização no arquivo MauiProgram.cs (linha 15):

#if IOS
using Plugin.Firebase.iOS;
#else
using Plugin.Firebase.Android;
#endif

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        return MauiApp
            .CreateBuilder()
            .UseMauiApp<App>()
            ...
            .RegisterFirebaseServices()
            .Build();
    }
    
    private static MauiAppBuilder RegisterFirebaseServices(this MauiAppBuilder builder)
    {
        builder.ConfigureLifecycleEvents(events => {
#if IOS
            events.AddiOS(iOS => iOS.FinishedLaunching((app, launchOptions) => {
                CrossFirebase.Initialize(app, launchOptions, CreateCrossFirebaseSettings());
                return false;
            }));
#else
            events.AddAndroid(android => android.OnCreate((activity, state) =>
                CrossFirebase.Initialize(activity, state, CreateCrossFirebaseSettings())));
#endif
        });
        
        builder.Services.AddSingleton(_ => CrossFirebaseAuth.Current);
        return builder;
    }
    
    private static CrossFirebaseSettings CreateCrossFirebaseSettings()
    {
        return new CrossFirebaseSettings(isAuthEnabled: true);
    }
}

Adicione o seguinte ItemGroup ao arquivo .csproj para evitar erros de compilação:

<ItemGroup Condition="'$(TargetFramework)' == 'net6.0-android'">
  <PackageReference Include="Xamarin.Kotlin.StdLib.Jdk7" Version="1.7.10" ExcludeAssets="build;buildTransitive" />
  <PackageReference Include="Xamarin.Kotlin.StdLib.Jdk8" Version="1.7.10" ExcludeAssets="build;buildTransitive" />
</ItemGroup>

Migrando Arquivos de Fonte

O registro de fontes foi simplificado no Microsoft MAUI.

Copie as fontes do aplicativo Xamarin.Forms existente para a pasta Resources\Fonts em seu projeto MAUI.

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-21_14-35-17.png

Certifique-se de que a propriedade "Build Action" esteja definida como MauiFont:

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-21_14-38-16.png

Atualize o arquivo MauiProgram.cs para incluir as fontes migradas:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>()
        .ConfigureEffects(
            effects =>
            {
            })
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

            fonts.AddFont("NunitoSans-Bold.ttf", "NunitoSansBold");
            fonts.AddFont("NunitoSans-ExtraLight.ttf", "NunitoSansExtraLight");
            fonts.AddFont("NunitoSans-Regular.ttf", "NunitoSansRegular");
            fonts.AddFont("Nunito-SemiBold.ttf", "NunitoSemiBold");
        })
        .UseMauiCommunityToolkit();
        return builder.Build();
    }
}

Migrando Imagens

O registro de fontes foi simplificado no Microsoft MAUI.

Copie as fontes do aplicativo Xamarin.Forms existente para a pasta Resources\Images em seu projeto MAUI.

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-21_14-59-49.png

Certifique-se de que a propriedade "Build Action" esteja definida como MauiImage:

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-21_14-56-53.png

Controles Personalizados

O .NET MAUI Entry é um controle de entrada de texto, que implementa a interface IEntry. No iOS, o EntryHandler mapeia o Entry para o controle nativo UITextField. No Android, o Entry é mapeado para um AppCompatEditText, e no Windows o Entry é mapeado para um TextBox, como é mostrado na figura abaixo:

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-21_15-22-5.png

O mapeador de propriedades do Entry, na classe EntryHandler, mapeia as propriedades de controle multiplataforma para a API de visualização nativa. Isso garante que, quando uma propriedade for definida em um Entry, a exibição nativa seja atualizada conforme necessário.

void ModifyEntry()
    {
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping("MyCustomization", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.SetBackgroundColor(Colors.Transparent.ToPlatform());
#elif IOS
            handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#elif WINDOWS
            handler.PlatformView.FontWeight = Microsoft.UI.Text.FontWeights.Thin;
#endif
        });
    }

Reutilizando um Controle Customizado do Xamarin.Forms

Crie um arquivo correspondente ao controle na pasta de sua plataforma:

Linha RM > Migrando do Xamarin.Forms para .NET MAUI > image2022-9-28_15-1-29.png

Altere os namesapces correspondentes e remova o assembly ExportRenderer:

using Android.Content;
using Microsoft.Maui.Controls.Compatibility.Platform.Android;
using Microsoft.Maui.Controls.Platform;

//[assembly: ExportRenderer(typeof(RMSCustomEntry), typeof(RMSCustomEntryRenderer))]
namespace RMLib.Android.Renderers
{
    public class RMSCustomEntryRenderer : EntryRenderer
    {
        public RMSCustomEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);
            Control?.SetBackgroundColor(global::Android.Graphics.Color.Transparent);
        }
    }
}

Inclua o trecho de código a seguir no arquivo MauiProgram.cs (linha 13-19):

using CommunityToolkit.Maui;
using Microsoft.Maui.Controls.Compatibility.Hosting;
using RMLib.Android.Renderers;
using RMLib.Custom;

namespace MinhaQualidade;
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder.UseMauiApp<App>()
        .UseMauiCompatibility()
        .ConfigureMauiHandlers(handlers =>
        {
#if ANDROID
            handlers.AddCompatibilityRenderer(typeof(RMSCustomEntry), typeof(RMSCustomEntryRenderer));
#endif
        })
        .ConfigureEffects(effects =>
        {

        })
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

            fonts.AddFont("NunitoSans-Bold.ttf", "NunitoSansBold");
            fonts.AddFont("NunitoSans-ExtraLight.ttf", "NunitoSansExtraLight");
            fonts.AddFont("NunitoSans-Regular.ttf", "NunitoSansRegular");
            fonts.AddFont("Nunito-SemiBold.ttf", "NunitoSemiBold");
        })
        .UseMauiCommunityToolkit();
        return builder.Build();
    }
}