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.
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.
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; }
}
}
Erick Kurniawan 