Esercitazione: Creare la prima applicazione Windows App SDK in Visual Studio con XAML e C#

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, si userà un modello di progetto Windows App SDK (WinUI 3), Extensible Application Markup Language (XAML) e il linguaggio di programmazione C#.

Se non hai già installato Visual Studio, vai alla pagina dei download di Visual Studio per installarlo gratuitamente.

Creare un progetto

Creare prima di tutto un progetto WinUI 3. Il tipo di progetto viene fornito con tutti i file di modello necessari, prima di aver aggiunto qualsiasi elemento.

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

2. Nella schermata Crea un nuovo progetto, immettere WinUI nella casella di ricerca, scegliere il modello C# per App Vuota, con pacchetto (WinUI 3 per Desktop)e quindi scegliere Avanti.

   

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

   

   Nota

   Se è la prima volta che usi Visual Studio per creare un'app Windows App SDK, potrebbe apparire una finestra di dialogo impostazioni di . Scegliere 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. Si aggiungerà un controllo pulsante, si aggiungerà un'azione al pulsante e quindi si eseguirà l'app "Hello World" per vedere l'aspetto.

Aggiungi un pulsante all'area di progettazione

1. Nel Esplora Soluzioni, fare doppio clic su MainWindow.xaml per aprire l'editor di markup XAML.

   

   L'editor XAML è la posizione in cui è possibile aggiungere o modificare markup. A differenza dei progetti UWP, WinUI 3 non ha una visualizzazione Progettazione.

   

2. Esaminare il Button controllo annidato all'interno dello StackPanel alla radice del Window.

   

Modificare l'etichetta sul pulsante

1. Nell'editor XAML modificare il valore contenuto del pulsante da "Fai clic su di me" a "Hello World!".

   

2. Si noti che il pulsante ha un gestore eventi Click chiamato myButton_Click specificato, anch'esso. Arriveremo a questo nel prossimo passaggio.

   

Modificare il gestore eventi

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

1. In Esplora soluzioni , fare doppio clic su MainWindow.xaml.cs, la pagina di codice sottostante.

2. Modificare il codice del gestore eventi nella finestra dell'editor C# visualizzata.

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

   

   Si modificherà, in modo che abbia un aspetto simile al seguente:

   

   Ecco il codice da copiare e incollare:

   private async void myButton_Click(object sender, RoutedEventArgs e)
   {
       var welcomeDialog = new ContentDialog()
       {
           Title = "Hello from HelloWorld",
           Content = "Welcome to your first Windows App SDK app.",
           CloseButtonText = "Ok",
           XamlRoot = myButton.XamlRoot
       };
       await welcomeDialog.ShowAsync();
   }
   

Cosa abbiamo appena fatto?

Il codice usa il controllo ContentDialog per visualizzare un messaggio di benvenuto in un controllo popup modale all'interno della finestra corrente. Per altre informazioni sull'uso di Microsoft.UI.Xaml.Controls.ContentDialog, vedere Classe ContentDialog.

Eseguire l'applicazione

È il momento di compilare, distribuirla e avviare l'app "Hello World" del Windows App SDK per vederne l'aspetto. Ecco come.

1. Usare il pulsante Avvia (contiene il testo HelloWorld (pacchetto)) 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 visualizzerà un messaggio che indica "Benvenuto nella tua prima app di Windows App SDK" con il titolo "Hello from HelloWorld". Fare clic ok per ignorare il messaggio.

   

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.

Passaggi successivi

Congratulazioni per aver completato questa esercitazione. Ci auguriamo di aver appreso alcune nozioni di base su Windows App SDK, WinUI 3 e l'IDE di Visual Studio. Per altre informazioni, continuare con l'esercitazione seguente:

Vedere anche

• Scrittura di app per Windows: selezione di una tecnologia di sviluppo
• panoramica di Windows App SDK
• esempi di Windows App SDK/WinUI 3