Creare un "Hello, World!" App UWP (XAML)

Questa esercitazione illustra come usare XAML e C# con Native AOT (Ahead-of-Time) per creare una semplice app "Hello, World!" per l'Piattaforma UWP (Universal Windows Platform) in Windows. Con un singolo progetto in Microsoft Visual Studio, è possibile 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 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

• App universale di Windows?
• Download Visual Studio (e Windows). Se hai bisogno di una mano, scopri come configurare.
• Si supponga anche di usare il layout predefinito della finestra in Visual Studio. Se si modifica il layout predefinito, è possibile reimpostarlo nel menu finestra di usando il comando Reimposta layout finestra.

Passaggio 1: Creare un nuovo progetto in Visual Studio

1. Avviare Visual Studio.

2. Dal menu File selezionare Nuovo > Project per aprire la finestra di dialogo Nuovo Project.

3. Filtrare l'elenco dei modelli disponibili scegliendo C# dall'elenco a discesa Lingue e UWP dall'elenco a discesa Tipi di progetto per visualizzare l'elenco dei modelli di progetto UWP disponibili per gli 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 Visual Studio Installer dal menu Start Windows. Per altre informazioni, vedi Impostare Visual Studio per lo sviluppo UWP.

4. Scegliere il modello App vuota UWP.

   Importante

   Il modello UWP App vuota è il modello predefinito e è destinato alla .NET più recente con AOT nativo. Se viene visualizzato un modello UWP Blank App (.NET Native), si tratta di un modello legacy destinato al runtime nativo .NET precedente. Le app che usano il modello di .NET moderno hanno accesso alle funzionalità di .NET e C# più recenti, prestazioni migliorate e strumenti migliori. Per altre informazioni sulle differenze, vedi Modernizzare l'app UWP con .NET e Native AOT.

5. Selezionare Next e immettere "HelloWorld" come nome Project name. Fare clic su Crea.

   

   Annotazioni

   Se è la prima volta che hai usato Visual Studio, potresti visualizzare una finestra di dialogo Impostazioni che chiede di abilitare ModalitàDeveloper. 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.

   

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

   

7. 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 Properties o GitHub Copilot Chat 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 nel 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.

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 il suo 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à.
• Asset/StoreLogo.png rappresenta l'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.

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

   

   Annotazioni

   Non vedrai una vista progettazione quando lavori con il modello UWP Blank App che usa .NET moderno. 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 UWP Blank App (.NET Native) è leggermente diverso dal modello UWP Blank App, 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 la tua app UWP con .NET e Native AOT per informazioni sui vantaggi dell'uso del modello di .NET moderno.

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

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

4. 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:

   

5. Premere il tasto Windows per aprire il menu Start, quindi selezionare All 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.

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

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

1. Ferma l'app se non lo hai già fatto.

2. Iniziare a digitare Click nell'editor XAML e Visual Studio mostrerà un elenco di possibili eventi. Selezionare Fare clic nell'elenco.

   

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

4. 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 Windows per creare un oggetto di sintesi vocale e quindi assegna un testo da dire. 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 moderne!

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 .

Contenuti correlati

• Pubblicazione dell'app UWP.
• Articoli sulle procedure per lo sviluppo di app UWP
• Esempi di codice per sviluppatori UWP