Esercitazione .NET MAUI - Prima app multipiattaforma in C #

Introduzione

Scopo

Configura l'ambiente di sviluppo e crea la prima app di .NET Multi-Platform App UI (.NET MAUI).

Prerequisiti

Controllare i requisiti del sistemaper Visual Studio 2022.

Tempo di completamento:/h3>
10 minuti + tempo di download/installazione

Scenario

Un'app per dispositivi mobili e desktop in esecuzione in Windows e Android che visualizza un messaggio Hello, World!.

Scarica e installa

Scarica e installa Visual Studio 2022.

Scarica Visual Studio 2022

Durante l'installazione, è necessario selezionare il carico di lavoro dello sviluppo di .NET Multi-Platform App UI. Utilizzando il link sopra riportato, è possibile preselezionare correttamente tutti i prerequisiti, come mostrato nell'immagine seguente:

Visual Studio 2022 è già disponibile?

Se si dispone già di Visual Studio 2022, assicurarsi che sia aggiornato e che sia installato il carico di lavoro richiesto:

Selezionare il tasto Windows, digitare Programma di installazione di Visual Studio, quindi premere INVIO.
Se richiesto, consentire al programma di installazione di aggiornarsi.
Se è disponibile un aggiornamento per Visual Studio 2022, verrà visualizzato un pulsante Aggiorna. Selezionarlo per aggiornarlo prima di modificare l'installazione. Questa esercitazione funziona solo con Visual Studio 2022 17.12 e versioni successive.
Trova l'installazione di Visual Studio 2022 e seleziona il pulsante Modifica.
Selezionare .NET Multi-Platform App UI.
Seleziona il pulsante Modify.

Scarica e installa .NET SDK. Al termine del download, avviare il download per avviare l'installazione.

Scarica .NET 9 SDK x64 (Intel)
Scarica .NET 9 SDK Arm64 (Apple Silicon)

Se si usa un Mac con un chip Apple M1 o M2, è necessario installare la versione Arm64 dell'SDK.
Scaricare e installare VS Code:

Scarica VS Code
Aprire VS Code e selezionare il pulsante Estensioni nella barra attività di VS Code a sinistra. Digitare MAUI nella barra di ricerca, selezionare .NET MAUI e quindi selezionare il pulsante Installa nella pagina delle estensioni di .NET MAUI.

Questa estensione include C# Dev Kit e le estensioni C#, necessarie per l'esecuzione dell'estensione .NET MAUI.
Aprire un nuovo terminale e installare il carico di lavoro di .NET MAUI eseguendo il comando seguente:
Terminal
```
sudo dotnet workload install maui
```
Se l'installazione è riuscita, dovrebbe essere visualizzato un output simile al seguente:
Terminal
```
Successfully installed workload maui
```

Verificare che tutto sia installato correttamente

Dopo aver configurato l'ambiente, aprire un nuovo terminale VS Code. Nella barra degli strumenti selezionare Terminale, quindi Nuovo terminale.

Nel terminale eseguire il comando seguente per controllare l'installazione.

Terminal

dotnet workload list

Se l'installazione è riuscita, dovrebbe essere visualizzato un output simile al seguente:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

Si è verificato un errore?

Se si riceve un errore "dotnet" non è riconosciuto come comando interno o esterno, assicurarsi di aver aperto un nuovo terminale VS Code. Se il riavvio di VS Code o il riavvio del computer non risolve il problema, usare il pulsante Si è verificato un problema nella parte inferiore della pagina per ricevere assistenza.

Installa Xcode

Per creare app .NET MAUI, sono necessari anche:

Versione più recente di Xcode

Per trovare la versione più recente di Xcode compatibile con .NET MAUI, controllare questo riferimento alla versione finale. Passare alla colonna Apple Tools per trovare la versione più recente compatibile di Xcode.

Un ID Apple

Se non hai già un ID Apple, è possibile crearne uno all'indirizzo https://appleid.apple.com. Per l'installazione e l'accesso a Xcode è necessario un ID Apple.
Dopo aver installato Xcode, è necessario aprire Xcode e accettare i contratti di licenza e installare i componenti facoltativi, se richiesto.
Quando viene richiesto di specificare le piattaforme per cui si vuole sviluppare, selezionare le piattaforme macOS e iOS e quindi selezionare Scarica e installa.
Aprire un nuovo terminale e installare gli strumenti di sviluppo della riga di comando di Xcode eseguendo il comando seguente:
Terminal
```
xcode-select --install
```
Quando viene richiesto di installare gli strumenti di sviluppo della riga di comando di Xcode, selezionare Installa. Infine accettare al contratto di licenza.

Se tutto sembra corretto, selezionare il pulsante Continuare di seguito per passare al passaggio successivo.

Crea la tua app

Creare una nuova app .NET MAUI:

Aprire Visual Studio 2022.
Seleziona il pulsante Crea un nuovo progetto.
Nella finestra Crea un nuovo progetto, digita AppMAUI nella barra di ricerca. Seleziona il modello .NET MAUI App e quindi fai clic sul pulsante Avanti.
Nella finestra Configurare il nuovo progetto immettere MyFirstMauiApp come nome del progetto e fare clic sul pulsante Next.
Nella finestra Informazioni aggiuntive, seleziona .NET 9.0 nel menu a discesa Framework se non è già stato selezionato e fai clic sul pulsante Crea.

Visual Studio crea il nuovo progetto. Se viene visualizzato un avviso di Sicurezza di Windows relativo al blocco di alcune funzionalità da parte del firewall, selezionare il pulsante Consenti l'accesso.

Attendere il processo di ripristino dei pacchetti NuGet

NuGet è uno strumento di gestione pacchetti che introdurrà le dipendenze della tua nuova app.

Il processo di ripristino del pacchetto verrà avviato automaticamente. Attendi che il messaggio Ripristinato o Pronto sia visualizzato nella barra di stato nella parte inferiore sinistra dello schermo.

Esegui l'app

Questa esercitazione si concentrerà prima sulla distribuzione di un'applicazione .NET MAUI nel computer Windows locale. In un secondo momento, sarà possibile configurare un dispositivo o un emulatore Android.

Nella barra degli strumenti Visual Studio, per impostazione predefinita, computer Windows verrà visualizzato come destinazione di debug. Premere il pulsante computer Windows per compilare ed eseguire l'app:

Nell'app in esecuzione selezionare il pulsante Fai clic su di me più volte e osservare che il conteggio del numero di clic sui pulsanti è incrementato:

Congratulazioni, è stata creata ed eseguita la prima app .NET MAUI. Mantenere l'app in esecuzione e continuare l'esercitazione.

Modifica il codice

Quando si sviluppano applicazioni con .NET MAUI, Ricaricamento rapido XAML è disponibile durante il debug dell'applicazione. Ciò significa che è possibile modificare l'interfaccia utente XAML mentre l'applicazione è in esecuzione e l'interfaccia utente verrà aggiornata automaticamente.

Tornare a Visual Studio e lasciare l'app in esecuzione. Nella finestra Esplora soluzione fare doppio clic sul file MainPage.xaml nel progetto MyFirstMauiApp. Se il pannello Esplora soluzioni non è visualizzato, selezionare Visualizza > Esplora soluzioni dal menu principale oppure premere CTRL+ALT+L.

Il valore Text della seconda Label nella riga 17 è attualmente impostato su Hello, World!, come mostrato nel codice seguente:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Aggiorna il testo per leggere Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

L'interfaccia utente dell'app viene aggiornata automaticamente quando si apportano modifiche.

Quando si sviluppano applicazioni con .NET MAUI, è anche possibile usare .NET Ricaricamento rapido per ricaricare il codice C#. Modificare la logica nell'applicazione per incrementare il conteggio di 10 anziché di 1 quando si fa clic sul pulsante.

Apri MainPage.xaml.cs (questo file è annidato in MainPage.xaml oppure è possibile fare clic con il pulsante destro del mouse e selezionare Visualizza codice dal menu).

Il metodo OnCounterClicked nel file include attualmente il codice seguente:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Aggiornare count++; per incrementarlo di 10 modificandolo in count += 10;.

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

Per applicare le modifiche al codice, salva il file e seleziona il pulsante Ricaricamento rapido in Visual Studio o premi ALT+F10.

Selezionare il pulsante Fai clic su di me e visualizzarne l'incremento di 10. Ben fatto! È ora possibile chiudere l'app in esecuzione.

Esecuzione su dispositivo mobile

È possibile decidere di eseguire la distribuzione in una o più piattaforme in base all'ambiente di sviluppo. L'app è stata appena eseguita e distribuita in Windows. A questo punto, è possibile configurare un dispositivo o un emulatore Android.

Attiva Hyper-V

Nella barra di ricerca di Windows, digita Funzionalità di Windows e seleziona Attiva o disattiva le funzionalità di Windows.

Verificare che la casella Hyper-V sia selezionata e selezionare Ok.

Per rendere effettiva la modifica, devi riavviare il computer.

Installazione Android SDK

Apri Visual Studio e la soluzione MyFirstMauiApp. Nel menu a discesa della destinazione di debug seleziona net8.0-android in Framework.

Per compilare progetti sono necessarie versioni specifiche di Android SDK. Se la licenza Android SDK non è stata accettata, verrà visualizzato il messaggio di errore seguente nella finestra Elenco errori.

Fare doppio clic sul messaggio per avviare il processo di accettazione della licenza. Fare clic su Accetta per ognuna delle licenze presenti e verrà avviata l'installazione automatica.

Configurare l'emulatore Android

Se non si dispone di un dispositivo Android in cui eseguire la distribuzione, è possibile seguire questa procedura per configurare un emulatore Android. Se l'operazione è già stata eseguita o si vuole usare il proprio dispositivo Android, è possibile ignorare questo passaggio.

Se è la prima volta che si compila un'applicazione .NET MAUI, viene visualizzato emulatore Android selezionato nel menu a discesa della destinazione di debug. Fare clic su di esso per avviare il processo di creazione. Se viene visualizzata una finestra di dialogo di accettazione delle licenze, selezionare Accept.

Viene visualizzata la finestra Nuovo dispositivo. Selezionare il pulsante Crea per creare un emulatore con le impostazioni predefinite. Verranno scaricate le immagini dell'emulatore e verrà finalizzata la creazione dell'emulatore per l'uso in Visual Studio. Questo passaggio potrebbe richiedere del tempo.

Non preoccuparti se il livello API visualizzato è diverso dalle immagini. Può essere 33 o superiore.

Dopo la creazione dell'emulatore, verrà visualizzato un pulsante Avvia. Fare clic su tale pulsante.

È possibile che venga visualizzata una richiesta di abilitazione della piattaforma Windows Hypervisor. Segui la documentazione per abilitare l'accelerazione per migliorare le prestazioni (necessaria per rendere l'emulatore funzionante). Seleziona Esegui comunque.

L'emulatore Android completerà il suo avvio quando l'opzione di arresto sarà disponibile in Gestione dispositivi Android. L'operazione potrebbe richiedere del tempo.

Al termine, verrà visualizzato nel menu di debug di Visual Studio.

L'emulatore Android è stato creato ed è pronto per l'uso. La prossima volta che esegui Visual Studio, l'emulatore apparirà direttamente nella finestra di debug e si avvierà non appena lo selezionerai. Se si verificano problemi o difficoltà relative alle prestazioni con l'emulatore, leggi la documentazione completa sulla configurazione.

Configurare il dispositivo Android

Per sviluppare con il dispositivo Android, è necessario abilitare il debug USB. Segui questi passaggi nel dispositivo per connetterlo a Visual Studio. Se non si dispone di un dispositivo Android, è possibile ignorare questa sezione.

Abilita la modalità sviluppatore

Passare alla schermata Impostazioni.
Trova Numero build usando la ricerca nella parte superiore della schermata delle impostazioni o nelle Informazioni sul telefono.
Tocca Numero build 7-10 volte fino a quando non viene visualizzato "Sei uno sviluppatore!".

Controllare lo stato di debug USB

Passare alla schermata Impostazioni.
Trovare il debug USB utilizzando la ricerca nella parte superiore della schermata delle impostazioni oppure individuarlo nelle opzioni per sviluppatori.
Abilitare il debug USB se non è già abilitato.

Dispositivo di attendibilità

Collega il dispositivo al computer.
Ti verrà chiesto di Permettere il debug USB.
Selezionare Consenti sempre da questo computer.
Fare clic Consenti.

Il dispositivo è ora configurato e verrà visualizzato in Visual Studio come destinazione di distribuzione.

Sono stati riscontrati problemi? Controllare la documentazione.

L'emulatore o il dispositivo deve ora essere configurato per la distribuzione.

Esegui in Android

Assicurarsi che il dispositivo o l'emulatore sia selezionato come destinazione di debug.

Dal menu selezionare Debug > Avvio del debug (o premere F5). Se questa opzione è disabilitata, verificare che sia selezionato un emulatore o un dispositivo.

L'applicazione verrà compilata, distribuita nel dispositivo/emulatore Android selezionato ed eseguita.

Passaggi successivi

Congratulazioni, hai creato ed eseguito la tua prima app .NET MAUI.

Continua l'apprendimento

Ora che si hanno le nozioni di base, è possibile a imparare a creare app .NET MAUI con il percorso di apprendimento autoguidato in Microsoft Learn.

Percorso di apprendimento .NET MAUI

.NET MAUI per principianti

James illustrerà in modo dettagliato la creazione di un'app .NET MAUI, dall'inizio alla fine:

Documenti per sviluppatori

Approfondimenti con la documentazione per .NET MAUI

esempi di .NET MAUI

Esplorare gli esempi di .NET MAUI in GitHub

Esercitazione .NET MAUI - Creare la prima app multipiattaforma in C #

Introduzione

Scopo

Prerequisiti

Tempo di completamento:/h3>
10 minuti + tempo di download/installazione

Scenario

Scarica e installa

Visual Studio 2022 è già disponibile?

Verificare che tutto sia installato correttamente

Si è verificato un errore?

Installa Xcode

Crea la tua app

Attendere il processo di ripristino dei pacchetti NuGet

Esegui l'app

Modifica il codice

Esecuzione su dispositivo mobile

Attiva Hyper-V

Installazione Android SDK

Configurare l'emulatore Android

Configurare il dispositivo Android

Esegui in Android

Passaggi successivi

Continua l'apprendimento

.NET MAUI per principianti

Documenti per sviluppatori

esempi di .NET MAUI

Segnala un problema

Fornisci feedback

Esercitazione .NET MAUI - Creare la prima app multipiattaforma in C #

Introduzione

Scopo

Prerequisiti

Tempo di completamento:/h3> 10 minuti + tempo di download/installazione

Scenario

Scarica e installa

Visual Studio 2022 è già disponibile?

Verificare che tutto sia installato correttamente

Si è verificato un errore?

Installa Xcode

Crea la tua app

Attendere il processo di ripristino dei pacchetti NuGet

Esegui l'app

Modifica il codice

Esecuzione su dispositivo mobile

Attiva Hyper-V

Installazione Android SDK

Configurare l'emulatore Android

Configurare il dispositivo Android

Esegui in Android

Passaggi successivi

Continua l'apprendimento

.NET MAUI per principianti

Documenti per sviluppatori

esempi di .NET MAUI

Tempo di completamento:/h3>
10 minuti + tempo di download/installazione