Esercitazione: Creare la prima applicazione UWP (Universal Windows Platform) in Visual Studio con XAML e C#

In questa esercitazione, come introduzione all'ambiente di sviluppo integrato (IDE) di Visual Studio, si crea un'app "Hello World" eseguita in qualsiasi dispositivo Windows 10 o versione successiva. A tale scopo, usa un modello di progetto UWP (Universal Windows Platform), Extensible Application Markup Language (XAML) e il linguaggio di programmazione C#.

Nota

Se sei soddisfatto delle funzionalità correnti nella piattaforma UWP (Universal Windows Platform), non è necessario eseguire la migrazione del tipo di progetto a Windows App SDK. WinUI 2.x e Windows SDK supportano i tipi di progetto UWP. Per iniziare a usare WinUI 3 e Windows App SDK, è possibile seguire la procedura descritta nell'esercitazione Windows App SDK.

In questa esercitazione, tu:

• Creare un progetto
• Creare un'applicazione
• Eseguire l'applicazione

Prerequisiti

Per completare questa esercitazione è necessario Visual Studio. Visitare la pagina download di Visual Studio per una versione gratuita.

Nota

Questo tutorial richiede il modello di progetto app vuota (Universal Windows). Durante l'installazione, selezionare il workload di sviluppo della piattaforma UWP (Universal Windows Platform) :

Se Visual Studio è già installato ed è necessario aggiungerlo, dal menu selezionare Strumenti>Ottieni strumenti e funzionalitàoppure nella finestra Crea un nuovo progetto selezionare il collegamento Installa altri strumenti e funzionalità.

Creare un progetto

Creare prima di tutto un progetto UWP (Universal Windows Platform). Il tipo di progetto include tutti i file di modello necessari, prima di aggiungere qualsiasi elemento.

1. Aprire Visual Studio e nella finestra iniziale scegliere Crea un nuovo progetto.

2. Nella schermata Crea un nuovo progetto, immettere Windows Universali nella casella di ricerca, scegliere il modello C# per App Vuota (Windows Universali), e quindi scegliere Avanti.

   

3. Assegnare un nome al progetto, HelloWorlde scegliere Crea.

   

4. Accettare le impostazioni predefinite Versione di destinazione e Versione minima nella finestra di dialogo Nuovo progetto della piattaforma UWP (Universal Windows Platform Project).

   

   Nota

   Se è la prima volta che hai usato Visual Studio per creare un'app UWP, viene visualizzata la finestra di dialogo Abilita modalità sviluppatore per Windows. Selezionare impostazioni per gli sviluppatori per aprire Impostazioni. Attivare modalità sviluppatoree quindi scegliere Sì.

   

   Visual Studio installa automaticamente un pacchetto aggiuntivo in modalità sviluppatore. Al termine dell'installazione del pacchetto, chiudere la finestra di dialogo Impostazioni.

Creare l'applicazione

È il momento di iniziare a sviluppare. Aggiungere un controllo pulsante, aggiungere un'azione al pulsante e quindi avviare l'app "Hello World" per visualizzare l'aspetto.

Aggiungi un pulsante al canvas di progettazione

1. In Esplora soluzioni, fare doppio clic su MainPage.xaml per aprire una vista divisa.

   

   Sono disponibili due riquadri: la finestra di progettazione XAML , che include un'area di disegno e l'editor XAML , in cui è possibile aggiungere o modificare il codice.

   

2. Scegliere Casella degli strumenti per aprire la finestra a comparsa del Toolbox.

   

   Se non vedi l'opzione casella degli strumenti, puoi aprirla dalla barra dei menu. A tale scopo, scegliere "Visualizza barra degli strumenti" >. In alternativa, premere CTRL+ALT+X.

3. Selezionare l'icona Pin per fissare la finestra della casella degli strumenti.

   

4. Selezionare il pulsante controllo e quindi trascinarlo sul design canvas.

   

   Se si esamina il codice nell'editor XAML , viene visualizzato anche il pulsante:

   

Aggiungere un'etichetta al pulsante

1. Nell'editor XAML , modificare il Button Content valore da Button a Hello World!

   

2. Si noti che anche il pulsante nella finestra di progettazione XAML viene modificato.

   

Aggiungere un gestore eventi

Un gestore eventi sembra complicato, ma è solo un altro nome per il codice chiamato quando si verifica un evento. In questo caso, aggiunge un'azione al pulsante Hello World!.

1. Fare doppio clic sul controllo pulsante nell'area di disegno.

2. Modifica il codice del gestore eventi in MainPage.xaml.cs, la pagina con il codice associato.

   Ecco dove le cose sono interessanti. Il gestore eventi predefinito è simile al seguente:

   

   Modificarlo, in modo che abbia un aspetto simile al seguente:

   

   Ecco il codice da copiare e incollare:

   private async void Button_Click(object sender, RoutedEventArgs e)
   {
      MediaElement 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();
   }
   

Cosa abbiamo appena fatto?

Il 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 System.Speech.Synthesis.

Eseguire l'applicazione

È il momento di compilare, distribuire e avviare l'app UWP "Hello World" per vedere e sentire come appare. Ecco come.

1. Usare il pulsante Avvia (contiene il testo Computer locale) per avviare l'applicazione sul computer locale.

   

   In alternativa, è possibile scegliere Debug>Avvia debug dalla barra dei menu oppure premere F5 per avviare l'app.

2. Visualizzare l'app, che viene visualizzata subito dopo la scomparsa di una schermata iniziale. L'app dovrebbe essere simile a questa immagine:

   

3. Selezionare il pulsante Hello World.

   Il dispositivo Windows 10 o versione successiva dice letteralmente "Hello, World!"

4. Per chiudere l'app, selezionare il pulsante Arresta debug sulla barra degli strumenti. In alternativa, scegliere Debug>Arresta debug dalla barra dei menu oppure premere MAIUSC+F5.

Contenuto correlato

• panoramica della piattaforma UWP
• Ottenere esempi di app UWP

Passaggio successivo

Congratulazioni per aver completato questa esercitazione. Ci auguriamo di aver appreso alcune nozioni di base sulla piattaforma UWP e sull'IDE di Visual Studio. Per altre informazioni, continuare con l'esercitazione seguente:

Creare un'interfaccia utente