Creare un "Hello, World!" App UWP (XAML) con .NET 9

2025-05-06

Questa esercitazione illustra come usare XAML, C# e .NET 9 con AOT nativo (In anticipo) per creare una semplice app "Hello, World!" per la piattaforma UWP (Universal Windows Platform) in Windows. Con un singolo progetto in Microsoft Visual Studio, puoi compilare un'app in esecuzione in tutte le versioni supportate di Windows 10 e Windows 11.

Di seguito viene illustrato come:

Creare un nuovo progetto UWP destinato a .NET 9 in Visual Studio.
Scrivere XAML per modificare l'interfaccia utente nella pagina iniziale.
Eseguire il progetto sul desktop locale in Visual Studio.
Usa speechSynthesizer per far parlare l'app quando premi un pulsante.

Prerequisiti

Che cos'è un'app di Windows universale?
Scaricare Visual Studio (e Windows). Se hai bisogno di una mano, scopri come configurare.
Supponiamo anche che tu stia usando il layout di finestra predefinito in Visual Studio. Se si modifica il layout predefinito, è possibile reimpostarlo nel menu finestra di usando il comando Reimposta layout finestra.

Annotazioni

Questa esercitazione usa Visual Studio 2022. Se si usa una versione diversa di Visual Studio, l'aspetto potrebbe essere leggermente diverso.

Passaggio 1: Creare un nuovo progetto in Visual Studio

Avvia Visual Studio.
Scegliere dal menu > per aprire la finestra di dialogo Nuovo progetto.
Filtrare l'elenco dei modelli disponibili scegliendo C# dall'elenco a discesa Linguaggi e dalla piattaforma UWP dall'elenco a discesa Tipi di progetto per visualizzare l'elenco dei modelli di progetto UWP disponibili per sviluppatori C#.

Se non vedi modelli UWP, potresti mancare i componenti per la creazione di app UWP. Puoi ripetere il processo di installazione e aggiungere il supporto UWP aprendo il programma di installazione di Visual Studio dal menu Start di Windows. Per altre informazioni, vedere Configurare Visual Studio per lo sviluppo UWP .
Scegliere il modello App vuota UWP.

Importante

Assicurarsi di selezionare il modello App vuota UWP . Se si seleziona il modello App vuota UWP (.NET Native), verrà eseguito sul runtime di .NET Native, non su .NET 9. Le app destinate a .NET Native non hanno accesso alle funzionalità .NET e C# più recenti o ai miglioramenti delle prestazioni e della sicurezza. Per altre informazioni sulle differenze tra i due tipi di progetto, vedi Modernizzare l'app UWP con supporto UWP di anteprima per .NET 9 e AOT nativo.
Selezionare Avanti e immettere "HelloWorld" come nome del progetto. Fare clic su Crea.

Annotazioni

Se questa è la prima volta che è stato usato Visual Studio, potrebbe essere visualizzata una finestra di dialogo Impostazioni che richiede di abilitare la modalità sviluppatore. La modalità sviluppatore è un'impostazione speciale che consente determinate funzionalità, ad esempio l'autorizzazione per eseguire le app direttamente, anziché solo dallo Store. Per altre informazioni, vedere Abilitare il dispositivo per lo sviluppo. Per continuare con questa guida, selezionare Modalità sviluppatore, fare clic su Sì e chiudere la finestra di dialogo.
Viene visualizzata la finestra di dialogo Versione di destinazione/Versione minima. Le impostazioni predefinite sono appropriate per questa esercitazione, quindi selezionare OK per creare il progetto.
Quando si apre il nuovo progetto, i relativi file vengono visualizzati nel riquadro Esplora soluzioni a destra. Potrebbe essere necessario scegliere la scheda Esplora soluzioni anziché le schede Proprietà o Chat di GitHub Copilot per visualizzare i file.

Anche se l'app vuota UWP è un modello minimo, contiene ancora molti file. Questi file sono essenziali per tutte le app UWP che usano C#. Ogni progetto UWP creato in Visual Studio li contiene.

Che cos'è nei file?

Per visualizzare e modificare un file nel progetto, fare doppio clic sul file in Esplora soluzioni . Espandere un file XAML esattamente come una cartella per visualizzare il file di codice associato. I file XAML vengono aperti in una visualizzazione divisa che mostra sia l'area di progettazione che l'editor XAML.

Annotazioni

Che cos'è XAML? Extensible Application Markup Language (XAML) è il linguaggio usato per definire l'interfaccia utente dell'app. Può essere immesso manualmente o creato usando gli strumenti di progettazione di Visual Studio. Un file .xaml ha un file di code-behind .xaml.cs che contiene la logica. Insieme, xaml e code-behind rendono una classe completa. Per altre informazioni, vedi Panoramica di XAML.

App.xaml e App.xaml.cs

App.xaml è il file in cui dichiari le risorse usate nell'app.
App.xaml.cs è il file code-behind per App.xaml. Come tutte le pagine code-behind, contiene un costruttore che chiama il metodo InitializeComponent. Non devi scrivere il metodo InitializeComponent. Viene generato da Visual Studio e lo scopo principale è inizializzare gli elementi dichiarati nel file XAML.
App.xaml.cs è il punto di ingresso per la tua app.
App.xaml.cs contiene anche metodi per gestire l'attivazione e la sospensione dell'app.

MainPage.xaml

MainPage.xaml è la posizione in cui definisci l'interfaccia utente per la tua app. Puoi aggiungere elementi direttamente usando il markup XAML oppure puoi usare gli strumenti di progettazione forniti da Visual Studio.
MainPage.xaml.cs è la pagina code-behind per MainPage.xaml. È qui che aggiungi la logica dell'app e i gestori di eventi.
Insieme questi due file definiscono una nuova classe denominata MainPage, che eredita da Page, nello spazio dei nomi HelloWorld.

Package.appxmanifest

Un file manifesto che descrive l'app: nome, descrizione, riquadro, pagina iniziale e così via.
Include un elenco di dipendenze, risorse e file contenuti nell'app.

Un set di immagini logo

Risorse/Square150x150Logo.scale-200.png e Wide310x150Logo.scale-200.png rappresentano la tua app (nelle dimensioni Media o Larga) nel menu Start.
Asset/Square44x44Logo.png rappresenta l'app nell'elenco delle app del menu Start, della barra delle applicazioni e del gestore attività.
Assets/StoreLogo.png rappresenta la tua app nel Microsoft Store.
Asset/SplashScreen.scale-200.png è la schermata iniziale visualizzata all'avvio dell'app.
Risorse/LockScreenLogo.scale-200.png può essere usato per rappresentare l'applicazione nella schermata di blocco, quando il sistema è bloccato.

Passaggio 2: Aggiungere un pulsante

Uso della visualizzazione designer

Aggiungere un pulsante alla pagina. In questa esercitazione vengono usati solo alcuni dei file elencati in precedenza: App.xaml, MainPage.xaml e MainPage.xaml.cs.

Fare doppio clic su MainPage.xaml per aprirlo nell'editor XAML.

Annotazioni

Quando si utilizza il modello App Vuota UWP che utilizza .NET 9, non si vedrà una vista di progettazione. Se vuoi usare un progetto UWP con una visualizzazione progettazione XAML, puoi usare invece il modello App vuota UWP (.NET Native). Come indicato in precedenza, il modello App vuota UWP (.NET Native) è leggermente diverso dal modello app vuota UWP , ma ha la stessa struttura di base. La differenza principale è che il modello UWP Blank App (.NET Native) usa .NET Native per compilare l'app. Vedi Modernizzare l'app UWP con il supporto UWP in anteprima per .NET 9 e Native AOT per informazioni sui vantaggi dell'uso del nuovo modello .NET 9.
Aggiungere il codice XAML seguente all'elemento <Grid> in MainPage.xaml. È possibile digitarlo o copiarlo e incollarlo da qui:
```
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
A questo punto, è stata creata un'app molto semplice. Questo è un buon momento per costruire, distribuire e avviare la tua app e vedere come appare. È possibile eseguire il debug dell'app nel computer locale, in un simulatore o in un emulatore o in un dispositivo remoto. Ecco il menu del dispositivo di destinazione in Visual Studio:

Per impostazione predefinita, l'app viene eseguita nel computer locale. Il menu del dispositivo di destinazione offre diverse opzioni per il debug dell'app nei dispositivi dalla famiglia di dispositivi desktop.
- HelloWorld (viene eseguito nel computer locale)
- WSL
- Scarica nuovi emulatori...
Eseguire l'app per visualizzare il pulsante in azione. Per avviare il debug nel computer locale, è possibile eseguire l'app selezionando Debug | Avviare debug nel menu facendo clic sul pulsante Avvia debug sulla barra degli strumenti (con l'etichetta HelloWorld ) o premendo F5.

L'app viene aperta in una finestra e viene visualizzata prima una schermata iniziale predefinita. La schermata iniziale è definita da un'immagine (SplashScreen.png) e da un colore di sfondo (specificato nel file manifesto dell'app).

La schermata iniziale scompare e quindi viene visualizzata l'app. L'aspetto è simile al seguente:
Premere il tasto Windows per aprire il menu Start , quindi selezionare Tutto per visualizzare tutte le app. Si noti che la distribuzione dell'app in locale lo aggiunge all'elenco dei programmi nel menu Start . Per eseguire nuovamente l'app in un secondo momento (non in modalità di debug), è possibile selezionarla nel menu Start .

Non fa ancora molto, ma congratulazioni, hai creato e distribuito la tua prima app UWP nel computer locale.
Per arrestare il debug:

Fare clic sul pulsante Arresta debug nella barra degli strumenti .

–o–

Scegliere Arresta debug dal menu Debug.

–o–

Chiudere la finestra dell'app.
Modificare il testo del pulsante modificando il Content valore da Button a Hello, world!.
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top"/>
```
Se si esegue di nuovo l'app, il pulsante viene aggiornato per visualizzare il nuovo testo.

Passaggio 3: Gestori eventi

Un "gestore eventi" sembra complicato, ma è solo un altro nome per il codice che viene chiamato quando si verifica un evento (ad esempio l'utente che fa clic sul pulsante).

Ferma l'app se non lo hai già fatto.
Iniziare a digitare Click nell'editor XAML e Visual Studio mostrerà un elenco di possibili eventi. Selezionare Fare clic nell'elenco.
Selezionare <New Event Handler> quindi dall'elenco. In questo modo viene creato un nuovo metodo del gestore eventi nel file code-behind (MainPage.xaml.cs) e viene aggiunto l'evento all'elemento Click button nel codice XAML.

L'editor XAML aggiunge automaticamente l'evento Click all'elemento button nel codice XAML:
```
<Button x:Name="button" Content="Hello, world!" HorizontalAlignment="Left" Margin = "152,293,0,0" VerticalAlignment="Top" Click="button_Click"/>
```
Viene inoltre aggiunto un gestore eventi al file code-behind (MainPage.xaml.cs). Il gestore eventi è un metodo che verrà chiamato quando si fa clic sul pulsante. Il nome del metodo è button_Clicke ha due parametri: object sender e RoutedEventArgs e.
```
private void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{

}
```
L'evento Click è un evento standard per i pulsanti. Quando l'utente fa clic sul pulsante, viene chiamato il button_Click metodo .

Modificare il codice del gestore eventi in MainPage.xaml.cs, la pagina code-behind. È qui che le cose sono interessanti. Cambiamolo, in modo che sia così:

private async void button_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    var mediaElement = new MediaElement();
    var synth = new Windows.Media.SpeechSynthesis.SpeechSynthesizer();
    Windows.Media.SpeechSynthesis.SpeechSynthesisStream stream = await synth.SynthesizeTextToStreamAsync("Hello, World!");
    mediaElement.SetSource(stream, stream.ContentType);
    mediaElement.Play();
}

Assicurarsi che la firma del metodo includa ora la parola chiave asincrona oppure si riceverà un errore quando si tenta di eseguire l'app.

Cosa abbiamo appena fatto?

Questo codice usa alcune API di Windows per creare un oggetto di sintesi vocale e quindi assegna un testo da pronunciare. Per altre informazioni sull'uso di SpeechSynthesis, vedere lo spazio dei nomi SpeechSynthesis nella documentazione dell'API Windows Runtime (WinRT).

Quando esegui l'app e fai clic sul pulsante, il computer (o il telefono) dirà letteralmente "Hello, World!".

Riassunto

Congratulazioni, hai creato la tua prima app UWP per Windows con .NET 9!

Per sapere come utilizzare XAML per disporre i controlli che la tua app utilizzerà, prova l'esercitazione sulla griglia , oppure passa direttamente ai passaggi successivi .