Membuat aplikasi catatan WinUI 3

Seri tutorial ini menunjukkan cara membuat aplikasi WinUI menggunakan XAML dan C#. Aplikasi yang akan Anda buat adalah aplikasi catatan, tempat pengguna dapat membuat, menyimpan, dan memuat beberapa catatan. Anda dapat mengunduh atau melihat kode untuk tutorial ini dari repositori GitHub.

Mulai di sini setelah Anda dapat membangun dan menjalankan proyek kosong. Ini adalah pengantar langkah demi langkah untuk dasar-dasar WinUI 3 menggunakan Visual Studio; tidak diperlukan asisten pengodean AI atau Toolkit MVVM.

Dalam tutorial ini, Anda akan belajar cara:

• Gunakan markup XAML untuk menentukan antarmuka pengguna aplikasi.
• Berinteraksi dengan elemen XAML melalui kode C#.
• Simpan dan muat file dari sistem file lokal.
• Buat tampilan dan ikat ke data.
• Gunakan navigasi untuk berpindah ke dan dari halaman di aplikasi.
• Gunakan sumber daya seperti dokumentasi dan aplikasi sampel untuk membuat aplikasi Anda sendiri.

Anda akan membuat aplikasi yang dapat digunakan untuk memasukkan catatan dan menyimpannya ke penyimpanan aplikasi lokal. Aplikasi ini akan memiliki dua halaman:

• NotePage - halaman untuk mengedit satu catatan.
• AllNotesPage - halaman untuk menampilkan semua catatan yang disimpan.

Aplikasi akhir ditunjukkan di bawah ini:

AllNotesPage

Halaman Catatan

Membuat proyek Visual Studio

Ikuti jalur Visual Studio di Mulai Cepat: Membuat dan menjalankan proyek WinUI 3 untuk penginstalan alat dan pembuatan proyek. Gunakan proyek C# paket dengan pengaturan khusus tutorial ini:

• Nama Proyek

  Ini harus diatur ke WinUINotes. Jika project diberi nama yang berbeda, kode yang Anda salin dan tempel dari tutorial ini dapat mengakibatkan kesalahan build. Ini karena Visual Studio menggunakan nama project sebagai namespace default untuk kode aplikasi Anda.

• SDK Aplikasi Windows

  Tutorial ini menggunakan fitur yang tersedia di SDK Aplikasi Windows 1.7 dan yang lebih baru. Pastikan paket SDK Aplikasi Windows NuGet diperbarui ke versi 1.7 atau yang lebih baru.

Buat dan luncurkan proyek kosong WinUINotes sebelum melanjutkan. Anda akan melihat jendela kosong yang terlihat seperti ini:

Tip

Anda akan sering merujuk ke dokumen referensi API dan dokumen konseptual saat membangun aplikasi Windows. Dalam tutorial ini, Anda akan melihat tautan sebaris dalam teks, dan dalam grup berlabel, "Pelajari lebih lanjut di dokumen:". Tautan ini bersifat opsional; Anda tidak perlu mengikutinya untuk menyelesaikan tutorial. Mereka disediakan jika Anda ingin mencatat di mana menemukan informasi yang akan Anda butuhkan saat Anda mulai membuat aplikasi Anda sendiri.

Lanjutkan ke langkah 1 - penyiapan Project