Xamarin MVVM Prism : Navigasi pada Prism

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,

image

Setelah membuat halaman About Page, maka secara otomatis juga akan dibuatkan AboutPageViewModel.cs pada folder ViewModel.

image

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.

imageimage

	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); }
        }
    }

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Xamarin Forms and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s