Pada artikel ini akan dibahas bagaimana cara untuk membuat navigasi antar halaman pada Xamarin Forms menggunakan Prism Framework. Cara yang digunakan pada framework prism berbeda dengan cara navigasi yang sudah kita bahas pada bab sebelumnya.
Untuk menambahkan halaman baru, Tambahkan halaman baru dengan nama AboutPage,
Setelah membuat halaman About Page, maka secara otomatis juga akan dibuatkan AboutPageViewModel.cs pada folder ViewModel.
Pada AboutPageViewModel.cs, tambahkan kode berikut:
public class AboutPageViewModel : ViewModelBase { public AboutPageViewModel(INavigationService navigationService) : base(navigationService) { Title = "About Page"; Deskripsi = "Ini adalah halaman About pada Aplikasi Coba Prism"; } private string _deskripsi; public string Deskripsi { get { return _deskripsi; } set { SetProperty(ref _deskripsi, value); } } }
Untuk menambahkan tombol Navigasi pada halaman MainPage, tambahkan kode berikut pada MainPage.xaml.
<?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="ContohPrism.Views.MainPage" Title="{Binding Title}"> <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"> <Label Text="Welcome to Xamarin Forms and Prism!" /> <Button Text="About Page" Command="{Binding NavigateCommand}" /> </StackLayout> </ContentPage>
Untuk menambahkan event handler yang akan mengarahkan Navigasi ke halaman About, tambahkan DelegateCommand pada MainPageViewModel.cs
public class MainPageViewModel : ViewModelBase { public MainPageViewModel(INavigationService navigationService) : base(navigationService) { Title = "Main Page"; } private DelegateCommand _navigateCommand; public DelegateCommand NavigateCommand => _navigateCommand ?? (_navigateCommand = new DelegateCommand(ExecuteNavigateCommand)); private async void ExecuteNavigateCommand() { await NavigationService.NavigateAsync("AboutPage"); } }
Kemudian jalankan aplikasi untuk mencoba menjalankan navigasi halaman.
public class AboutPageViewModel : ViewModelBase { public AboutPageViewModel(INavigationService navigationService) : base(navigationService) { Title = "About Page"; Deskripsi = "Ini adalah halaman About pada Aplikasi Coba Prism"; } private string _deskripsi; public string Deskripsi { get { return _deskripsi; } set { SetProperty(ref _deskripsi, value); } } }