Membuat halaman untuk catatan

Sekarang Anda akan membuat halaman yang memungkinkan pengguna mengedit catatan, lalu Anda akan menulis kode untuk menyimpan atau menghapus catatan.

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.

Pertama, tambahkan halaman baru ke proyek:

Di panel Penjelajah Solusi Visual Studio, klik kanan proyek >Tambahkan>Item Baru....
Dalam dialog Tambahkan Item Baru , pilih WinUI di daftar templat di sisi kiri jendela. Selanjutnya, pilih templat Halaman Kosong (WinUI 3). Beri nama file NotePage.xaml, lalu pilih Tambahkan.

File NotePage.xaml akan terbuka di tab baru, menampilkan semua markup XAML yang mewakili UI halaman. <Grid> ... </Grid> Ganti elemen di XAML dengan markup berikut:

<Grid Padding="16" RowSpacing="8">
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="400"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <TextBox x:Name="NoteEditor"
         AcceptsReturn="True"
         TextWrapping="Wrap"
         PlaceholderText="Enter your note"
         Header="New note"
         ScrollViewer.VerticalScrollBarVisibility="Auto"
         Width="400"
         Grid.Column="1"/>

    <StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right"
            Spacing="4"
            Grid.Row="1" Grid.Column="1">
        <Button Content="Save" Style="{StaticResource AccentButtonStyle}"/>
        <Button Content="Delete"/>
    </StackPanel>
</Grid>

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

Jika Anda menjalankan aplikasi saat ini, Anda tidak akan melihat halaman catatan yang baru saja Anda buat. Itu karena Anda masih perlu mengaturnya sebagai konten Frame kontrol di MainWindow.
Buka MainWindow.xaml dan atur NotePage sebagai SourcePageType pada Frame, seperti ini:
```
<Frame x:Name="rootFrame" Grid.Row="1"
       SourcePageType="local:NotePage"/>
```
Sekarang saat Anda menjalankan aplikasi, Frame akan memuat instans NotePage dan menunjukkannya kepada pengguna.

Penting

Pemetaan namespace XAML (xmlns) adalah mitra XAML untuk pernyataan C# using . local: adalah awalan yang dipetakan untuk Anda dalam halaman XAML untuk proyek aplikasi Anda (xmlns:local="using:WinUINotes"). Ini dipetakan untuk merujuk ke namespace yang sama yang dibuat untuk berisi x:Class atribut dan kode untuk semua file XAML termasuk App.xaml. Selama Anda menentukan kelas kustom apa pun yang ingin Anda gunakan di XAML di namespace layanan yang sama ini, Anda dapat menggunakan local: awalan untuk merujuk ke jenis kustom Anda di XAML.

Mari kita uraikan bagian kunci kontrol XAML yang ditempatkan di halaman:

UI halaman catatan baru dengan kisi disorot oleh Visual Studio.

Grid.RowDefinitions dan Grid.ColumnDefinitions menentukan kisi dengan 2 baris dan 3 kolom (ditempatkan di bawah bilah judul).
- Baris bawah secara otomatis (Auto) berukuran agar pas dengan kontennya, dua tombol. Baris atas menggunakan semua ruang vertikal yang tersisa (*).
- Kolom tengah lebar 400epx dan merupakan tempat editor catatan pergi. Kolom di kedua sisi kosong dan membagi semua ruang horizontal yang tersisa di antaranya (*).
Nota

Karena cara kerja sistem penskalaan, saat Anda merancang aplikasi XAML, Anda merancang dalam piksel yang efektif, bukan piksel fisik aktual. Piksel yang efektif (epx) adalah unit pengukuran virtual, dan digunakan untuk mengekspresikan dimensi tata letak dan penspasian, terlepas dari kepadatan layar.
<TextBox x:Name="NoteEditor" ... > ... </TextBox> adalah kontrol entri teks (TextBox) yang dikonfigurasi untuk entri teks multibaris, dan ditempatkan di sel Grid tengah atas (Grid.Column="1"). Indeks baris dan kolom berbasis 0, dan secara default, kontrol ditempatkan di baris 0 dan kolom 0 induk Grid. Jadi ini setara dengan menentukan Baris 0, Kolom 1.
<StackPanel Orientation="Horizontal" ... > ... </StackPanel> menentukan kontrol tata letak (StackPanel) yang menumpuk turunannya baik secara vertikal (default) atau horizontal. Ini ditempatkan di sel Grid tengah bawah (Grid.Row="1" Grid.Column="1").

Nota

Grid.Row="1" Grid.Column="1" adalah contoh properti terlampir XAML. Properti terlampir memungkinkan satu objek XAML mengatur properti milik objek XAML yang berbeda. Seringkali, seperti dalam hal ini, elemen anak dapat menggunakan properti terlampir untuk menginformasikan elemen induk mereka tentang bagaimana elemen tersebut akan disajikan di UI.
Dua <Button> kontrol berada di dalam <StackPanel> dan disusun secara horizontal. Anda akan menambahkan kode untuk menangani peristiwa Klik tombol di bagian berikutnya.

Pelajari selengkapnya di dokumen:

Memuat dan menyimpan catatan

NotePage.xaml.cs Buka file code-behind. Saat Anda menambahkan file XAML baru, code-behind berisi satu baris di konstruktor, panggilan ke InitializeComponent metode :

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        public NotePage()
        {
            this.InitializeComponent();
        }
    }
}

Metode membaca InitializeComponent markup XAML dan menginisialisasi semua objek yang ditentukan oleh markup. Objek terhubung dalam hubungan induk-anak mereka, dan penanganan aktivitas yang ditentukan dalam kode dilampirkan ke peristiwa yang diatur dalam XAML.

Sekarang Anda akan menambahkan kode ke NotePage.xaml.cs file code-behind untuk menangani pemuatan dan penyimpanan catatan.

Tambahkan deklarasi variabel berikut ke NotePage kelas :
```
public sealed partial class NotePage : Page
{
    private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    private StorageFile? noteFile = null;
    private string fileName = "note.txt";
```
Saat catatan disimpan, catatan disimpan ke penyimpanan lokal aplikasi sebagai file teks.

Anda menggunakan kelas StorageFolder untuk mengakses folder data lokal aplikasi. Folder ini khusus untuk aplikasi Anda, sehingga catatan yang disimpan di sini tidak dapat diakses oleh aplikasi lain. Anda menggunakan kelas StorageFile untuk mengakses file teks yang disimpan di folder ini. Nama file diwakili oleh fileName variabel . Untuk saat ini, atur fileName ke "note.txt".
Buat penanganan aktivitas untuk peristiwa Dimuat halaman catatan.
```
public NotePage()
{
    this.InitializeComponent();
    // ↓ Add this. ↓
    Loaded += NotePage_Loaded;
}

// ↓ Add this event handler method. ↓
private async void NotePage_Loaded(object sender, RoutedEventArgs e)
{
    noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
    if (noteFile is not null)
    {
        NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
    }
}
```
Dalam metode ini, Anda memanggil TryGetItemAsync untuk mengambil file teks dari folder. Jika file tidak ada, file akan mengembalikan null. Jika file tidak ada, panggil ReadTextAsync untuk membaca teks dari file ke NoteEditor properti Teks kontrol. (Ingat, NoteEditor adalah kontrol yang TextBox Anda buat dalam file XAML. Anda mereferensikannya di sini dalam file code-behind Anda menggunakan yang x:Name Anda tetapkan untuk itu.)

Penting

Anda perlu menandai metode ini dengan async kata kunci karena panggilan akses file tidak sinkron. Singkatnya, jika Anda memanggil metode yang berakhiran ...Async (seperti TryGetItemAsync), Anda dapat menambahkan operator tunggu ke panggilan. Ini membuat kode berikutnya tidak dijalankan sampai panggilan yang ditunggu selesai dan menjaga UI Anda tetap responsif. Saat Anda menggunakan await, metode yang Anda panggil perlu ditandai dengan kata kunci asinkron . Untuk informasi selengkapnya, lihat Memanggil API asinkron di C#.

Pelajari selengkapnya di dokumen:

Menambahkan penanganan aktivitas

Selanjutnya, tambahkan penanganan aktivitas Klik untuk tombol Simpan dan Hapus . Menambahkan penanganan aktivitas adalah sesuatu yang akan sering Anda lakukan saat membuat aplikasi, sehingga Visual Studio menyediakan beberapa fitur untuk membuatnya lebih mudah.

NotePage.xaml Dalam file, letakkan kursor Anda setelah Content atribut di kontrol SimpanButton. Ketik Click=. Pada titik ini, Visual Studio harus memunculkan UI lengkapi otomatis yang terlihat seperti ini:
- Tekan tombol panah bawah untuk memilih <Penanganan> Aktivitas Baru, lalu tekan Tab. Visual Studio akan menyelesaikan atribut dengan Click="Button_Click" dan menambahkan metode penanganan aktivitas bernama Button_Click dalam NotePage.xaml.cs file code-behind.
Sekarang, Anda harus mengganti nama metode menjadi Button_Click sesuatu yang lebih bermakna. Anda akan melakukannya dalam langkah-langkah berikut.
Di NotePage.xaml.cs, temukan metode yang ditambahkan untuk Anda:
```
private void Button_Click(object sender, RoutedEventArgs e)
{

}
```
Tip

Untuk menemukan kode di aplikasi Anda, klik Cari di bilah judul Visual Studio dan gunakan opsi Pencarian Kode . Klik dua kali hasil pencarian untuk membuka kode di editor kode.
Tempatkan kursor Anda sebelum "B" di Button dan ketik Save. Tunggu sebentar, dan nama metode akan disorot dengan warna hijau.
Saat Anda mengarahkan mouse ke atas nama metode, Visual Studio akan menampilkan tipsalat dengan obeng atau ikon bola lampu. Klik tombol panah bawah di samping ikon, lalu klik Ganti Nama 'Button_Click' menjadi 'SaveButton_Click'.

Visual Studio akan mengganti nama metode di mana saja di aplikasi Anda, termasuk dalam file XAML tempat Anda pertama kali menambahkannya ke Button.
Ulangi langkah-langkah ini untuk tombol Hapus , dan ganti nama metode menjadi DeleteButton_Click.

Sekarang setelah penanganan aktivitas dikaitkan, Anda dapat menambahkan kode untuk menyimpan dan menghapus file catatan.

Tambahkan kode ini dalam SaveButton_Click metode untuk menyimpan file. Perhatikan bahwa Anda juga perlu memperbarui tanda tangan metode dengan async kata kunci.
```
private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is null)
    {
        noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
    }
    await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
}
```
Dalam metode , SaveButton_Click Anda terlebih dahulu memeriksa untuk melihat apakah noteFile telah dibuat. Jika itu null, maka Anda harus membuat file baru di folder penyimpanan lokal dengan nama yang diwakili oleh fileName variabel, dan menetapkan file ke noteFile variabel . Kemudian, Anda menulis teks dalam TextBox kontrol ke file yang diwakili oleh noteFile.
Tambahkan kode ini dalam DeleteButton_Click metode untuk menghapus file. Anda juga perlu memperbarui tanda tangan metode dengan async kata kunci di sini.
```
private async void DeleteButton_Click(object sender, RoutedEventArgs e)
{
    if (noteFile is not null)
    {
        await noteFile.DeleteAsync();
        noteFile = null;
        NoteEditor.Text = string.Empty;
    }
}
```
Dalam metode ini DeleteButton_Click , Anda terlebih dahulu memeriksa untuk melihat apakah noteFile ada. Jika ya, hapus file yang diwakili oleh noteFile dari folder penyimpanan lokal dan atur noteFile ke null. Kemudian, reset teks dalam kontrol ke TextBox string kosong.

Penting

Setelah file teks dihapus dari sistem file, penting untuk mengatur noteFile ke null. Ingatlah bahwa noteFile itu adalah StorageFile yang menyediakan akses ke file sistem di aplikasi Anda. Setelah file sistem dihapus, noteFile masih menunjuk ke tempat file sistem berada, tetapi tidak tahu bahwa file tersebut tidak lagi ada. Jika Anda mencoba membaca, menulis, atau menghapus file sistem sekarang, Anda akan mendapatkan kesalahan.
Simpan file dengan menekan CTRL + S, mengklik ikon Simpan di bilah alat, atau dengan memilih menu>NotePage.xaml.cs .

Kode akhir untuk file code-behind akan terlihat seperti ini:

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System;
using Windows.Storage;

namespace WinUINotes
{
    public sealed partial class NotePage : Page
    {
        private StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        private StorageFile? noteFile = null;
        private string fileName = "note.txt";

        public NotePage()
        {
            this.InitializeComponent();
            Loaded += NotePage_Loaded;
        }

        private async void NotePage_Loaded(object sender, RoutedEventArgs e)
        {
            noteFile = (StorageFile)await storageFolder.TryGetItemAsync(fileName);
            if (noteFile is not null)
            {
                NoteEditor.Text = await FileIO.ReadTextAsync(noteFile);
            }
        }

        private async void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is null)
            {
                noteFile = await storageFolder.CreateFileAsync(fileName, CreationCollisionOption.ReplaceExisting);
            }
            await FileIO.WriteTextAsync(noteFile, NoteEditor.Text);
        }

        private async void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            if (noteFile is not null)
            {
                await noteFile.DeleteAsync();
                noteFile = null;
                NoteEditor.Text = string.Empty;
            }
        }
    }
}

Menguji catatan

Dengan kode ini di tempat, Anda dapat menguji aplikasi untuk memastikan catatan disimpan dan dimuat dengan benar.

Bangun dan jalankan proyek dengan menekan F5, mengklik tombol Debug "Mulai" di bilah alat, atau dengan memilih menu Jalankan>Mulai Debugging.
Ketik ke dalam kotak entri teks dan tekan tombol Simpan .
Tutup aplikasi, lalu mulai ulang. Catatan yang Anda masukkan harus dimuat dari penyimpanan perangkat.
Tekan tombol Hapus .
Tutup aplikasi, mulai ulang. Anda harus disajikan dengan catatan kosong baru.

Penting

Setelah Anda mengonfirmasi bahwa menyimpan dan menghapus catatan berfungsi dengan benar, buat dan simpan catatan baru lagi. Anda mungkin ingin memiliki catatan tersimpan untuk menguji aplikasi di langkah selanjutnya.

Lanjutkan ke langkah 3 - Tambahkan tampilan dan model untuk catatan

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-09-03