Creare un'app per prendere appunti con WinUI 3

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

Iniziare da qui dopo aver compilato ed eseguito un progetto vuoto. Si tratta di un'introduzione dettagliata ai concetti fondamentali di WinUI 3 che usano Visual Studio; non è necessario alcun assistente per la codifica di intelligenza artificiale o MVVM Toolkit.

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 creerà un'app che è possibile usare per immettere una nota e salvarla nell'archiviazione delle app locale. 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 Visual Studio project

Seguire il percorso Visual Studio in Avvio rapido: Creare ed eseguire un progetto WinUI 3 per l'installazione degli strumenti e la creazione di progetti. Usa un progetto C# predefinito con queste impostazioni specifiche del tutorial:

  • Nome Progetto

    L'impostazione deve essere WinUINotes. Se il project è 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 namespace predefinito per il codice dell'app.

  • SDK per app di Windows

    Questa esercitazione usa le funzionalità disponibili in SDK per app di Windows 1.7 e versioni successive. Assicurarsi che il pacchetto NuGet SDK per app di Windows sia aggiornato alla versione 1.7 o successiva.

Compilare e avviare il progetto WinUINotes vuoto prima di continuare. Verrà 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.

Vai al passaggio 1 - Impostazione del progetto

  • Last updated on