Compilare la prima app MAUI .NET per Windows

È possibile usare .NET MAUI creando la prima app multipiattaforma in Windows.

Introduzione

In questa esercitazione si apprenderà come creare ed eseguire la prima app MAUI .NET per Windows in Visual Studio 2022 (17.3 o versione successiva). Noi aggiungeremo alcune funzionalità MVVM Toolkit dal .NET Community Toolkit per migliorare il design del progetto predefinito.

Configurazione dell'ambiente

Se non hai già configurato l'ambiente per lo sviluppo di .NET MAUI, segui la procedura per Introduzione a .NET MAUI su Windows.

Creazione del progetto MAUI .NET

1. Avviare Visual Studio e nella finestra iniziale fare clic su Crea un nuovo progetto per creare un nuovo progetto:

   

2. Nella finestra Crea un nuovo progetto, selezionare MAUI nell'elenco a discesa Tutti i tipi di progetto, selezionare il modello .NET MAUI App e fare clic sul pulsante Avanti:

   

3. Nella finestra Configura il nuovo progetto assegnare un nome al progetto, scegliere un percorso e fare clic sul pulsante Avanti:

   

4. Nella finestra Informazioni aggiuntive fare clic sul pulsante Crea:

   

5. Attendere che il progetto venga creato e che le relative dipendenze vengano ripristinate:

   

6. Nella barra degli strumenti di Visual Studio premere il pulsante Computer Windows per compilare ed eseguire l'app.

7. Nell'app, premere il pulsante Clicca su di me più volte e osservare che il numero di clic sul pulsante aumenta.

   

È stata appena eseguita la prima app MAUI .NET su Windows. Nella sezione successiva si apprenderà come aggiungere funzionalità di data binding e messaggistica da MVVM Toolkit all'app.

Risoluzione dei problemi

Se la compilazione dell'app non riesce, consulta Risoluzione dei problemi noti, che potrebbe offrire una soluzione per il tuo problema.

Aggiunta di MVVM Toolkit

Ora che hai la prima app MAUI .NET in esecuzione in Windows, aggiungiamo alcune funzionalità di MVVM Toolkit al progetto per migliorare la progettazione dell'app.

1. Fare clic con il pulsante destro del mouse sul progetto in Esplora soluzioni e scegliere Gestisci pacchetti NuGet... dal menu di scelta rapida.

2. Nella finestra Gestione pacchetti NuGet, selezionare la scheda Sfoglia e cercare CommunityToolkit.MVVM:

   

3. Aggiungere la versione stabile più recente del pacchetto CommunityToolkit.MVVM (versione 8.0.0 o successiva) al progetto facendo clic su Installa.

4. Chiudere la finestra di Gestione pacchetti NuGet al termine dell'installazione del nuovo pacchetto.

5. Fare di nuovo clic con il pulsante destro del mouse sul progetto e selezionare Aggiungi | Classe dal menu di scelta rapida.

6. Nella finestra Aggiungi nuovo elemento visualizzato assegnare alla classe il nome MainViewModel e fare clic su Aggiungi:

   

7. La classe MainViewModel sarà la destinazione del data binding per l'MainPage. Aggiornarlo per ereditare da ObservableObject nello spazio dei nomi CommunityToolkit.Mvvm.ComponentModel. Sarà inoltre necessario aggiornare la classe per essere public e partial.

8. La classe MainViewModel conterrà il codice seguente. Il record CountChangedMessage definisce un messaggio inviato ogni volta che si fa clic sul pulsante Fai clic su di me, notificando la visualizzazione della modifica. Gli attributi ObservableProperty e RelayCommand aggiunti ai membri message e IncrementCounter sono generatori di origine forniti da MVVM Toolkit per creare il codice boilerplate MVVM per INotifyPropertyChanged e implementazioni IRelayCommand. L'implementazione del metodo IncrementCounter contiene la logica di OnCounterClicked in MainPage.xaml.cs, con una modifica per inviare un messaggio con il nuovo messaggio del contatore. Il codice code-behind verrà rimosso in un secondo momento.

   using CommunityToolkit.Mvvm.ComponentModel;
   using CommunityToolkit.Mvvm.Input;
   using CommunityToolkit.Mvvm.Messaging;
   
   namespace MauiOnWindows
   {
       public sealed record CountChangedMessage(string Text);
   
       public partial class MainViewModel : ObservableObject
       {
           [ObservableProperty]
           private string message = "Click me";
   
           private int count;
   
           [RelayCommand]
           private void IncrementCounter()
           {
               count++;
   
               // Pluralize the message if the count is greater than 1
               message = count == 1 ? $"Clicked {count} time" : $"Clicked {count} times";
   
               WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
           }
       }
   }
   

   Nota

   Sarà necessario aggiornare lo spazio dei nomi nel codice precedente in modo che corrisponda allo spazio dei nomi nel progetto.

9. Aprire il file MainPage.xaml.cs per la modifica e rimuovere il metodo OnCounterClicked e il campo count.

10. Aggiungere il codice seguente al costruttore MainPage dopo la chiamata a InitializeComponent(). Questo codice riceverà il messaggio inviato da IncrementCounter() nel MainViewModel e aggiornerà la proprietà CounterBtn.Text con il nuovo messaggio e annuncia il nuovo testo con il SemanticScreenReader:

    WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
    {
        CounterBtn.Text = m.Text;
        SemanticScreenReader.Announce(m.Text);
    });
    

11. Sarà anche necessario aggiungere un'istruzione using alla classe :

    using CommunityToolkit.Mvvm.Messaging;
    

12. In MainPage.xamlaggiungere una dichiarazione dello spazio dei nomi alla ContentPage in modo che sia possibile trovare la classe MainViewModel:

    xmlns:local="clr-namespace:MauiOnWindows"
    

13. Aggiungere MainViewModel come BindingContext per il ContentPage:

    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>
    

14. Aggiornare il Button in MainPage per usare un Command anziché gestire l'evento Clicked. Il comando verrà associato alla proprietà pubblica IncrementCounterCommand generata dai generatori di origine di MVVM Toolkit:

    <Button
        x:Name="CounterBtn"
        Text="Click me"
        SemanticProperties.Hint="Counts the number of times you click"
        Command="{Binding Path=IncrementCounterCommand}"
        HorizontalOptions="Center" />
    

15. Eseguire di nuovo il progetto e osservare che il contatore viene ancora incrementato quando si fa clic sul pulsante:

    

16. Durante l'esecuzione del progetto, prova ad aggiornare il messaggio "Hello, World!" nella prima Etichetta affinché legga "Hello, Windows!" in MainPage.xaml. Salva il file e nota che Ricaricamento Rapido XAML aggiorna l'interfaccia utente mentre l'app è ancora in esecuzione:

    

Passaggi successivi

Informazioni su come creare un'app che visualizza i dati di Microsoft Graph per un utente sfruttando Graph SDK in un'esercitazione .NET MAUI per Windows.

Contenuto correlato

risorse per l'apprendimento di MAUI .NET

Uso dell'API Microsoft Graph con .NET MAUI in Windows