Melakukan navigasi dalam Xamarin.Forms aplikasi

Download Sample Mengunduh sampel

Dalam mulai cepat ini, Anda akan mempelajari cara:

  • Tambahkan halaman tambahan ke Xamarin.Forms aplikasi Shell.
  • Lakukan navigasi antar halaman.
  • Gunakan pengikatan data untuk menyinkronkan data antara elemen antarmuka pengguna dan sumber datanya.

Mulai cepat menjelaskan cara mengubah aplikasi Shell lintas platform Xamarin.Forms , yang mampu menyimpan satu catatan, menjadi aplikasi yang mampu menyimpan beberapa catatan. Aplikasi akhir ditunjukkan di bawah ini:

Notes PageNote Entry Page

Prasyarat

Anda harus berhasil menyelesaikan mulai cepat sebelumnya sebelum mencoba mulai cepat ini. Atau, unduh sampel mulai cepat sebelumnya dan gunakan sebagai titik awal untuk mulai cepat ini.

Memperbarui aplikasi dengan Visual Studio

  1. Luncurkan Visual Studio. Di jendela mulai, klik solusi Catatan di daftar proyek/solusi terbaru, atau klik Buka proyek atau solusi, dan dalam dialog Buka Proyek/Solusi pilih file solusi untuk proyek Catatan:

    Open Solution

  2. Di Penjelajah Solusi, klik kanan pada proyek Catatan, dan pilih Tambahkan > Folder Baru:

    Add New Folder

  3. Di Penjelajah Solusi, beri nama folder Baru Model:

    Models Folder

  4. Di Penjelajah Solusi, pilih folder Model, klik kanan, dan pilih Tambahkan > Kelas...:

    Add New File

  5. Dalam dialog Tambahkan Item Baru, pilih Kelas Item > Visual C#, beri nama file baru Catatan, dan klik tombol Tambahkan:

    Add Note Class

    Ini akan menambahkan kelas bernama Catatan ke folder Model proyek Notes .

  6. Di Note.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    Kelas ini mendefinisikan Note model yang akan menyimpan data tentang setiap catatan dalam aplikasi.

    Simpan perubahan ke Note.cs dengan menekan CTRL+S.

  7. Di Penjelajah Solusi, dalam proyek Catatan, pilih folder Tampilan, klik kanan, dan pilih Tambahkan > Item Baru.... Dalam dialog Tambahkan Item Baru, pilih Halaman Konten Item>Xamarin.Forms> Visual C#, beri nama file baru NoteEntryPage, dan klik tombol Tambahkan:

    Add Xamarin.Forms ContentPage

    Ini akan menambahkan halaman baru bernama NoteEntryPage ke folder Tampilan proyek. Halaman ini akan digunakan untuk entri catatan.

  8. Di NoteEntryPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.Views.NoteEntryPage"
                 Title="Note Entry">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <!-- Layout children in two columns -->
            <Grid ColumnDefinitions="*,*">
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Editor untuk input teks, dan dua Button objek yang mengarahkan aplikasi untuk menyimpan atau menghapus file. Kedua Button instans ditata secara horizontal dalam Grid, dengan Editor dan Grid ditata secara vertikal dalam StackLayout. Selain itu, Editor menggunakan pengikatan data untuk mengikat Text properti Note model. Untuk informasi selengkapnya tentang pengikatan data, lihat Pengikatan data di Xamarin.Forms Mulai Cepat Deep Dive.

    Simpan perubahan ke NoteEntryPage.xaml dengan menekan CTRL+S.

  9. Di NoteEntryPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
    using System.IO;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        [QueryProperty(nameof(ItemId), nameof(ItemId))]
        public partial class NoteEntryPage : ContentPage
        {
            public string ItemId
            {
                set
                {
                    LoadNote(value);
                }
            }
    
            public NoteEntryPage()
            {
                InitializeComponent();
    
                // Set the BindingContext of the page to a new Note.
                BindingContext = new Note();
            }
    
            void LoadNote(string filename)
            {
                try
                {
                    // Retrieve the note and set it as the BindingContext of the page.
                    Note note = new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    };
                    BindingContext = note;
                }
                catch (Exception)
                {
                    Console.WriteLine("Failed to load note.");
                }
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save the file.
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update the file.
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                // Delete the file.
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
        }
    }
    

    Kode ini menyimpan instans Note , yang mewakili satu catatan, di BindingContext halaman. Kelas dihiasi dengan QueryPropertyAttribute yang memungkinkan data diteruskan ke halaman, selama navigasi, melalui parameter kueri. Argumen pertama untuk QueryPropertyAttribute menentukan nama properti yang akan menerima data, dengan argumen kedua yang menentukan id parameter kueri. Oleh karena itu, QueryParameterAttribute dalam kode di atas menentukan bahwa properti akan menerima data yang ItemId diteruskan dalam ItemId parameter kueri dari URI yang ditentukan dalam GoToAsync panggilan metode. Properti ItemId kemudian memanggil LoadNote metode untuk membuat Note objek dari file di perangkat, dan mengatur BindingContext halaman ke Note objek.

    Saat SimpanButton ditekanOnSaveButtonClicked, penanganan aktivitas dijalankan, yang menyimpan konten Editor ke file baru dengan nama file yang dihasilkan secara acak, atau ke file yang ada jika catatan sedang diperbarui. Dalam kedua kasus, file disimpan di folder data aplikasi lokal untuk aplikasi. Kemudian metode menavigasi kembali ke halaman sebelumnya. Saat HapusButton ditekanOnDeleteButtonClicked, penanganan aktivitas dijalankan, yang menghapus file, asalkan ada, dan menavigasi kembali ke halaman sebelumnya. Untuk informasi selengkapnya tentang navigasi, lihat Navigasi di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke NoteEntryPage.xaml.cs dengan menekan CTRL+S.

    Peringatan

    Aplikasi saat ini tidak akan dibangun karena kesalahan yang akan diperbaiki dalam langkah-langkah berikutnya.

  10. Di Penjelajah Solusi, dalam proyek Catatan, buka NotesPage.xaml di folder Tampilan.

  11. Di NotesPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.Views.NotesPage"
                 Title="Notes">
        <!-- Add an item to the toolbar -->
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="Add"
                         Clicked="OnAddClicked" />
        </ContentPage.ToolbarItems>
    
        <!-- Display notes in a list -->
        <CollectionView x:Name="collectionView"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <!-- Define the appearance of each item in the list -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}"
                               FontSize="Medium"/>
                        <Label Text="{Binding Date}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage>
    

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari CollectionView dan ToolbarItem. menggunakan CollectionView pengikatan data untuk menampilkan catatan apa pun yang diambil oleh aplikasi. Memilih catatan akan menavigasi ke NoteEntryPage tempat catatan dapat dimodifikasi. Atau, catatan baru dapat dibuat dengan menekan ToolbarItem. Untuk informasi selengkapnya tentang pengikatan data, lihat Pengikatan data di Xamarin.Forms Mulai Cepat Deep Dive.

    Simpan perubahan ke NotesPage.xaml dengan menekan CTRL+S.

  12. Di Penjelajah Solusi, dalam proyek Catatan, perluas NotesPage.xaml di folder Tampilan dan buka NotesPage.xaml.cs.

  13. Di NotesPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                // Create a Note object from each file.
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                // Set the data source for the CollectionView to a
                // sorted collection of notes.
                collectionView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnAddClicked(object sender, EventArgs e)
            {
                // Navigate to the NoteEntryPage, without passing any data.
                await Shell.Current.GoToAsync(nameof(NoteEntryPage));
            }
    
            async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (e.CurrentSelection != null)
                {
                    // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                    Note note = (Note)e.CurrentSelection.FirstOrDefault();
                    await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
                }
            }
        }
    }
    

    Kode ini mendefinisikan fungsionalitas untuk NotesPage. Ketika halaman muncul, OnAppearing metode dijalankan, yang mengisi CollectionView dengan catatan apa pun yang telah diambil dari folder data aplikasi lokal. ToolbarItem Ketika ditekan, OnAddClicked penanganan aktivitas dijalankan. Metode ini menavigasi ke NoteEntryPage. Ketika item dalam CollectionView dipilih, OnSelectionChanged penanganan aktivitas dijalankan. Metode ini menavigasi ke NoteEntryPage, asalkan item dalam CollectionView dipilih, meneruskan Filename properti yang dipilih Note sebagai parameter kueri ke halaman. Untuk informasi selengkapnya tentang navigasi, lihat Navigasi di Xamarin.Forms Mulai Cepat Deep Dive.

    Simpan perubahan ke NotesPage.xaml.cs dengan menekan CTRL+S.

    Peringatan

    Aplikasi saat ini tidak akan dibangun karena kesalahan yang akan diperbaiki dalam langkah-langkah berikutnya.

  14. Di Penjelajah Solusi, dalam proyek Catatan, perluas AppShell.xaml dan buka AppShell.xaml.cs. Kemudian ganti kode yang ada dengan kode berikut:

    using Notes.Views;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
                Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
            }
        }
    }
    

    Kode ini mendaftarkan rute untuk NoteEntryPage, yang tidak diwakili dalam hierarki visual Shell (AppShell.xaml). Halaman ini kemudian dapat dinavigasi untuk menggunakan navigasi berbasis URI, dengan GoToAsync metode .

    Simpan perubahan ke AppShell.xaml.cs dengan menekan CTRL+S.

  15. Di Penjelajah Solusi, dalam proyek Catatan, perluas App.xaml dan buka App.xaml.cs. Kemudian ganti kode yang ada dengan kode berikut:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Kode ini menambahkan deklarasi namespace layanan untuk System.IO namespace layanan, dan menambahkan deklarasi untuk properti statis FolderPath jenis string. Properti FolderPath digunakan untuk menyimpan jalur pada perangkat tempat data catatan akan disimpan. Selain itu, kode menginisialisasi FolderPath properti di App konstruktor, dan menginisialisasi MainPage properti ke objek subkelas Shell .

    Simpan perubahan ke App.xaml.cs dengan menekan CTRL+S.

  16. Bangun dan jalankan proyek di setiap platform. Untuk informasi selengkapnya, lihat Membangun mulai cepat.

    Pada NotesPage tekan tombol Tambahkan untuk menavigasi ke NoteEntryPage dan masukkan catatan. Setelah menyimpan catatan, aplikasi akan menavigasi kembali ke NotesPage.

    Masukkan beberapa catatan, dengan panjang yang bervariasi, untuk mengamati perilaku aplikasi. Tutup aplikasi dan luncurkan kembali untuk memastikan bahwa catatan yang Anda masukkan disimpan ke perangkat.

Memperbarui aplikasi dengan Visual Studio untuk Mac

  1. Meluncurkan Visual Studio untuk Mac. Di jendela mulai klik Buka, dan dalam dialog pilih file solusi untuk proyek Catatan:

    Open Solution

  2. Di Pad Solusi, klik kanan pada proyek Catatan, dan pilih Tambahkan > Folder Baru:

    Add New Folder

  3. Dalam dialog Folder Baru, beri nama model folder baru:

    Models Folder

  4. Di Pad Solusi, pilih folder Model, klik kanan, dan pilih Tambahkan > Kelas Baru...:

    Add New File

  5. Dalam dialog File Baru, pilih Kelas Kosong Umum>, beri nama file baru Catatan, dan klik tombol Baru:

    Add Note Class

    Ini akan menambahkan kelas bernama Catatan ke folder Model proyek Notes .

  6. Di Note.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
    
    namespace Notes.Models
    {
        public class Note
        {
            public string Filename { get; set; }
            public string Text { get; set; }
            public DateTime Date { get; set; }
        }
    }
    

    Kelas ini mendefinisikan Note model yang akan menyimpan data tentang setiap catatan dalam aplikasi.

    Simpan perubahan ke Note.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  7. Di Pad Solusi, pilih proyek Catatan, klik kanan, dan pilih Tambahkan > File Baru.... Dalam dialog File Baru, pilih Formulir > KontenPage XAML, beri nama file baru NoteEntryPage, dan klik tombol Baru:

    Add Xamarin.Forms ContentPage

    Ini akan menambahkan halaman baru bernama NoteEntryPage ke folder Tampilan proyek. Halaman ini akan digunakan untuk entri catatan.

  8. Di NoteEntryPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.Views.NoteEntryPage"
                 Title="Note Entry">
        <!-- Layout children vertically -->
        <StackLayout Margin="20">
            <Editor Placeholder="Enter your note"
                    Text="{Binding Text}"
                    HeightRequest="100" />
            <!-- Layout children in two columns -->
            <Grid ColumnDefinitions="*,*">
                <Button Text="Save"
                        Clicked="OnSaveButtonClicked" />
                <Button Grid.Column="1"
                        Text="Delete"
                        Clicked="OnDeleteButtonClicked"/>
            </Grid>
        </StackLayout>
    </ContentPage>
    

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari Editor untuk input teks, dan dua Button objek yang mengarahkan aplikasi untuk menyimpan atau menghapus file. Kedua Button instans ditata secara horizontal dalam Grid, dengan Editor dan Grid ditata secara vertikal dalam StackLayout. Selain itu, Editor menggunakan pengikatan data untuk mengikat Text properti Note model. Untuk informasi selengkapnya tentang pengikatan data, lihat Pengikatan data di Xamarin.Forms Mulai Cepat Deep Dive.

    Simpan perubahan ke NoteEntryPage.xaml dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  9. Di NoteEntryPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
    using System.IO;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        [QueryProperty(nameof(ItemId), nameof(ItemId))]
        public partial class NoteEntryPage : ContentPage
        {
            public string ItemId
            {
                set
                {
                    LoadNote(value);
                }
            }
    
            public NoteEntryPage()
            {
                InitializeComponent();
    
                // Set the BindingContext of the page to a new Note.
                BindingContext = new Note();
            }
    
            void LoadNote(string filename)
            {
                try
                {
                    // Retrieve the note and set it as the BindingContext of the page.
                    Note note = new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    };
                    BindingContext = note;
                }
                catch (Exception)
                {
                    Console.WriteLine("Failed to load note.");
                }
            }
    
            async void OnSaveButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                if (string.IsNullOrWhiteSpace(note.Filename))
                {
                    // Save the file.
                    var filename = Path.Combine(App.FolderPath, $"{Path.GetRandomFileName()}.notes.txt");
                    File.WriteAllText(filename, note.Text);
                }
                else
                {
                    // Update the file.
                    File.WriteAllText(note.Filename, note.Text);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
    
            async void OnDeleteButtonClicked(object sender, EventArgs e)
            {
                var note = (Note)BindingContext;
    
                // Delete the file.
                if (File.Exists(note.Filename))
                {
                    File.Delete(note.Filename);
                }
    
                // Navigate backwards
                await Shell.Current.GoToAsync("..");
            }
        }
    }
    

    Kode ini menyimpan instans Note , yang mewakili satu catatan, di BindingContext halaman. Kelas dihiasi dengan QueryPropertyAttribute yang memungkinkan data diteruskan ke halaman, selama navigasi, melalui parameter kueri. Argumen pertama untuk QueryPropertyAttribute menentukan nama properti yang akan menerima data, dengan argumen kedua yang menentukan id parameter kueri. Oleh karena itu, QueryParameterAttribute dalam kode di atas menentukan bahwa properti akan menerima data yang ItemId diteruskan dalam ItemId parameter kueri dari URI yang ditentukan dalam GoToAsync panggilan metode. Properti ItemId kemudian memanggil LoadNote metode untuk membuat Note objek dari file di perangkat, dan mengatur BindingContext halaman ke Note objek.

    Saat SimpanButton ditekanOnSaveButtonClicked, penanganan aktivitas dijalankan, yang menyimpan konten Editor ke file baru dengan nama file yang dihasilkan secara acak, atau ke file yang ada jika catatan sedang diperbarui. Dalam kedua kasus, file disimpan di folder data aplikasi lokal untuk aplikasi. Kemudian metode menavigasi kembali ke halaman sebelumnya. Saat HapusButton ditekanOnDeleteButtonClicked, penanganan aktivitas dijalankan, yang menghapus file, asalkan ada, dan menavigasi kembali ke halaman sebelumnya. Untuk informasi selengkapnya tentang navigasi, lihat Navigasi di Xamarin.Forms Shell Quickstart Deep Dive.

    Simpan perubahan ke NoteEntryPage.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

    Peringatan

    Aplikasi saat ini tidak akan dibangun karena kesalahan yang akan diperbaiki dalam langkah-langkah berikutnya.

  10. Di Pad Solusi, dalam proyek Catatan, buka NotesPage.xaml di folder Tampilan.

  11. Di NotesPage.xaml, hapus semua kode templat dan ganti dengan kode berikut:

    <?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Notes.Views.NotesPage"
                 Title="Notes">
        <!-- Add an item to the toolbar -->
        <ContentPage.ToolbarItems>
            <ToolbarItem Text="Add"
                         Clicked="OnAddClicked" />
        </ContentPage.ToolbarItems>
    
        <!-- Display notes in a list -->
        <CollectionView x:Name="collectionView"
                        Margin="20"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged">
            <CollectionView.ItemsLayout>
                <LinearItemsLayout Orientation="Vertical"
                                   ItemSpacing="10" />
            </CollectionView.ItemsLayout>
            <!-- Define the appearance of each item in the list -->
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="{Binding Text}"
                               FontSize="Medium"/>
                        <Label Text="{Binding Date}"
                               TextColor="Silver"
                               FontSize="Small" />
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </ContentPage>
    

    Kode ini secara deklaratif mendefinisikan antarmuka pengguna untuk halaman, yang terdiri dari CollectionView dan ToolbarItem. menggunakan CollectionView pengikatan data untuk menampilkan catatan apa pun yang diambil oleh aplikasi. Memilih catatan akan menavigasi ke NoteEntryPage tempat catatan dapat dimodifikasi. Atau, catatan baru dapat dibuat dengan menekan ToolbarItem. Untuk informasi selengkapnya tentang pengikatan data, lihat Pengikatan data di Xamarin.Forms Mulai Cepat Deep Dive.

    Simpan perubahan ke NotesPage.xaml dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  12. Di Pad Solusi, dalam proyek Catatan, perluas NotesPage.xaml di folder Tampilan dan buka NotesPage.xaml.cs.

  13. Di NotesPage.xaml.cs, hapus semua kode templat dan ganti dengan kode berikut:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Notes.Models;
    using Xamarin.Forms;
    
    namespace Notes.Views
    {
        public partial class NotesPage : ContentPage
        {
            public NotesPage()
            {
                InitializeComponent();
            }
    
            protected override void OnAppearing()
            {
                base.OnAppearing();
    
                var notes = new List<Note>();
    
                // Create a Note object from each file.
                var files = Directory.EnumerateFiles(App.FolderPath, "*.notes.txt");
                foreach (var filename in files)
                {
                    notes.Add(new Note
                    {
                        Filename = filename,
                        Text = File.ReadAllText(filename),
                        Date = File.GetCreationTime(filename)
                    });
                }
    
                // Set the data source for the CollectionView to a
                // sorted collection of notes.
                collectionView.ItemsSource = notes
                    .OrderBy(d => d.Date)
                    .ToList();
            }
    
            async void OnAddClicked(object sender, EventArgs e)
            {
                // Navigate to the NoteEntryPage, without passing any data.
                await Shell.Current.GoToAsync(nameof(NoteEntryPage));
            }
    
            async void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                if (e.CurrentSelection != null)
                {
                    // Navigate to the NoteEntryPage, passing the filename as a query parameter.
                    Note note = (Note)e.CurrentSelection.FirstOrDefault();
                    await Shell.Current.GoToAsync($"{nameof(NoteEntryPage)}?{nameof(NoteEntryPage.ItemId)}={note.Filename}");
                }
            }
        }
    }
    

    Kode ini mendefinisikan fungsionalitas untuk NotesPage. Ketika halaman muncul, OnAppearing metode dijalankan, yang mengisi CollectionView dengan catatan apa pun yang telah diambil dari folder data aplikasi lokal. ToolbarItem Ketika ditekan, OnAddClicked penanganan aktivitas dijalankan. Metode ini menavigasi ke NoteEntryPage. Ketika item dalam CollectionView dipilih, OnSelectionChanged penanganan aktivitas dijalankan. Metode ini menavigasi ke NoteEntryPage, asalkan item dalam CollectionView dipilih, meneruskan Filename properti yang dipilih Note sebagai parameter kueri ke halaman. Untuk informasi selengkapnya tentang navigasi, lihat Navigasi di Xamarin.Forms Mulai Cepat Deep Dive.

    Simpan perubahan ke NotesPage.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

    Peringatan

    Aplikasi saat ini tidak akan dibangun karena kesalahan yang akan diperbaiki dalam langkah-langkah berikutnya.

  14. Di Pad Solusi, dalam proyek Catatan, perluas AppShell.xaml dan buka AppShell.xaml.cs. Kemudian ganti kode yang ada dengan kode berikut:

    using Notes.Views;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class AppShell : Shell
        {
            public AppShell()
            {
                InitializeComponent();
                Routing.RegisterRoute(nameof(NoteEntryPage), typeof(NoteEntryPage));
            }
        }
    }
    

    Kode ini mendaftarkan rute untuk NoteEntryPage, yang tidak diwakili dalam hierarki visual Shell. Halaman ini kemudian dapat dinavigasi untuk menggunakan navigasi berbasis URI, dengan GoToAsync metode .

    Simpan perubahan ke AppShell.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  15. Di Solution Pad, dalam proyek Notes, perluas App.xaml dan buka App.xaml.cs. Kemudian ganti kode yang ada dengan kode berikut:

    using System;
    using System.IO;
    using Xamarin.Forms;
    
    namespace Notes
    {
        public partial class App : Application
        {
            public static string FolderPath { get; private set; }
    
            public App()
            {
                InitializeComponent();
                FolderPath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData));
                MainPage = new AppShell();
            }
    
            protected override void OnStart()
            {
            }
    
            protected override void OnSleep()
            {
            }
    
            protected override void OnResume()
            {
            }
        }
    }
    
    

    Kode ini menambahkan deklarasi namespace layanan untuk System.IO namespace layanan, dan menambahkan deklarasi untuk properti statis FolderPath jenis string. Properti FolderPath digunakan untuk menyimpan jalur pada perangkat tempat data catatan akan disimpan. Selain itu, kode menginisialisasi FolderPath properti di App konstruktor, dan menginisialisasi MainPage properti ke objek subkelas Shell .

    Simpan perubahan ke App.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).

  16. Bangun dan jalankan proyek di setiap platform. Untuk informasi selengkapnya, lihat Membangun mulai cepat.

    Pada NotesPage tekan tombol Tambahkan untuk menavigasi ke NoteEntryPage dan masukkan catatan. Setelah menyimpan catatan, aplikasi akan menavigasi kembali ke NotesPage.

    Masukkan beberapa catatan, dengan panjang yang bervariasi, untuk mengamati perilaku aplikasi. Tutup aplikasi dan luncurkan kembali untuk memastikan bahwa catatan yang Anda masukkan disimpan ke perangkat.

Langkah berikutnya

Dalam mulai cepat ini, Anda belajar cara:

  • Tambahkan halaman tambahan ke Xamarin.Forms aplikasi Shell.
  • Lakukan navigasi antar halaman.
  • Gunakan pengikatan data untuk menyinkronkan data antara elemen antarmuka pengguna dan sumber datanya.

Lanjutkan ke mulai cepat berikutnya untuk memodifikasi aplikasi sehingga menyimpan datanya dalam database SQLite.NET lokal.