Condividi tramite


Creare un'app WinUI

Questa serie di esercitazioni illustra come creare un'app WinUI 3 usando XAML e C#. L'app che creerai è un'app nota, in cui l'utente può creare, salvare e caricare più note. È possibile scaricare o visualizzare il codice per questa esercitazione dal repository GitHub.

In questa esercitazione si apprenderà come:

  • Usa markup XAML per definire l'interfaccia utente dell'app.
  • Interagire con gli elementi XAML tramite il codice C#.
  • Salvare e caricare file dal file system locale.
  • Creare visualizzazioni e associarle ai dati.
  • Usa la navigazione per spostarsi da e verso le pagine nell'app.
  • Usare risorse come la documentazione e le app di esempio per creare un'app personalizzata.

Si userà Visual Studio 2022 per creare un'app che è possibile usare per immettere una nota e salvarla nell'archiviazione delle app locale. Il codice sorgente per questa app è disponibile qui. L'app avrà due pagine:

  • NotePage - una pagina per la modifica di una singola nota.
  • AllNotesPage : una pagina per visualizzare tutte le note salvate.

L'applicazione finale è riportata di seguito:

AllNotesPage

Screenshot finale dell'app note, che mostra tre note di salvataggio.

NotePage

Screenshot finale dell'app note, che mostra una nuova nota vuota.

Creare il progetto di Visual Studio

Per iniziare questa esercitazione, è necessario creare un progetto di app WinUI 3 in Visual Studio usando il Blank App, Packaged (WinUI 3 in Desktop) modello di progetto C#. Quando si crea il progetto, usare le impostazioni seguenti:

  • Nome progetto

    L'impostazione deve essere WinUINotes. Se il progetto è denominato qualcosa di diverso, il codice copiato e incollato da questa esercitazione può causare errori di compilazione. Questo perché Visual Studio usa il nome del progetto come spazio dei nomi predefinito per il codice dell'app.

  • Windows App SDK

    Questa esercitazione usa le funzionalità nuove di Windows App SDK 1.7. È necessario assicurarsi che il pacchetto NuGet di Windows App SDK sia aggiornato alla versione 1.7 o successiva.

Importante

Se in precedenza non è stato creato un progetto WinUI 3, seguire la procedura descritta in Avviare lo sviluppo di app di Windows per assicurarsi che l'ambiente di sviluppo e il progetto di Visual Studio siano configurati correttamente.

Quando esegui il progetto app vuoto (come descritto in Avvia sviluppo di app di Windows), dovrebbe essere visualizzata una finestra vuota simile alla seguente:

Finestra dell'app note con una barra del titolo e un'area di contenuto vuota.

Suggerimento

Spesso si fa riferimento alla documentazione di riferimento sulle API e alla documentazione concettuale durante la creazione di app di Windows. In questa esercitazione verranno visualizzati i collegamenti inline nel testo e nei gruppi con etichetta "Altre informazioni nella documentazione:". Questi collegamenti sono facoltativi; non è necessario seguirli per completare l'esercitazione. Vengono forniti nel caso in cui si voglia prendere nota della posizione in cui trovare le informazioni necessarie quando si inizia a creare app personalizzate.