Xamarin Forms with Prism – Tabbed Page with Prism

Pada contoh dibawah ini akan ditunjukan cara menggunakan Tabbed Page dengan menggunakan Prism.

Tambahkan view baru dengan nama PrismTabbedPage.xaml.

image

Kemudian untuk menambahkan halaman yang akan ditampilkan pada TabbedPage, tambahkan kode xaml berikut ini:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 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.PrismTabbedPage"
            xmlns:local="clr-namespace:ContohPrism.Views" Title="Tabbed Page">
    <TabbedPage.Children>
        <local:CalculatorPage Title="Calculator" />
        <local:ListArtikelPage Title="Artikel" />
    </TabbedPage.Children>
</TabbedPage>

Jangan lupa untuk meregister halaman yang akan ditampilkan pada App.xaml.cs.

        protected override async void OnInitialized()
        {
            InitializeComponent();
            await NavigationService.NavigateAsync("PrismTabbedPage");
        }

        protected override void RegisterTypes(IContainerRegistry containerRegistry)
        {
            containerRegistry.RegisterForNavigation<NavigationPage>();
            containerRegistry.RegisterForNavigation<CalculatorPage, CalculatorPageViewModel>();
            containerRegistry.RegisterForNavigation<ListArtikelPage, ListArtikelPageViewModel>();
            containerRegistry.RegisterForNavigation<PrismTabbedPage, PrismTabbedPageViewModel>();
        }

Tampilan halaman TabbedPage dapat dilihat pada gambar berikut ini:

image

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