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

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.

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:

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:

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