Penyusunan proyek

Sebelum Anda masuk ke pengkodian aplikasi, kita akan melihat sekilas proyek Visual Studio dan mengurus beberapa penyiapan proyek. Saat Visual Studio membuat proyek WinUI 3, beberapa folder penting dan file kode dihasilkan. Ini dapat dilihat di panel Penjelajah Solusi Visual Studio:

Item yang tercantum di sini adalah item yang utamanya akan Anda berinteraksi. File-file ini membantu mengonfigurasi dan menjalankan aplikasi WinUI 3. Setiap file melayani tujuan yang berbeda, dijelaskan di bawah ini:

• Folder aset

  Folder ini berisi logo, gambar, dan aset media aplikasi Anda lainnya. Ini dimulai diisi dengan file tempat penampung untuk logo aplikasi Anda. Logo ini mewakili aplikasi Anda di Menu Mulai Windows, bilah tugas Windows, dan di Microsoft Store saat aplikasi Anda diterbitkan di sana.

• App.xaml dan App.xaml.cs

  File berisi App.xaml sumber daya XAML di seluruh aplikasi, seperti warna, gaya, atau templat. File App.xaml.cs umumnya berisi kode yang membuat instans dan mengaktifkan jendela aplikasi. Dalam proyek ini, menunjuk ke MainWindow kelas .

• MainWindow.xaml dan MainWindow.xaml.cs

  File-file ini mewakili jendela aplikasi Anda.

• Package.appxmanifest

  File manifes paket ini memungkinkan Anda mengonfigurasi informasi penerbit, logo, arsitektur prosesor, dan detail lainnya yang menentukan bagaimana aplikasi Anda muncul di Microsoft Store.

File XAML dan kelas parsial

Extensible Application Markup Language (XAML) adalah bahasa deklaratif yang dapat menginisialisasi objek dan mengatur properti objek. Anda dapat membuat elemen UI yang terlihat dalam markup XAML deklaratif. Anda kemudian dapat mengaitkan file kode terpisah untuk setiap file XAML (biasanya disebut file code-behind ) yang dapat menanggapi peristiwa dan memanipulasi objek yang awalnya Anda deklarasikan di XAML.

Umumnya ada dua file dengan file XAML apa pun, file itu .xaml sendiri, dan file code-behind yang sesuai yang merupakan item anak darinya di Penjelajah Solusi.

• File .xaml berisi markup XAML yang menentukan UI aplikasi Anda. Nama kelas dideklarasikan dengan x:Class atribut .
• File kode berisi kode yang Anda buat untuk berinteraksi dengan markup XAML dan panggilan ke InitializeComponent metode . Kelas didefinisikan sebagai partial class.

Saat Anda membangun proyek, InitializeComponent metode dipanggil untuk mengurai .xaml file dan menghasilkan kode yang digabungkan dengan kode partial class untuk membuat kelas lengkap.

Pelajari selengkapnya di dokumen:

• Ikhtisar XAML
• Kelas dan Metode Parsial (Panduan Pemrograman C#)
• atribut x:Class, x:Class Directive

Memperbarui MainWindow

Kelas MainWindow yang disertakan dengan proyek adalah sub-kelas kelas XAML Window , yang digunakan untuk menentukan shell aplikasi. Jendela aplikasi memiliki dua bagian:

• Bagian klien dari jendela adalah tempat konten Anda pergi.
• Bagian non-klien adalah bagian yang dikontrol oleh Sistem Operasi Windows. Ini termasuk bilah judul, di mana kontrol keterangan (tombol Min/Max/Close), ikon aplikasi, judul, dan area seret berada. Ini juga termasuk bingkai di sekitar bagian luar jendela.

Untuk membuat aplikasi WinUI Notes konsisten dengan panduan Desain Fasih, Anda akan membuat beberapa modifikasi untuk MainWindow. Pertama, Anda akan menerapkan materi Mica sebagai latar belakang jendela. Mica adalah bahan buram dan dinamis yang menggabungkan tema dan wallpaper desktop untuk melukis latar belakang jendela. Kemudian, Anda akan memperluas konten aplikasi ke area bilah judul dan mengganti bilah judul sistem dengan kontrol Bilah Judul XAML. Ini membuat penggunaan ruang yang lebih baik dan memberi Anda lebih banyak kontrol atas desain, sambil menyediakan semua fungsionalitas yang diperlukan dari bilah judul.

Anda juga akan menambahkan Bingkai sebagai konten jendela. Kelas Frame ini berfungsi dengan kelas Halaman untuk memungkinkan Anda menavigasi antar halaman konten di aplikasi Anda. Anda akan menambahkan halaman di langkah selanjutnya.

Tip

Anda dapat mengunduh atau melihat kode untuk tutorial ini dari repositori GitHub. Untuk melihat kode apa adanya di langkah ini, lihat halaman penerapan ini: catatan - awal.

1. MainWindow.xaml Klik dua kali di Penjelajah Solusi untuk membukanya.

2. Antara tag pembuka dan penutupan<Window.. > , ganti XAML yang ada dengan ini:

   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
   
   <Grid>
       <Grid.RowDefinitions>
           <!-- Title Bar -->
           <RowDefinition Height="Auto" />
           <!-- App Content -->
           <RowDefinition Height="*" />     
       </Grid.RowDefinitions>
       <TitleBar x:Name="AppTitleBar"
                 Title="WinUI Notes">
           <TitleBar.IconSource>
               <FontIconSource Glyph="&#xF4AA;"/>
           </TitleBar.IconSource>
       </TitleBar>
   
       <!-- App content -->
       <Frame x:Name="rootFrame" Grid.Row="1"/>
   </Grid>
   

3. Simpan file dengan menekan CTRL + S, mengklik ikon Simpan di bilah alat, atau dengan memilih menu Simpan File>MainPage.xaml.

Jangan khawatir jika Anda tidak memahami apa yang dilakukan markup XAML ini saat ini. Saat Anda membangun UI aplikasi lainnya, kami akan menjelaskan konsep XAML secara lebih rinci.

Nota

Dalam markup ini, Anda akan melihat dua cara berbeda untuk mengatur properti di XAML. Cara pertama dan terpendek adalah menggunakan sintaks atribut XAML, seperti ini: <object attribute="value">. Ini berfungsi dengan baik untuk nilai-nilai sederhana, seperti <MicaBackdrop Kind="Base"/>. Tetapi hanya berfungsi untuk nilai di mana pengurai XAML tahu cara mengonversi string ke jenis nilai yang diharapkan.

Jika nilai properti lebih kompleks, atau pengurai XAML tidak tahu cara mengonversinya, Anda harus menggunakan sintaks elemen properti untuk membuat objek. Seperti ini:

<object ... >
    <object.property>
        value
    </object.property>
</object>

Misalnya, untuk mengatur Window.SystemBackdrop properti, Anda harus menggunakan sintaks elemen properti dan secara eksplisit membuat MicaBackdrop elemen. Tetapi Anda dapat menggunakan sintaks atribut sederhana untuk mengatur MicaBackdrop.Kind properti .

<Window ... >
   <Window.SystemBackdrop>
       <MicaBackdrop Kind="Base"/>
   </Window.SystemBackdrop>
    ...
</Window>

Dalam MainWindow.xaml, <Window.SystemBackdrop>, <Grid.RowDefinitions>, dan <TitleBar.IconSource> berisi nilai kompleks yang harus diatur dengan sintaks elemen properti.

Pelajari selengkapnya di dokumen:

• panduan sintaks XAML

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat elemen XAML TitleBar yang Anda tambahkan, tetapi akan berada di bawah bilah judul sistem, yang masih ditampilkan.

Anda perlu menulis sedikit kode untuk menyelesaikan mengganti bilah judul sistem.

1. Buka MainWindow.xaml.cs. Anda dapat membuka code-behind untuk MainWindow.xaml (atau file XAML apa pun) dengan tiga cara:

   • MainWindow.xaml Jika file terbuka dan merupakan dokumen aktif yang sedang diedit, tekan F7.
   • MainWindow.xaml Jika file terbuka dan merupakan dokumen aktif yang sedang diedit, klik kanan di editor teks dan pilih Tampilkan Kode.
   • Gunakan Penjelajah Solusi untuk memperluas MainWindow.xaml entri, mengungkapkan MainWindow.xaml.cs file. Klik dua kali file untuk membukanya.

2. Di konstruktor untuk MainWindow, tambahkan kode ini setelah panggilan ke InitializeComponent:

   public MainWindow()
   {
       this.InitializeComponent();
   
       // ↓ Add this. ↓
       // Hide the default system title bar.
       ExtendsContentIntoTitleBar = true;
       // Replace system title bar with the WinUI TitleBar.
       SetTitleBar(AppTitleBar);
       // ↑ Add this. ↑
   }
   

   Properti ExtendsContentIntoTitleBar menyembunyikan bilah judul sistem default dan memperluas XAML aplikasi Anda ke area tersebut. Panggilan ke SetTitleBar kemudian memberi tahu sistem untuk memperlakukan elemen XAML yang Anda tentukan (AppTitleBar) sebagai bilah judul untuk aplikasi.

3. Bangun dan jalankan proyek dengan menekan F5, mengklik tombol Debug "Mulai" di bilah alat, atau dengan memilih menu Jalankan>Mulai Debugging.

Saat menjalankan aplikasi sekarang, Anda akan melihat jendela kosong dengan latar belakang mika dan bilah judul XAML yang menggantikan bilah judul sistem.

Lanjutkan ke langkah 2 - Tambahkan halaman catatan