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

Nota

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

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

Se non è ancora stato installato Visual Studio, accedere alla pagina Download di Visual Studio per installarlo gratuitamente.

Creare un progetto

Per prima cosa è necessario creare un progetto della piattaforma UWP (Universal Windows Platform). Il tipo di progetto include fin dall'inizio tutti i file di modello necessari.

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

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

   

   Nota

   Se il modello di progetto App vuota (Windows universale) non viene visualizzato, fare clic sul collegamento Installa altri strumenti e funzionalità.
   
   
   
   Verrà avviato il Programma di installazione di Visual Studio. Scegliere il carico di lavoro di sviluppo piattaforma UWP (Universal Windows Platform) e quindi selezionare Modifica.
   
   

3. Assegnare un nome al progetto, HelloWorld e scegliere Crea.

   

4. Nella finestra di dialogo Nuovo progetto della piattaforma UWP (Universal Windows Platform) accettare le impostazioni predefinite per Versione di destinazione e Versione minima.

   

   Nota

   Se è la prima volta che hai usato Visual Studio per creare un'app UWP, verrà visualizzata la finestra di dialogo Abilita modalità sviluppatore per Windows . Selezionare le impostazioni per gli sviluppatori per aprire Impostazioni. Attivare la modalità sviluppatore e quindi scegliere Sì.
   
   
   
   Visual Studio installa un pacchetto aggiuntivo di modalità sviluppatore per l'utente. Una volta completata l'installazione del pacchetto, chiudere la finestra di dialogo Impostazioni.

Creare l'applicazione

A questo punto è possibile iniziare a sviluppare l'app. Verrà aggiunto un pulsante, verrà aggiunta un'azione al pulsante e l'app "Hello World" verrà avviata per visualizzarne l'aspetto.

Aggiungere un pulsante all'area di progettazione

1. In Esplora soluzioni fare doppio clic su MainPage.xaml per aprire una doppia visualizzazione.

   

   Sono disponibili due riquadri: Finestra di progettazione XAML, che include un'area di progettazione, ed Editor XAML, dove è possibile aggiungere o modificare il codice.

   

2. Scegliere Casella degli strumenti per aprire la finestra a comparsa della casella degli strumenti.

   

   (Se non vedi il L'opzione Casella degli strumenti consente di aprirla dalla barra dei menu. A tale scopo, scegliere Visualizza>barra degli strumenti. In alternativa, premere CTRL+ALT+X.

3. Selezionare l'icona Aggiungi per ancorare la finestra casella degli strumenti.

   

4. Selezionare il controllo Pulsante e trascinarlo nell'area di disegno.

   

   Se si esamina il codice nell'Editor XAML, si noterà che il pulsante è stato aggiunto anche qui:

   

Aggiungere un'etichetta al pulsante

1. Nell'editor XAML modificare il valore Contenuto pulsante da "Button" a "Hello World!".

   

2. Anche il pulsante nella finestra di progettazione XAML viene modificato.

   

Aggiungere un gestore eventi

Il termine "gestore dell'evento" sembra qualcosa di complesso, ma in realtà è solo un altro modo di indicare il codice che viene chiamato quando si verifica un evento. In questo caso, aggiunge un'azione al pulsante "Hello World!".

1. Fare doppio clic sul pulsante nell'area di progettazione.

2. Modificare il codice del gestore dell'evento in MainPage.xaml.cs, il file code-behind.

   Qui le cose si fanno interessanti. Il gestore dell'evento predefinito ha l'aspetto seguente:

   

   Modificarlo in modo analogo al seguente:

   

   Di seguito viene riportato 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();
   }
   

Riepilogo dell'operazione eseguita

Il codice usa alcune API Windows per creare un oggetto di sintesi vocale e assegnare un testo da pronunciare a tale oggetto. Per altre informazioni sull'uso di SpeechSynthesis, vedere System.Speech.Synthesis.

Eseguire l'applicazione

A questo punto è possibile compilare, distribuire e avviare l'app UWP "Hello World" per verificarne l'aspetto e l'audio. Ecco come.

1. Usare il pulsante di riproduzione (include il testo Computer locale) per avviare l'applicazione nel computer locale.

   

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

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

   

3. Selezionare il pulsante Hello World .

   Il dispositivo Windows 10 o versione successiva pronuncia 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 o premere MAIUSC+F5.

Passaggi successivi

L'esercitazione è stata completata. Ci auguriamo che l'articolo sia stato utile per apprendere le nozioni di base su UWP e sull'IDE di Visual Studio. Per altre informazioni, passare all'esercitazione successiva:

Create a user interface (Creare un'interfaccia utente)

Vedi anche

• Panoramica della piattaforma UWP
• Ottenere esempi di app UWP