Melakukan navigasi dalam Xamarin.Forms aplikasi
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:
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
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:
Di Penjelajah Solusi, klik kanan pada proyek Catatan, dan pilih Tambahkan > Folder Baru:
Di Penjelajah Solusi, beri nama folder Baru Model:
Di Penjelajah Solusi, pilih folder Model, klik kanan, dan pilih Tambahkan > Kelas...:
Dalam dialog Tambahkan Item Baru, pilih Kelas Item > Visual C#, beri nama file baru Catatan, dan klik tombol Tambahkan:
Ini akan menambahkan kelas bernama Catatan ke folder Model proyek Notes .
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.
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:
Ini akan menambahkan halaman baru bernama NoteEntryPage ke folder Tampilan proyek. Halaman ini akan digunakan untuk entri catatan.
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 duaButton
objek yang mengarahkan aplikasi untuk menyimpan atau menghapus file. KeduaButton
instans ditata secara horizontal dalamGrid
, denganEditor
danGrid
ditata secara vertikal dalamStackLayout
. Selain itu,Editor
menggunakan pengikatan data untuk mengikatText
propertiNote
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.
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, diBindingContext
halaman. Kelas dihiasi denganQueryPropertyAttribute
yang memungkinkan data diteruskan ke halaman, selama navigasi, melalui parameter kueri. Argumen pertama untukQueryPropertyAttribute
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 yangItemId
diteruskan dalamItemId
parameter kueri dari URI yang ditentukan dalamGoToAsync
panggilan metode. PropertiItemId
kemudian memanggilLoadNote
metode untuk membuatNote
objek dari file di perangkat, dan mengaturBindingContext
halaman keNote
objek.Saat Simpan
Button
ditekanOnSaveButtonClicked
, penanganan aktivitas dijalankan, yang menyimpan kontenEditor
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.
Di Penjelajah Solusi, dalam proyek Catatan, buka NotesPage.xaml di folder Tampilan.
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
danToolbarItem
. menggunakanCollectionView
pengikatan data untuk menampilkan catatan apa pun yang diambil oleh aplikasi. Memilih catatan akan menavigasi keNoteEntryPage
tempat catatan dapat dimodifikasi. Atau, catatan baru dapat dibuat dengan menekanToolbarItem
. 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.
Di Penjelajah Solusi, dalam proyek Catatan, perluas NotesPage.xaml di folder Tampilan dan buka NotesPage.xaml.cs.
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 mengisiCollectionView
dengan catatan apa pun yang telah diambil dari folder data aplikasi lokal.ToolbarItem
Ketika ditekan,OnAddClicked
penanganan aktivitas dijalankan. Metode ini menavigasi keNoteEntryPage
. Ketika item dalamCollectionView
dipilih,OnSelectionChanged
penanganan aktivitas dijalankan. Metode ini menavigasi keNoteEntryPage
, asalkan item dalamCollectionView
dipilih, meneruskanFilename
properti yang dipilihNote
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.
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, denganGoToAsync
metode .Simpan perubahan ke AppShell.xaml.cs dengan menekan CTRL+S.
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 statisFolderPath
jenisstring
. PropertiFolderPath
digunakan untuk menyimpan jalur pada perangkat tempat data catatan akan disimpan. Selain itu, kode menginisialisasiFolderPath
properti diApp
konstruktor, dan menginisialisasiMainPage
properti ke objek subkelasShell
.Simpan perubahan ke App.xaml.cs dengan menekan CTRL+S.
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
Meluncurkan Visual Studio untuk Mac. Di jendela mulai klik Buka, dan dalam dialog pilih file solusi untuk proyek Catatan:
Di Pad Solusi, klik kanan pada proyek Catatan, dan pilih Tambahkan > Folder Baru:
Dalam dialog Folder Baru, beri nama model folder baru:
Di Pad Solusi, pilih folder Model, klik kanan, dan pilih Tambahkan > Kelas Baru...:
Dalam dialog File Baru, pilih Kelas Kosong Umum>, beri nama file baru Catatan, dan klik tombol Baru:
Ini akan menambahkan kelas bernama Catatan ke folder Model proyek Notes .
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).
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:
Ini akan menambahkan halaman baru bernama NoteEntryPage ke folder Tampilan proyek. Halaman ini akan digunakan untuk entri catatan.
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 duaButton
objek yang mengarahkan aplikasi untuk menyimpan atau menghapus file. KeduaButton
instans ditata secara horizontal dalamGrid
, denganEditor
danGrid
ditata secara vertikal dalamStackLayout
. Selain itu,Editor
menggunakan pengikatan data untuk mengikatText
propertiNote
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).
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, diBindingContext
halaman. Kelas dihiasi denganQueryPropertyAttribute
yang memungkinkan data diteruskan ke halaman, selama navigasi, melalui parameter kueri. Argumen pertama untukQueryPropertyAttribute
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 yangItemId
diteruskan dalamItemId
parameter kueri dari URI yang ditentukan dalamGoToAsync
panggilan metode. PropertiItemId
kemudian memanggilLoadNote
metode untuk membuatNote
objek dari file di perangkat, dan mengaturBindingContext
halaman keNote
objek.Saat Simpan
Button
ditekanOnSaveButtonClicked
, penanganan aktivitas dijalankan, yang menyimpan kontenEditor
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.
Di Pad Solusi, dalam proyek Catatan, buka NotesPage.xaml di folder Tampilan.
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
danToolbarItem
. menggunakanCollectionView
pengikatan data untuk menampilkan catatan apa pun yang diambil oleh aplikasi. Memilih catatan akan menavigasi keNoteEntryPage
tempat catatan dapat dimodifikasi. Atau, catatan baru dapat dibuat dengan menekanToolbarItem
. 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).
Di Pad Solusi, dalam proyek Catatan, perluas NotesPage.xaml di folder Tampilan dan buka NotesPage.xaml.cs.
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 mengisiCollectionView
dengan catatan apa pun yang telah diambil dari folder data aplikasi lokal.ToolbarItem
Ketika ditekan,OnAddClicked
penanganan aktivitas dijalankan. Metode ini menavigasi keNoteEntryPage
. Ketika item dalamCollectionView
dipilih,OnSelectionChanged
penanganan aktivitas dijalankan. Metode ini menavigasi keNoteEntryPage
, asalkan item dalamCollectionView
dipilih, meneruskanFilename
properti yang dipilihNote
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.
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, denganGoToAsync
metode .Simpan perubahan ke AppShell.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).
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 statisFolderPath
jenisstring
. PropertiFolderPath
digunakan untuk menyimpan jalur pada perangkat tempat data catatan akan disimpan. Selain itu, kode menginisialisasiFolderPath
properti diApp
konstruktor, dan menginisialisasiMainPage
properti ke objek subkelasShell
.Simpan perubahan ke App.xaml.cs dengan memilih Simpan File > (atau dengan menekan ⌘ + S).
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.