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