Bagikan melalui

Membuat aplikasi .NET MAUI

Tutorial ini dirancang untuk menunjukkan cara membuat aplikasi .NET Multi-platform App UI (.NET MAUI) yang hanya menggunakan kode lintas platform. Artinya, kode yang Anda tulis tidak akan spesifik untuk Windows, Android, iOS, atau macOS. Aplikasi yang akan Anda buat akan menjadi aplikasi pencatatan, tempat pengguna dapat membuat, menyimpan, dan memuat beberapa catatan.

Dalam tutorial ini, Anda akan belajar cara:

  • Buat aplikasi .NET MAUI Shell.
  • Jalankan aplikasi Anda di platform yang Anda pilih.
  • Tentukan antarmuka pengguna dengan eXtensible Application Markup Language (XAML), dan berinteraksi dengan elemen XAML melalui kode.
  • Buat tampilan dan ikat ke data.
  • Gunakan navigasi untuk berpindah ke dan dari halaman.

Anda akan menggunakan Visual Studio 2022 untuk membuat aplikasi tempat Anda dapat memasukkan catatan dan menyimpannya ke penyimpanan perangkat. Aplikasi akhir ditampilkan di sini:

Cuplikan layar akhir aplikasi catatan, mencantumkan catatan. Cuplikan layar akhir aplikasi catatan, menambahkan catatan.

Membuat proyek

Sebelum dapat memulai tutorial ini, Anda harus mengikuti artikel Membangun aplikasi pertama Anda. Saat membuat proyek, gunakan pengaturan berikut:

  • Nama Proyek

    Ini harus diatur ke Notes. Jika proyek diberi nama sesuatu yang berbeda, kode yang Anda salin dan tempel dari tutorial ini dapat mengakibatkan kesalahan build.

  • Menempatkan solusi dan proyek di direktori yang sama

    Hapus centang pada pengaturan ini.

Atur nama proyek .NET MAUI ke Catatan di Visual Studio.

Pilih versi .NET terbaru saat membuat proyek Anda.

Pilih perangkat target

Aplikasi MAUI .NET dirancang untuk berjalan pada beberapa sistem operasi dan perangkat. Anda harus memilih target mana yang ingin Anda uji dan debug aplikasi Anda.

Atur Target Debug di toolbar Visual Studio ke perangkat yang ingin Anda debug dan uji. Langkah-langkah berikut menunjukkan pengaturan Target Debug ke Android:

Memilih target debug Android untuk aplikasi .NET MAUI di Visual Studio.

  1. Pilih tombol drop-down Target Debug.
  2. Pilih item Android Emulators .
  3. Pilih perangkat emulator.

Menyesuaikan shell aplikasi

Saat Visual Studio membuat proyek .NET MAUI, empat file kode penting dihasilkan. Ini dapat dilihat di panel Penjelajah Solusi Visual Studio:

Penjelajah Solusi memperlihatkan file untuk proyek .NET MAUI di Visual Studio.

File-file ini membantu mengonfigurasi dan menjalankan aplikasi .NET MAUI. Setiap file melayani tujuan yang berbeda, dijelaskan di bawah ini:

  • MauiProgram.cs

    Ini adalah file kode yang mem-bootstrap aplikasi Anda. Kode dalam file ini berfungsi sebagai titik masuk lintas platform aplikasi, yang mengonfigurasi dan memulai aplikasi. Kode startup templat menunjuk ke kelas yang App ditentukan oleh file App.xaml .

  • App.xaml dan App.xaml.cs

    Hanya untuk menjaga hal-hal sederhana, kedua file ini disebut sebagai satu file. Umumnya ada dua file dengan file XAML apa pun, file .xaml itu sendiri, dan file kode yang sesuai yang merupakan item anak darinya dalam Penjelajah Solusi. File .xaml berisi markup XAML dan file kode berisi kode yang dibuat oleh pengguna untuk berinteraksi dengan markup XAML.

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

  • AppShell.xaml dan AppShell.xaml.cs

    File ini mendefinisikan AppShell kelas, yang digunakan untuk menentukan hierarki visual aplikasi.

  • MainPage.xaml dan MainPage.xaml.cs

    Ini adalah halaman startup yang ditampilkan oleh aplikasi. File MainPage.xaml menentukan UI (antarmuka pengguna) halaman. MainPage.xaml.cs berisi kode belakang untuk XAML, seperti kode untuk peristiwa klik tombol.

Menambahkan halaman "tentang"

Penyesuaian pertama yang akan Anda lakukan adalah menambahkan halaman lain ke proyek. Halaman ini adalah halaman "tentang", yang mewakili informasi tentang aplikasi ini, seperti penulis, versi, dan mungkin tautan untuk informasi lebih lanjut.

  1. Di panel Penjelajah Solusi Visual Studio, klik kanan proyek >Tambahkan>Item Baru.

    Mengklik kanan proyek di Visual Studio dan memilih Item Baru.

  2. Dalam dialog Tambahkan Item Baru, pilih .NET MAUI di daftar templat di sisi kiri jendela. Selanjutnya, pilih templat .NET MAUI ContentPage (XAML). Beri nama file AboutPage.xaml, lalu pilih Tambahkan.

    Menambahkan ContentPage baru ke proyek. ContentPage diberi nama AboutPage.xaml.

  3. File AboutPage.xaml akan membuka tab dokumen baru, menampilkan semua markup XAML yang mewakili UI halaman. Ganti markup XAML dengan markup berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.AboutPage">
    <VerticalStackLayout Spacing="10" Margin="10">
        <HorizontalStackLayout Spacing="10">
            <Image Source="dotnet_bot.png"
                   SemanticProperties.Description="The dot net bot waving hello!"
                   HeightRequest="64" />
            <Label FontSize="22" FontAttributes="Bold" Text="Notes" VerticalOptions="End" />
            <Label FontSize="22" Text="v1.0" VerticalOptions="End" />
        </HorizontalStackLayout>

        <Label Text="This app is written in XAML and C# with .NET MAUI." />
        <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
    </VerticalStackLayout>
</ContentPage>

  4. Simpan file dengan menekan Ctrl+S atau dengan memilih menu Simpan File>TentangPage.xaml.

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

  • <ContentPage> adalah objek akar untuk AboutPage kelas .

  • <VerticalStackLayout> adalah satu-satunya objek anak dari ContentPage. ContentPage hanya dapat memiliki satu objek anak. Jenisnya VerticalStackLayout dapat memiliki beberapa anak. Kontrol tata letak ini menyusun elemen-elemennya secara vertikal, satu per satu.

  • <HorizontalStackLayout> beroperasi sama dengan <VerticalStackLayout>, kecuali anak-anaknya diatur secara horizontal.

  • <Image> menampilkan gambar, dalam hal ini menggunakan dotnet_bot.png gambar yang dilengkapi dengan setiap proyek .NET MAUI.

    Penting

    File yang ditambahkan ke proyek sebenarnya dotnet_bot.svgadalah . .NET MAUI mengonversi file Scalable Vector Graphics (SVG) ke file Portable Network Graphic (PNG) berdasarkan perangkat target. Oleh karena itu, saat menambahkan file SVG ke proyek aplikasi .NET MAUI Anda, file tersebut harus dirujuk dari XAML atau C# dengan .png ekstensi. Satu-satunya referensi ke file SVG harus ada di file proyek Anda.

  • <Label> mengendalikan tampilan teks.

  • <Button> kontrol dapat ditekan oleh pengguna, yang meningkatkan Clicked peristiwa. Anda dapat menjalankan kode sebagai respons terhadap peristiwa Clicked.

  • Clicked="LearnMore_Clicked"

    Peristiwa Clicked tombol ditetapkan ke LearnMore_Clicked penanganan aktivitas, yang akan ditentukan dalam file code-behind. Anda akan membuat kode ini di langkah berikutnya.

Menangani peristiwa Yang Diklik

Langkah selanjutnya adalah menambahkan kode untuk peristiwa tombol Clicked .

  1. Di panel Penjelajah Solusi Visual Studio, perluas file AboutPage.xaml untuk mengungkapkan file code-behind AboutPage.xaml.cs. Kemudian, klik dua kali pada file AboutPage.xaml.cs untuk membukanya di editor kode.

    Gambar jendela Penjelajah Solusi di Visual Studio, dengan kotak merah menyoroti ikon perluas.

  2. Tambahkan kode penanganan aktivitas berikut LearnMore_Clicked , yang membuka browser sistem ke URL tertentu:

    private async void LearnMore_Clicked(object sender, EventArgs e)
{
    // Navigate to the specified URL in the system browser.
    await Launcher.Default.OpenAsync("https://aka.ms/maui");
}

    Perhatikan bahwa async kata kunci telah ditambahkan ke deklarasi metode, yang memungkinkan penggunaan await kata kunci saat membuka browser sistem.

  3. Simpan file dengan menekan Ctrl+S atau dengan memilih menu Simpan File>AboutPage.xaml.cs.

Setelah XAML dan kode di belakang AboutPage selesai, Anda harus menampilkannya di aplikasi.

Menambahkan sumber daya gambar

Beberapa kontrol dapat menggunakan gambar, yang meningkatkan cara pengguna berinteraksi dengan aplikasi Anda. Di bagian ini, Anda akan mengunduh dua gambar yang akan digunakan di aplikasi, bersama dengan dua gambar alternatif untuk digunakan dengan iOS.

Unduh gambar berikut:

Setelah mengunduh gambar, Anda dapat memindahkannya dengan File Explorer ke folder Resources\Images proyek. File apa pun dalam folder ini secara otomatis disertakan dalam proyek sebagai sumber daya MauiImage . Anda juga dapat menggunakan Visual Studio untuk menambahkan gambar ke proyek Anda. Jika Anda memindahkan gambar dengan tangan, lewati prosedur berikut.

Penting

Jangan lewati pengunduhan gambar khusus iOS; mereka diharuskan untuk menyelesaikan tutorial ini.

Memindahkan gambar dengan Visual Studio

  1. Di panel Penjelajah Solusi Visual Studio, perluas folder Sumber Daya , yang mengungkapkan folder Gambar .

    Petunjuk / Saran

    Anda dapat menggunakan File Explorer untuk menyeret dan meletakkan gambar langsung ke panel Penjelajah Solusi, di atas folder Gambar. Ini secara otomatis memindahkan file ke folder, dan menyertakannya dalam proyek. Jika Anda memilih untuk menyeret dan meletakkan file, abaikan sisa prosedur ini.

  2. Klik kanan pada Gambar dan pilih Tambahkan>Item yang Ada.

  3. Navigasikan ke folder yang berisi gambar yang diunduh.

  4. Ubah filter ke filter jenis file menjadi File Gambar.

  5. Tahan Ctrl dan klik setiap gambar yang Anda unduh, lalu tekan Tambahkan

Tambahkan empat gambar ikon ke proyek .NET MAUI.

Mengubah shell aplikasi

Seperti yang disebutkan di awal artikel ini, AppShell kelas mendefinisikan hierarki visual aplikasi, markup XAML yang digunakan dalam membuat UI aplikasi. Perbarui XAML untuk menambahkan TabBar kontrol:

  1. Klik dua kali file AppShell.xaml di panel Penjelajah Solusi untuk membuka editor XAML. Ganti markup XAML dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:MainPage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

  2. Simpan file dengan menekan Ctrl+S atau dengan memilih menu Simpan File>AppShell.xaml.

Mari kita uraikan bagian kunci XAML:

  • <Shell> adalah objek akar markup XAML.
  • <TabBar> adalah konten dari Shell.
  • Dua <ShellContent> objek di dalam <TabBar>. Sebelum Anda mengganti kode templat, ada satu <ShellContent> objek, menunjuk ke MainPage halaman.

dan TabBar anak-anaknya tidak mewakili elemen antarmuka pengguna apa pun, melainkan organisasi hierarki visual aplikasi. Shell mengambil objek ini dan menghasilkan antarmuka pengguna untuk konten, dengan bilah di bagian atas yang mewakili setiap halaman. Properti ShellContent.Icon untuk setiap halaman menggunakan ekstensi markup OnPlatform. Ekstensi markup XAML ini digunakan untuk menentukan nilai yang berbeda untuk platform yang berbeda. Dalam contoh ini, setiap platform menggunakan ikon icon_about.png secara default, tetapi iOS dan MacCatalyst menggunakan icon_about_ios.png.

Setiap <ShellContent> objek menunjuk ke halaman untuk ditampilkan. Ini diatur oleh ContentTemplate properti .

Menjalankan aplikasi

Jalankan aplikasi dengan menekan F5 atau menekan tombol putar di bagian atas Visual Studio:

Tombol Target Debug Visual Studio dengan teks Windows Machine.

Anda akan melihat bahwa ada dua tab: Catatan dan Tentang. Tekan tab Tentang dan aplikasi menavigasi ke yang AboutPage Anda buat. Tekan tombol Pelajari Selengkapnya untuk membuka browser web.

Tentang halaman tutorial aplikasi .NET MAUI.

Tutup aplikasi dan kembali ke Visual Studio. Jika Anda menggunakan emulator Android, hentikan aplikasi di perangkat virtual atau tekan tombol berhenti di bagian atas Visual Studio:

Tombol hentikan penelusuran kesalahan Visual Studio.

Membuat halaman untuk catatan

Sekarang setelah aplikasi berisi MainPage dan AboutPage, Anda dapat mulai membuat aplikasi lainnya. Pertama, Anda akan membuat halaman yang memungkinkan pengguna untuk membuat dan menampilkan catatan, lalu Anda akan menulis kode untuk memuat dan menyimpan catatan.

Halaman catatan akan menampilkan catatan dan memungkinkan Anda menyimpan atau menghapusnya. Pertama, tambahkan halaman baru ke proyek:

  1. Di panel Penjelajah Solusi Visual Studio, klik kanan proyek >Tambahkan>Item Baru.

  2. Dalam dialog Tambahkan Item Baru, pilih .NET MAUI di daftar templat di sisi kiri jendela. Selanjutnya, pilih templat .NET MAUI ContentPage (XAML). Beri nama file NotePage.xaml, lalu pilih Tambahkan.

  3. File NotePage.xaml akan terbuka di tab baru, menampilkan semua markup XAML yang mewakili UI halaman. Ganti markup kode XAML markup berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Notes.NotePage"
             Title="Note">
    <VerticalStackLayout Spacing="10" Margin="5">
        <Editor x:Name="TextEditor"
                Placeholder="Enter your note"
                HeightRequest="100" />

        <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
            <Button Text="Save"
                    Clicked="SaveButton_Clicked" />

            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="DeleteButton_Clicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

  4. Simpan file dengan menekan Ctrl+S atau dengan memilih menu Simpan File>NotePage.xaml.

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

  • <VerticalStackLayout> mengatur kontrol anak-anaknya secara vertikal, satu di bawah yang lain.

  • <Editor> adalah kontrol editor teks multibaris, dan merupakan kontrol pertama di dalam VerticalStackLayout.

  • <Grid> adalah kontrol tata letak, dan merupakan kontrol kedua di dalam VerticalStackLayout.

    Kontrol ini menentukan kolom dan baris untuk membuat sel. Kontrol anak ditempatkan dalam sel-sel tersebut.

    Secara default, Grid kontrol berisi satu baris dan kolom, membuat satu sel. Kolom ditentukan dengan lebar, dan * nilai untuk lebar memberi tahu kolom untuk mengisi ruang sebanyak mungkin. Cuplikan sebelumnya mendefinisikan dua kolom, keduanya menggunakan ruang sebanyak mungkin, yang secara merata mendistribusikan kolom di ruang yang dialokasikan: ColumnDefinitions="*,*". Ukuran kolom dipisahkan oleh , karakter.

    Kolom dan baris yang ditentukan oleh Grid diindeks mulai dari 0. Jadi kolom pertama adalah indeks 0, kolom kedua adalah indeks 1, dan sebagainya.

  • Dua <Button> kontrol berada di <Grid> dalam dan diberi kolom. Jika kontrol anak tidak menentukan penetapan kolom, kontrol tersebut secara otomatis ditetapkan ke kolom pertama. Dalam markup ini, tombol pertama adalah tombol "Simpan" dan secara otomatis ditetapkan ke kolom pertama, kolom 0. Tombol kedua adalah tombol "Hapus" dan ditetapkan ke kolom kedua, kolom 1.

    Perhatikan bahwa dua tombol telah Clicked menangani peristiwa. Anda akan menambahkan kode untuk handler tersebut di bagian berikutnya.

Memuat dan menyimpan catatan

Buka file NotePage.xaml.cs code-behind. Anda dapat membuka code-behind untuk file NotePage.xaml dengan tiga cara:

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

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

namespace Notes;

public partial class NotePage : ContentPage
{
    public NotePage()
    {
        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 setelah Anda memahami sedikit lebih banyak tentang file code-behind, Anda akan menambahkan kode ke file NotePage.xaml.cs code-behind untuk menangani pemuatan dan penyimpanan catatan.

  1. Saat catatan dibuat, catatan disimpan ke perangkat sebagai file teks. Nama file diwakili oleh _fileName variabel . Tambahkan deklarasi variabel berikut string ke NotePage kelas :

    public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    Kode di atas membuat jalur ke file, menyimpannya di direktori data lokal aplikasi. Nama file notes.txt.

  2. Di konstruktor kelas, setelah metode dipanggil InitializeComponent , baca file dari perangkat dan simpan kontennya di TextEditor properti kontrol Text :

    public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}

  3. Selanjutnya, tambahkan kode untuk menangani peristiwa yang Clicked ditentukan dalam XAML:

    private void SaveButton_Clicked(object sender, EventArgs e)
{
    // Save the file.
    File.WriteAllText(_fileName, TextEditor.Text);
}

private void DeleteButton_Clicked(object sender, EventArgs e)
{
    // Delete the file.
    if (File.Exists(_fileName))
        File.Delete(_fileName);

    TextEditor.Text = string.Empty;
}

    Metode SaveButton_Clicked menulis teks dalam Editor kontrol, ke file yang diwakili oleh _fileName variabel.

    Metode ini DeleteButton_Clicked pertama-tama memeriksa apakah file yang diwakili oleh _fileName variabel, dan jika ada, akan menghapusnya. Selanjutnya, Editor teks kontrol dihapus.

  4. Simpan file dengan menekan Ctrl+S atau dengan memilih menu Simpan File>NotePage.xaml.cs.

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

namespace Notes;

public partial class NotePage : ContentPage
{
    string _fileName = Path.Combine(FileSystem.AppDataDirectory, "notes.txt");

    public NotePage()
    {
        InitializeComponent();

        if (File.Exists(_fileName))
            TextEditor.Text = File.ReadAllText(_fileName);
    }

    private void SaveButton_Clicked(object sender, EventArgs e)
    {
        // Save the file.
        File.WriteAllText(_fileName, TextEditor.Text);
    }

    private void DeleteButton_Clicked(object sender, EventArgs e)
    {
        // Delete the file.
        if (File.Exists(_fileName))
            File.Delete(_fileName);

        TextEditor.Text = string.Empty;
    }
}

Menguji catatan

Sekarang halaman catatan selesai, Anda memerlukan cara untuk menyajikannya kepada pengguna. Buka file AppShell.xaml, dan ubah entri pertama ShellContent untuk menunjuk ke NotePage alih-alih MainPage:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Simpan file dan jalankan aplikasi. Coba ketik ke dalam kotak entri dan tekan tombol Simpan . Tutup aplikasi, dan buka kembali. Catatan yang Anda masukkan harus dimuat dari penyimpanan perangkat.

Halaman entri catatan di aplikasi .NET MAUI.

Mengikat data ke UI dan menavigasi halaman

Bagian tutorial ini memperkenalkan konsep tampilan, model, dan navigasi dalam aplikasi.

Dalam langkah-langkah tutorial sebelumnya, Anda menambahkan dua halaman ke proyek: NotePage dan AboutPage. Halaman mewakili tampilan data. NotePage adalah "tampilan" yang menampilkan "data catatan" dan AboutPage adalah "tampilan" yang menampilkan "data informasi aplikasi." Kedua tampilan ini memiliki model data yang dikodekan secara permanen, atau disematkan di dalamnya, dan Anda harus memisahkan model data dari tampilan.

Apa manfaat memisahkan model dari tampilan? Ini memungkinkan Anda untuk merancang tampilan untuk mewakili dan berinteraksi dengan bagian mana pun dari model tanpa khawatir tentang kode aktual yang mengimplementasikan model. Ini dicapai menggunakan pengikatan data, sesuatu yang akan disajikan nanti dalam tutorial ini. Namun, untuk saat ini, mari kita restrukturisasi proyek.

Pisahkan tampilan dan model

Refaktor kode yang ada untuk memisahkan model dari tampilan. Beberapa langkah berikutnya akan mengatur kode sehingga tampilan dan model didefinisikan secara terpisah satu sama lain.

  1. Hapus MainPage.xaml dan MainPage.xaml.cs dari proyek Anda, karena tidak lagi diperlukan. Di panel Penjelajah Solusi, temukan entri untuk MainPage.xaml, klik kanan dan pilih Hapus.

    Petunjuk / Saran

    Menghapus item MainPage.xaml juga harus menghapus item MainPage.xaml.cs . Jika MainPage.xaml.cs tidak dihapus, klik kanan padanya dan pilih Hapus.

  2. Klik kanan pada Notes proyek dan pilih Tambahkan>Folder Baru. Beri nama folder Models.

  3. Klik kanan pada Notes proyek dan pilih Tambahkan>Folder Baru. Beri nama folder Views.

  4. Temukan item NotePage.xaml dan seret ke Views folder. NotePage.xaml.cs harus bergerak dengannya.

    Penting

    Saat Anda memindahkan file, Visual Studio biasanya meminta Anda dengan peringatan tentang bagaimana operasi pemindahan mungkin memakan waktu lama. Ini seharusnya tidak menjadi masalah di sini, tekan OK jika Anda melihat peringatan ini.

    Visual Studio mungkin juga menanyakan apakah Anda ingin menyesuaikan namespace file yang dipindahkan. Pilih Tidak karena langkah berikutnya akan mengubah namespace layanan.

  5. Temukan item AboutPage.xaml dan seret ke Views folder. AboutPage.xaml.cs harus bergerak dengan itu.

Memperbarui namespace tampilan

Setelah tampilan dipindahkan ke Views folder, Anda harus memperbarui namespace agar cocok. Namespace layanan untuk file XAML dan code-behind halaman diatur ke Notes. Ini perlu diperbarui ke Notes.Views.

  1. Di panel Penjelajah Solusi, perluas NotePage.xaml dan AboutPage.xaml untuk mengungkapkan file code-behind:

    Proyek Catatan dengan folder Tampilan dan tampilan halaman diperluas.

  2. Klik dua kali pada item NotePage.xaml.cs untuk membuka editor kode. Ubah namespace menjadi Notes.Views:

    namespace Notes.Views;

  3. Ulangi langkah-langkah sebelumnya untuk item AboutPage.xaml.cs .

  4. Klik dua kali pada item NotePage.xaml untuk membuka editor XAML. Namespace lama dirujuk melalui x:Class atribut , yang menentukan jenis kelas mana yang di belakang kode untuk XAML. Entri ini bukan hanya namespace, tetapi namespace layanan dengan jenis . Ubah nilai menjadi x:ClassNotes.Views.NotePage:

    x:Class="Notes.Views.NotePage"

  5. Ulangi langkah sebelumnya untuk item AboutPage.xaml , tetapi atur nilainya x:Class ke Notes.Views.AboutPage.

Memperbaiki referensi namespace di Shell

AppShell.xaml mendefinisikan dua tab, satu untuk NotesPage dan satu lagi untuk AboutPage. Sekarang setelah kedua halaman tersebut dipindahkan ke namespace baru, pemetaan jenis di XAML sekarang tidak valid. Di panel Penjelajah Solusi, klik dua kali pada entri AppShell.xaml untuk membukanya di editor XAML. Ini akan terlihat seperti cuplikan berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Notes"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate local:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Namespace layanan .NET diimpor ke XAML melalui deklarasi namespace XML. Dalam markup XAML sebelumnya, ini adalah xmlns:local="clr-namespace:Notes" atribut dalam elemen root: <Shell>. Format mendeklarasikan namespace XML untuk mengimpor namespace .NET dalam rakitan yang sama adalah:

xmlns:{XML namespace name}="clr-namespace:{.NET namespace}"

Jadi deklarasi sebelumnya memetakan namespace local XML ke namespace .NET dari Notes. Praktik umum untuk memetakan nama local ke namespace layanan akar proyek Anda.

local Hapus namespace XML dan tambahkan yang baru. Namespace XML baru ini akan memetakan ke namespace layanan .NET , Notes.Viewsjadi beri nama views. Deklarasi akan terlihat seperti atribut berikut: xmlns:views="clr-namespace:Notes.Views".

Namespace local XML digunakan oleh ShellContent.ContentTemplate properti, ubah menjadi views. XAML Anda sekarang akan terlihat seperti cuplikan berikut:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Notes.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate views:NotePage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate views:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Anda sekarang dapat menjalankan aplikasi tanpa kesalahan pengkompilasi, dan semuanya masih harus berfungsi seperti sebelumnya.

Tentukan model

Saat ini model adalah data yang disematkan dalam catatan dan tentang tampilan. Kita akan membuat kelas baru untuk mewakili data tersebut. Pertama, model untuk mewakili data halaman catatan:

  1. Di panel Penjelajah Solusi , klik kanan pada Models folder dan pilih Tambahkan>Kelas.

  2. Beri nama kelas Note.cs dan tekan Tambahkan.

  3. Buka Note.cs dan ganti kode dengan cuplikan berikut:

    namespace Notes.Models;

internal class Note
{
    public string Filename { get; set; }
    public string Text { get; set; }
    public DateTime Date { get; set; }
}

  4. Simpan file tersebut.

Selanjutnya, buat model halaman tentang:

  1. Di panel Penjelajah Solusi , klik kanan pada Models folder dan pilih Tambahkan>Kelas.

  2. Beri nama kelas About.cs dan tekan Tambahkan.

  3. Buka About.cs dan ganti kode dengan cuplikan berikut:

    namespace Notes.Models;

internal class About
{
    public string Title => AppInfo.Name;
    public string Version => AppInfo.VersionString;
    public string MoreInfoUrl => "https://aka.ms/maui";
    public string Message => "This app is written in XAML and C# with .NET MAUI.";
}

  4. Simpan file tersebut.

Halaman Perbarui Tentang

Halaman tentang akan menjadi halaman tercepat untuk diperbarui dan Anda akan dapat menjalankan aplikasi dan melihat cara memuat data dari model.

  1. Di panel Penjelajah Solusi, buka file Views\AboutPage.xaml.

  2. Ganti konten dengan cuplikan berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Notes.Models"
             x:Class="Notes.Views.AboutPage"
             x:DataType="models:About">
    <ContentPage.BindingContext>
        <models:About />
    </ContentPage.BindingContext>
    <VerticalStackLayout Spacing="10" Margin="10">
        <HorizontalStackLayout Spacing="10">
            <Image Source="dotnet_bot.png"
                   SemanticProperties.Description="The dot net bot waving hello!"
                   HeightRequest="64" />
            <Label FontSize="22" FontAttributes="Bold" Text="{Binding Title}" VerticalOptions="End" />
            <Label FontSize="22" Text="{Binding Version}" VerticalOptions="End" />
        </HorizontalStackLayout>

        <Label Text="{Binding Message}" />
        <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
    </VerticalStackLayout>

</ContentPage>

Mari kita lihat baris yang diubah, yang disorot dalam cuplikan sebelumnya:

  • xmlns:models="clr-namespace:Notes.Models"

    Baris ini memetakan Notes.Models namespace layanan .NET ke models namespace XML.

  • x:DataType="models:About"

    Baris ini menginstruksikan pengkompilasi XAML untuk mengkompilasi semua ekspresi pengikatan untuk meningkatkan performa runtime, dan menyelesaikan ekspresi pengikatan terhadap jenis Notes.Models.About.

  • Properti BindingContext diatur ContentPage ke instans Note.Models.About kelas, menggunakan namespace XML dan objek .models:About Ini diatur menggunakan sintaks elemen properti alih-alih atribut XML.

    Penting

    Hingga saat ini, properti telah diatur menggunakan atribut XML. Ini berfungsi dengan baik untuk nilai-nilai sederhana, seperti Label.FontSize properti. Tetapi jika nilai properti lebih kompleks, Anda harus menggunakan sintaks elemen properti untuk membuat objek. Pertimbangkan contoh berikut dari membuat label dengan kumpulan propertinya FontSize :

    <Label FontSize="22" />

    Properti yang sama FontSize dapat diatur menggunakan sintaks elemen properti:

    <Label>
    <Label.FontSize>
        22
    </Label.FontSize>
</Label>

  • Tiga <Label> kontrol mengubah nilai propertinya Text dari string yang dikodekan secara permanen ke sintaks pengikatan: {Binding PATH}.

    {Binding} sintaks diproses pada run-time, memungkinkan nilai yang dikembalikan dari pengikatan menjadi dinamis. Bagian PATH dari {Binding PATH} adalah jalur properti yang akan diikat. Properti berasal dari kontrol BindingContextsaat ini. <Label> Dengan kontrol, BindingContext tidak diatur. Konteks diwarisi dari induk ketika tidak diatur oleh kontrol, yang dalam hal ini, konteks pengaturan objek induk adalah objek akar: ContentPage.

    Objek dalam BindingContext adalah instans About model. Jalur pengikatan salah satu label mengikat Label.Text properti ke About.Title properti .

Perubahan akhir pada halaman tentang sedang memperbarui klik tombol yang membuka halaman web. URL dikodekan secara permanen di kode belakang, tetapi URL harus berasal dari model yang ada di BindingContext properti .

  1. Di panel Penjelajah Solusi, buka file Views\AboutPage.xaml.cs.

  2. Ganti metode LearnMore_Clicked dengan kode berikut:

    private async void LearnMore_Clicked(object sender, EventArgs e)
{
    if (BindingContext is Models.About about)
    {
        // Navigate to the specified URL in the system browser.
        await Launcher.Default.OpenAsync(about.MoreInfoUrl);
    }
}

Jika Anda melihat baris yang disorot, kode memeriksa apakah BindingContext adalah Models.About jenis, dan jika ya, menetapkannya ke about variabel. Baris berikutnya di dalam if pernyataan membuka browser ke URL yang disediakan oleh about.MoreInfoUrl properti .

Jalankan aplikasi dan Anda akan melihat bahwa aplikasi berjalan persis sama seperti sebelumnya. Coba ubah nilai tentang model dan lihat bagaimana UI dan URL yang dibuka oleh browser juga berubah.

Halaman Perbarui Catatan

Bagian sebelumnya mengikat about tampilan halaman ke about model, dan sekarang Anda akan melakukan hal yang sama, mengikat note tampilan ke note model. Namun, dalam hal ini, model tidak akan dibuat di XAML tetapi akan disediakan dalam kode-belakang dalam beberapa langkah berikutnya.

  1. Di panel Penjelajah Solusi, buka file Views\NotePage.xaml.

  2. Ganti konten dengan cuplikan berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Notes.Models"
             x:Class="Notes.Views.NotePage"
             Title="Note"
             x:DataType="models:Note">
    <VerticalStackLayout Spacing="10" Margin="5">
        <Editor x:Name="TextEditor"
                Placeholder="Enter your note"
                Text="{Binding Text}"
                HeightRequest="100" />

        <Grid ColumnDefinitions="*,*" ColumnSpacing="4">
            <Button Text="Save"
                    Clicked="SaveButton_Clicked" />

            <Button Grid.Column="1"
                    Text="Delete"
                    Clicked="DeleteButton_Clicked" />
        </Grid>
    </VerticalStackLayout>
</ContentPage>

Mari kita lihat baris yang diubah, yang disorot dalam cuplikan sebelumnya:

  • xmlns:models="clr-namespace:Notes.Models"

    Baris ini memetakan Notes.Models namespace layanan .NET ke models namespace XML.

  • x:DataType="models:Note"

    Baris ini menginstruksikan pengkompilasi XAML untuk mengkompilasi semua ekspresi pengikatan untuk meningkatkan performa runtime, dan menyelesaikan ekspresi pengikatan terhadap jenis Notes.Models.Note.

  • Text="{Binding Text}"

    Baris ini mengubah <Editor> kontrol dengan menambahkan Text properti , dan dengan mengikat properti ke Text properti .

Modifikasi untuk code-behind lebih rumit daripada XAML. Kode saat ini memuat konten file di konstruktor, lalu mengaturnya langsung ke TextEditor.Text properti . Berikut adalah seperti apa kode saat ini:

public NotePage()
{
    InitializeComponent();

    if (File.Exists(_fileName))
        TextEditor.Text = File.ReadAllText(_fileName);
}

Alih-alih memuat catatan di konstruktor, buat metode baru LoadNote . Metode ini akan melakukan hal berikut:

  • Terima parameter nama file.
  • Buat model catatan baru dan atur nama file.
  • Jika file ada, muat kontennya ke dalam model.
  • Jika file ada, perbarui model dengan tanggal file dibuat.
  • Atur BindingContext halaman ke model.

  1. Di panel Penjelajah Solusi, buka file Views\NotePage.xaml.cs.

  2. Tambahkan metode berikut ke kelas:

    private void LoadNote(string fileName)
{
    Models.Note noteModel = new Models.Note();
    noteModel.Filename = fileName;

    if (File.Exists(fileName))
    {
        noteModel.Date = File.GetCreationTime(fileName);
        noteModel.Text = File.ReadAllText(fileName);
    }

    BindingContext = noteModel;
}

  3. Perbarui konstruktor kelas untuk memanggil LoadNote. Nama file untuk catatan harus berupa nama yang dibuat secara acak untuk dibuat di direktori data lokal aplikasi.

    public NotePage()
{
    InitializeComponent();

    string appDataPath = FileSystem.AppDataDirectory;
    string randomFileName = $"{Path.GetRandomFileName()}.notes.txt";

    LoadNote(Path.Combine(appDataPath, randomFileName));
}

Menambahkan tampilan dan model yang mencantumkan semua catatan

Bagian tutorial ini menambahkan bagian akhir aplikasi, tampilan yang menampilkan semua catatan yang dibuat sebelumnya.

Beberapa catatan dan navigasi

Saat ini tampilan catatan menampilkan satu catatan. Untuk menampilkan beberapa catatan, buat tampilan dan model baru: AllNotes.

  1. Di panel Penjelajah Solusi , klik kanan pada Views folder dan pilih Tambahkan>Item Baru
  2. Dalam dialog Tambahkan Item Baru, pilih .NET MAUI di daftar templat di sisi kiri jendela. Selanjutnya, pilih templat .NET MAUI ContentPage (XAML). Beri nama file AllNotesPage.xaml, lalu pilih Tambahkan.
  3. Di panel Penjelajah Solusi , klik kanan pada Models folder dan pilih Tambahkan>Kelas
  4. Beri nama kelas AllNotes.cs dan tekan Tambahkan.

Kode model AllNotes

Model baru akan mewakili data yang diperlukan untuk menampilkan beberapa catatan. Data ini akan menjadi properti yang mewakili kumpulan catatan. Koleksi akan menjadi ObservableCollection koleksi khusus. Saat kontrol yang mencantumkan beberapa item, seperti ListView, terikat ke ObservableCollection, keduanya bekerja sama untuk secara otomatis menjaga daftar item tetap sinkron dengan koleksi. Jika daftar menambahkan item, koleksi akan diperbarui. Jika koleksi menambahkan item, kontrol akan diperbarui secara otomatis dengan item baru.

  1. Di panel Penjelajah Solusi, buka file Models\AllNotes.cs.

  2. Ganti kode dengan cuplikan berikut:

    using System.Collections.ObjectModel;

namespace Notes.Models;

internal class AllNotes
{
    public ObservableCollection<Note> Notes { get; set; } = new ObservableCollection<Note>();

    public AllNotes() =>
        LoadNotes();

    public void LoadNotes()
    {
        Notes.Clear();

        // Get the folder where the notes are stored.
        string appDataPath = FileSystem.AppDataDirectory;

        // Use Linq extensions to load the *.notes.txt files.
        IEnumerable<Note> notes = Directory

            // Select the file names from the directory
            .EnumerateFiles(appDataPath, "*.notes.txt")

            // Each file name is used to create a new Note
            .Select(filename => new Note()
            {
                Filename = filename,
                Text = File.ReadAllText(filename),
                Date = File.GetLastWriteTime(filename)
            })

            // With the final collection of notes, order them by date
            .OrderBy(note => note.Date);

        // Add each note into the ObservableCollection
        foreach (Note note in notes)
            Notes.Add(note);
    }
}

Kode sebelumnya mendeklarasikan koleksi, bernama Notes, dan menggunakan LoadNotes metode untuk memuat catatan dari perangkat. Metode ini menggunakan ekstensi LINQ untuk memuat, mengubah, dan mengurutkan data ke Notes dalam koleksi.

Mendesain halaman AllNotes

Selanjutnya, tampilan perlu dirancang untuk mendukung model AllNotes .

  1. Di panel Penjelajah Solusi, buka file Views\AllNotesPage.xaml.

  2. Ganti kode dengan markup berikut:

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:models="clr-namespace:Notes.Models"
             x:Class="Notes.Views.AllNotesPage"
             Title="Your Notes"
             x:DataType="models:AllNotes">
    <!-- Add an item to the toolbar -->
    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add" Clicked="Add_Clicked" IconImageSource="{FontImage Glyph='+', Color=Black, Size=22}" />
    </ContentPage.ToolbarItems>

    <!-- Display notes in a list -->
    <CollectionView x:Name="notesCollection"
                        ItemsSource="{Binding Notes}"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="notesCollection_SelectionChanged">

        <!-- Designate how the collection of items are laid out -->
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Vertical" ItemSpacing="10" />
        </CollectionView.ItemsLayout>

        <!-- Define the appearance of each item in the list -->
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="models:Note">
                <StackLayout>
                    <Label Text="{Binding Text}" FontSize="22"/>
                    <Label Text="{Binding Date}" FontSize="14" TextColor="Silver"/>
                </StackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

XAML sebelumnya memperkenalkan beberapa konsep baru:

  • Properti ContentPage.ToolbarItems berisi ToolbarItem. Tombol yang ditentukan di sini biasanya ditampilkan di bagian atas aplikasi, di sepanjang judul halaman. Namun, tergantung pada platform, mungkin berada di lokasi yang berbeda. Ketika salah satu tombol ini ditekan, Clicked peristiwa dinaikkan, seperti tombol normal.

    Properti ToolbarItem.IconImageSource mengatur ikon untuk ditampilkan pada tombol . Ikon dapat menjadi sumber daya gambar apa pun yang ditentukan oleh proyek, namun, dalam contoh ini, FontImage digunakan. FontImage Dapat menggunakan satu glyph dari font sebagai gambar.

  • CollectionView Kontrol menampilkan kumpulan item, dan dalam hal ini, terikat ke properti modelNotes. Cara setiap item disajikan oleh tampilan koleksi diatur melalui CollectionView.ItemsLayout properti dan CollectionView.ItemTemplate .

    Untuk setiap item dalam koleksi, CollectionView.ItemTemplate menghasilkan XAML yang dideklarasikan. Dari BindingContext itu XAML menjadi item koleksi itu sendiri, dalam hal ini, setiap catatan individu. Templat untuk catatan menggunakan dua label, yang terikat ke catatan Text dan Date properti.

  • menangani CollectionViewSelectionChanged peristiwa, yang dimunculkan saat item dalam tampilan koleksi dipilih.

Kode belakang untuk tampilan perlu ditulis untuk memuat catatan dan menangani peristiwa.

  1. Di panel Penjelajah Solusi, buka file Tampilan/AllNotesPage.xaml.cs.

  2. Ganti kode dengan cuplikan berikut:

    namespace Notes.Views;

public partial class AllNotesPage : ContentPage
{
    public AllNotesPage()
    {
        InitializeComponent();

        BindingContext = new Models.AllNotes();
    }

    protected override void OnAppearing()
    {
        ((Models.AllNotes)BindingContext).LoadNotes();
    }

    private async void Add_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync(nameof(NotePage));
    }

    private async void notesCollection_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.CurrentSelection.Count != 0)
        {
            // Get the note model
            var note = (Models.Note)e.CurrentSelection[0];

            // Should navigate to "NotePage?ItemId=path\on\device\XYZ.notes.txt"
            await Shell.Current.GoToAsync($"{nameof(NotePage)}?{nameof(NotePage.ItemId)}={note.Filename}");

            // Unselect the UI
            notesCollection.SelectedItem = null;
        }
    }
}

Kode ini menggunakan konstruktor untuk mengatur BindingContext halaman ke model.

Metode OnAppearing ini diambil alih dari kelas dasar. Metode ini secara otomatis dipanggil setiap kali halaman ditampilkan, seperti ketika halaman dinavigasi. Kode di sini memberi tahu model untuk memuat catatan. CollectionView Karena dalam tampilan AllNotes terikat ke AllNotes, yang merupakan Notes, setiap kali catatan dimuat, ObservableCollection catatan diperbarui secara otomatis.

Handler Add_Clicked memperkenalkan konsep baru lainnya, navigasi. Karena aplikasi menggunakan .NET MAUI Shell, Anda dapat menavigasi ke halaman dengan memanggil Shell.Current.GoToAsync metode . Perhatikan bahwa handler dideklarasikan dengan async kata kunci, yang memungkinkan penggunaan await kata kunci saat menavigasi. Handler ini menavigasi ke NotePage.

Bagian terakhir dari kode dalam cuplikan sebelumnya adalah notesCollection_SelectionChanged handler. Metode ini mengambil item yang Note saat ini dipilih, model, dan menggunakan informasinya untuk menavigasi ke NotePage. GoToAsync menggunakan string URI untuk navigasi. Dalam hal ini, string dibangun yang menggunakan parameter string kueri untuk mengatur properti di halaman tujuan. String terinterpolasi yang mewakili URI akhirnya terlihat mirip dengan string berikut:

NotePage?ItemId=path\on\device\XYZ.notes.txt

Parameter ItemId= diatur ke nama file pada perangkat tempat catatan disimpan.

Visual Studio mungkin menunjukkan bahwa properti NotePage.ItemId tidak ada, yang memang tidak ada. Langkah selanjutnya adalah memodifikasi Note tampilan untuk memuat model berdasarkan ItemId parameter yang akan Anda buat.

Parameter untai kueri

Tampilan Note perlu mendukung parameter string kueri, ItemId. Buat sekarang:

  1. Di panel Penjelajah Solusi, buka file Tampilan/NotePage.xaml.cs.

  2. QueryProperty Tambahkan atribut ke class kata kunci, memberikan nama properti string kueri, dan properti kelas yang dipetakan, ItemId dan ItemId masing-masing:

    [QueryProperty(nameof(ItemId), nameof(ItemId))]
public partial class NotePage : ContentPage

  3. Tambahkan properti baru string bernama ItemId. Properti ini memanggil LoadNote metode , meneruskan nilai properti , yang pada gilirannya, harus menjadi nama file catatan:

    public string ItemId
{
    set { LoadNote(value); }
}

  4. Ganti handler SaveButton_Clicked dan DeleteButton_Clicked dengan kode berikut:

    private async void SaveButton_Clicked(object sender, EventArgs e)
{
    if (BindingContext is Models.Note note)
        File.WriteAllText(note.Filename, TextEditor.Text);

    await Shell.Current.GoToAsync("..");
}

private async void DeleteButton_Clicked(object sender, EventArgs e)
{
    if (BindingContext is Models.Note note)
    {
        // Delete the file.
        if (File.Exists(note.Filename))
            File.Delete(note.Filename);
    }

    await Shell.Current.GoToAsync("..");
}

    Tombol sekarang async. Setelah ditekan, halaman menavigasi kembali ke halaman sebelumnya dengan menggunakan URI ...

  5. _fileName Hapus variabel dari atas kode, karena tidak lagi digunakan oleh kelas .

Mengubah pohon visual aplikasi

Masih AppShell memuat halaman catatan tunggal, sebagai gantinya, ia perlu memuat tampilan AllPages. Buka file AppShell.xaml dan ubah entri pertama ShellContent untuk menunjuk ke AllNotesPage bukan NotePage:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Notes.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Notes.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <ShellContent
            Title="Notes"
            ContentTemplate="{DataTemplate views:AllNotesPage}"
            Icon="{OnPlatform 'icon_notes.png', iOS='icon_notes_ios.png', MacCatalyst='icon_notes_ios.png'}" />

        <ShellContent
            Title="About"
            ContentTemplate="{DataTemplate views:AboutPage}"
            Icon="{OnPlatform 'icon_about.png', iOS='icon_about_ios.png', MacCatalyst='icon_about_ios.png'}" />
    </TabBar>

</Shell>

Jika Anda menjalankan aplikasi sekarang, Anda akan melihat crash jika Anda menekan tombol Tambahkan , mengeluh bahwa aplikasi tidak dapat menavigasi ke NotesPage. Setiap halaman yang dapat dinavigasi ke dari halaman lain, perlu didaftarkan dengan sistem navigasi. Halaman AllNotesPage dan AboutPage secara otomatis terdaftar dengan sistem navigasi dengan dideklarasikan dalam TabBar.

Daftarkan NotesPage dengan sistem navigasi:

  1. Di panel Penjelajah Solusi, buka file AppShell.xaml.cs.

  2. Tambahkan baris ke konstruktor yang mendaftarkan rute navigasi:

    namespace Notes;

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(Views.NotePage), typeof(Views.NotePage));
    }
}

Metode ini Routing.RegisterRoute mengambil dua parameter:

  • Parameter pertama adalah nama string URI yang ingin Anda daftarkan, dalam hal ini nama yang diselesaikan adalah "NotePage".
  • Parameter kedua adalah jenis halaman yang akan dimuat saat "NotePage" dinavigasi.

Sekarang Anda dapat menjalankan aplikasi Anda. Coba tambahkan catatan baru, navigasi bolak-balik di antara catatan, dan hapus catatan.

Jelajahi kode. Jelajahi kode untuk tutorial ini.. Jika Anda ingin mengunduh salinan proyek yang telah selesai untuk membandingkan kode Anda dengan, unduh proyek ini.

Anda telah menyelesaikan tutorial Membuat aplikasi .NET MAUI!

Langkah selanjutnya

Dalam tutorial berikutnya, Anda akan mempelajari cara menerapkan pola model-view-viewmodel (MVVM) dalam proyek Anda.

Tautan berikut memberikan informasi lebih lanjut yang terkait dengan beberapa konsep yang Anda pelajari dalam tutorial ini: