.NET MAUI – Il nuovo framework open-source di Microsoft

.NET MAUI (Multi-platform App UI) è il nuovo framework open-source di Microsoft presente in .NET 6.

MAUI rappresenta l’evoluzione di Xamarin.Forms, e con l’utilizzo di C# e XAML, ci permette di sviluppare applicazioni multipiattaforma per dispositivi mobile, ma anche desktop, supportando le maggiori piattaforme (Android, iOS, macOs e Windows). Con MAUI siamo in grado di realizzare applicazioni multipiattaforma utilizzando un solo progetto, condividendo le risorse tra le piattaforme o introducendo porzioni di codice e risorse, specifici per piattaforma.

MAUI è consigliato a chi:

• sviluppa applicazioni cross-platform in C# e XAML in Visual Studio
• condivide tra piattaforme UI layout e il design
• condivide tra le piattaforme codice, test e logica

Indice dei contenuti:

1. Come funziona
2. Struttura della solution
3. Esempio
   • Parte UI
   • Parte Business Logic
4. In next release

COME FUNZIONA

.NET MAUI ci permette di realizzare applicazioni multi-piattaforma utilizzando un solo progetto (write-once run-anywhere), condividendo le risorse tra le piattaforme o introducendo porzioni di codice e risorse, specifici per piattaforma.

.NET 6 introduce framework specifici per ogni piattaforma supportata:

• .NET per Android
• .NET per iOS
• .NET per macOS
• Windows UI Library

Tutti i singoli framework hanno acceso alla .NET 6 Base Class Library (BLC), questa dipende dal runtime .NET per fornire l’ambiente di esecuzione. Per Android, iOS e macOS l’ambiente è implementato da Mono, per Windows invece da WinRT.

Questo consente l’esecuzione dell’applicazione su diverse piattaforme, che condividono tra loro la logica di business e l’interfaccia utente, anche se ogni piattaforma ha un modo diverso per interpretare o specificare come tutti gli elementi della UI interagiscono tra di loro.

STRUTTURA DELLA SOLUTION

Per gestire le nuove funzionalità di .NET MAUI, come la condivisione delle risorse tra le varie piattaforme o la possibilità di introdurre porzioni di codice specifiche per piattaforma, viene introdotta anche una nuova struttura della solution.

La solution è costituita da un singolo progetto. Le principali novità introdotte sono:

Cartella Platforms:

All’interno troviamo le singole cartelle per ogni piattaforma supportata dal progetto dove poter inserire le risorse e codice per ogni piattaforma.

Cartella Resources:

In questa singola cartella possiamo gestire tutte risorse condivise tra le varie piattaforme.

File MauiProgram.cs

Una tra le novità principali introdotte da MAUI è .NET Host Builder pattern. La classe MauiProgram crea e ritorna una MauiApp. Ogni singola piattaforma all’avvio della applicazione richiamerà MauiProgram.CreateMauiApp().

Esempio:

La classe MauiProgram con l’implementazione del metodo CreateMauiApp:

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

            return builder.Build();
        }
    }
}

Il metodo CreateMauiApp() viene richiamato all’ avvio del applicazione sulla piattaforma iOS:

namespace MauiCalc
{
    [Register("AppDelegate")]
    public class AppDelegate : MauiUIApplicationDelegate
    {
        protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
    }
}

ESEMPIO

Per presentare le nuove funzionalità introdotte da MAUI abbiamo deciso di creare un piccolo applicativo. Abbiamo cercato di creare una calcolatrice che avrà come target un dispositivo Android e un dispositivo desktop Windows sfruttando lo stesso codice.

Parte UI

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:windows="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific;assembly=Microsoft.Maui.Controls"
             xmlns:local="clr-namespace:MauiCalc"
             x:Class="MauiCalc.App"
             windows:Application.ImageDirectory="Assets">
    <Application.Resources>
        <ResourceDictionary>

            <Color x:Key="PrimaryColor">#ffffff</Color>
            <Color x:Key="SecondaryColor">#000000</Color>

            <Style TargetType="Label">
                <Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
                <Setter Property="FontFamily" Value="OpenSansRegular" />
            </Style>

            <Style TargetType="Button">
                <Setter Property="TextColor" Value="{DynamicResource SecondaryColor}" />
                <Setter Property="FontFamily" Value="OpenSansRegular" />
                <Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColor}" />
                <Setter Property="FontSize" Value="36" />

            </Style>

        </ResourceDictionary>
    </Application.Resources>
</Application>

Nel file App.xaml andiamo a inizializzare e definire le risorse globali utilizzate dal progetto su per tutti i framework. All’interno del tag ResourceDictionary abbiamo:

• attribuito ad ogni colore utilizzato nel progetto una chiave
• specificato lo stile globale di più elementi specifici del nostro layout

<Button Text="C" Grid.Row="2" Grid.Column="0"
     Clicked="OnCancel"
     BackgroundColor ="#a1a4ad"/>
<Button Text="/" Grid.Row="2" Grid.Column="1"
     x:Name="ButtonDiv"
     BackgroundColor ="#a1a4ad"/>
<Button Text="*" Grid.Row="2" Grid.Column="2"
     x:Name="ButtonMul"
     BackgroundColor ="#a1a4ad"/>
<Button Text="Del" Grid.Row="2" Grid.Column="3"
     Clicked="OnDelete"
     BackgroundColor ="#a1a4ad"/>

<Button Text="1" Grid.Row="5" Grid.Column="0"
     x:Name="Button1"/>
<Button Text="2" Grid.Row="5" Grid.Column="1"
     x:Name="Button2"/>
<Button Text="3" Grid.Row="5" Grid.Column="2"
     x:Name="Button3"/>
<Button Text="=" Grid.Row="5" Grid.Column="3" Grid.RowSpan="2"
     Clicked="Elaborate"
     BackgroundColor ="#324dad"/>

Nel file MainPage.xaml, per definire la UI abbiamo deciso di utilizzare l’elemento Grid che ci permette di creare un layout a griglia per gestire al meglio interfaccia della calcolatrice con elementi Button e Label. 

Parte Business Logic

MainPage.xaml.cs

private async void Elaborate(object sender, EventArgs e)
{

    if (IsOperator(calcText.Text.Last()))
    {
        await DisplayAlert("Warning", "Invalid number", "Ok");
        return;
    }
    var expr = new Expression(calcText.Text);
    resultText.Text = expr.Evaluate().ToString();
    
}

In questa parte gestiamo l’inserimento e la validazione dell’espressione aritmetica e in fine anche il calcolo.

Nello screen possiamo vedere il metodo Elaborate che gestisce la parte di validazione dell’espressione aritmetica e il calcolo grazie alla DLL esterna NCalc2:

A destra troviamo la finestra XAML Live Preview, che ci permette di avere un anteprima del layout generato da XAML, cosa molto utile per una creazione interattiva dell’UI:

.NET MAUI: IN NEXT RELEASE

• MVU pattern: Sarà possibile sviluppare l’interfaccia utente tramite il pattern Model-View-Update (MVU)
• Supporto completo per Hot Reload: La nuova funzionalità di .NET 6 sarà disponibile per tutti le piattaforme

Fonti

Questo articolo è basato su materiale e tutorial fornito da:

• https://docs.microsoft.com/en-us/dotnet/maui/what-is-maui
• https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app
• https://devblogs.microsoft.com/dotnet/introducing-net-multi-platform-app-ui/

Vuoi approfondire gli argomenti con i nostri esperti?

CONNETTIAMOCI

David Cettolo

Sono un programmatore che ha da poco iniziato il suo viaggio alla scoperta del mondo della programmazione. Ogni giorno cerco di aggiungere un tassello a questo puzzle complesso, ma allo stesso tempo affascinante. Qual è il mio sogno? Passare da bug developer a software developer!

This author does not have any more posts.

Last modified: December 11, 2023