Xamarin Forms with Prism–Master Page

Pada blog kali ini akan dibahas cara menggunakan Master Page dengan menggunakan Prism Framework.

Untuk membuat Master Page langkah pertama pada folder Views tambahkan Prism MasterDetailPage dengan nama PrismMasterDetailPage.

image

Kemudian pada PrismMasterDetailPage.xaml tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
                  prism:ViewModelLocator.AutowireViewModel="True"
                  x:Class="ContohPrism.Views.PrismMasterDetailPage">

    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Padding="20">
                <!-- TODO: // Update the Layout and add some real menu items  -->
                <Button Text="List Artikel" Command="{Binding NavigateCommand}" CommandParameter="PrismMasterDetailPage/NavigationPage/ListArtikelPage" />
                <Button Text="Calculator" Command="{Binding NavigateCommand}" CommandParameter="PrismMasterDetailPage/NavigationPage/CalculatorPage" />
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
</MasterDetailPage>

Halaman ini adalah halaman utama dari master page yang akan berisi menu dan halaman detail yang akan ditampilkan.

Dua button yang ada di dalam stacklayout akan berisi menu navigasi ke halaman yang lain. Perhatikan bahwa untuk navigasi ke halaman lain digunakan alamat halaman yang lengkap yang terdiri dari {Nama master page}/NavigationPage/{nama halaman yang dituju}.

Kemudian pada file PrismMasterDetailPageViewModel.cs tambahkan kode berikut untuk menangani event handler ketika button navigasi pada menu dipilih.

	public class PrismMasterDetailPageViewModel : ViewModelBase
	{
        private INavigationService _navigationService;
        public PrismMasterDetailPageViewModel(INavigationService navigationService)
            : base(navigationService)
        {
            _navigationService = navigationService;
            NavigateCommand = new DelegateCommand<string>(NavigateAsync);
        }

        private async void NavigateAsync(string page)
        {
            await _navigationService.NavigateAsync(new Uri(page, UriKind.Relative));
        }

        public DelegateCommand<string> NavigateCommand { get; set; }

    }

Method NavigationAsync digunakan untuk navigasi menu ke url halaman yang diinginkan.

Pada file App.xaml.cs jangan lupa untuk mendaftarkan halaman master page dan halaman yang akan diakses dari master page.

        protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("PrismMasterDetailPage/NavigationPage/CalculatorPage");
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();
            containerRegistry.RegisterForNavigation<AboutPage, AboutPageViewModel>();
            containerRegistry.RegisterForNavigation<SampleDelegateCommandPage, SampleDelegateCommandPageViewModel>();
            containerRegistry.RegisterForNavigation<CalculatorPage, CalculatorPageViewModel>();
            containerRegistry.RegisterForNavigation<ListArtikelPage, ListArtikelPageViewModel>();
            containerRegistry.RegisterForNavigation<PrismMasterDetailPage, PrismMasterDetailPageViewModel>();
        }

Untuk melihat hasilnya jalankan aplikasi ini pada android emulator.

image

Menambahkan Master Detail Options

Interface master detail option dapat digunakan jika anda menghendaki navigation menu tidak otomatis tertutup ketika salah satu tombol navigasi dipilih. Untuk hal tersebut anda dapat merubah nilai properti IsPresentedAfterNavigation menjadi true.

    public partial class PrismMasterDetailPage : MasterDetailPage,IMasterDetailPageOptions
    {
        public PrismMasterDetailPage()
        {
            InitializeComponent();
        }

        public bool IsPresentedAfterNavigation
        {
            get { return true; }
        }
    }

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Uncategorized 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