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

About Erick Kurniawan

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