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#.
Nota
WinUI 3 è il componente nativo della piattaforma dell'interfaccia utente fornito con Windows App SDK (completamente separato dai Windows SDK ). Per altre informazioni, vedere WinUI 3.
Se non hai già installato Visual Studio, vai alla pagina dei download di Visual Studio per installarlo gratuitamente.
Prerequisiti
Per completare questa esercitazione è necessario Visual Studio. Visitare la pagina download di Visual Studio per una versione gratuita.
Carichi di lavoro e componenti necessari per lo sviluppo con WinUI e Windows App SDK. Per verificare o installare un workload in Visual Studio, selezionare Strumenti >Ottieni strumenti e funzionalità. Per altre informazioni, vedere Modificare i carichi di lavoro o i singoli componenti.
Nella scheda Carichi di lavoro del programma di installazione di Visual Studio selezionare i carichi di lavoro e i componenti seguenti:
- Per sviluppo di app C# con Windows App SDK, selezionare sviluppo di applicazioni Windows.
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.
Importante
Visual Studio 2019 supporta solo Windows App SDK 1.1 e versioni precedenti. Visual Studio 2022 è consigliato per lo sviluppo di app con tutte le versioni di Windows App SDK.
I modelli di Windows App SDK 1.1.x sono disponibili installando un'estensione di Visual Studio (VSIX) .
Nota
Se è già installata un'estensione di Visual Studio (VSIX) di Windows App SDK, disinstallarla prima di installare un'altra versione. Per istruzioni, vedere Gestire le estensioni per Visual Studio.
- È possibile installare l'ultima versione stabile 1.1.x VSIX da Visual Studio. Selezionare Estensioni>Gestisci estensioni, cercare Windows App SDKe scaricare l'estensione Windows App SDK. Chiudere e riaprire Visual Studio e seguire le istruzioni per installare l'estensione. Assicurarsi di installare i modelli per Windows App SDK 1.1.
- In alternativa, è possibile scaricare l'estensione direttamente da Visual Studio Marketplacee installarla:
Dopo aver installato l'estensione modelli, è possibile creare il primo progetto. Per altre informazioni sul supporto di Visual Studio 2019, vedere Installare gli strumenti per Windows App SDK. Nella parte restante di questa esercitazione si presuppone che si stia usando Visual Studio 2022.
Aprire Visual Studio e nella finestra iniziale scegliere Crea un nuovo progetto.
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.
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
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.
Esaminare il Button controllo annidato all'interno dello StackPanel alla radice del Window.
Modificare l'etichetta sul pulsante
Nell'editor XAML modificare il valore contenuto del pulsante da "Fai clic su di me" a "Hello World!".
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!".
In Esplora soluzioni , fare doppio clic su MainWindow.xaml.cs, la pagina di codice sottostante.
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.
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.
Visualizzare l'app, che viene visualizzata subito dopo la scomparsa di una schermata iniziale. L'app dovrebbe essere simile a questa immagine:
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.
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:
esercitazione : Creare un semplice visualizzatore di foto con WinUI 3