Salah satu bentuk navigasi yang banyak digunakan pada aplikasi mobile adalah Master Page. Dengan model navigasi ini pengguna dapat dengan mudah memilih menu yang disediakan di bagian kiri halaman dan menampilkan konten pada bagian utama.
Xamarin Forms sudah menyediakan template khusus yang dapat digunakan jika anda ingin mengimplementasikan jenis navigasi ini, berikut adalah langkah-langkah untuk membuat navigasi dalam bentuk Master Page pada Xamarin Forms.
- Buat Project Xamarin Forms baru, kemudian tambahkan kode berikut pada halaman MainPage.xaml.
<?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:local="clr-namespace:Modul4;assembly=Modul4" x:Class="Modul4.MainPage"> <MasterDetailPage.Master> <local:MasterPage x:Name="masterPage" /> </MasterDetailPage.Master> <MasterDetailPage.Detail> <NavigationPage> <x:Arguments> <local:ContactsPage /> </x:Arguments> </NavigationPage> </MasterDetailPage.Detail> </MasterDetailPage>
2. Pada project portable, tambahkan class baru dengan nama MasterPageItem.cs. Class ini digunakan untuk merepresentasikan isi dari menu.
public class MasterPageItem
{
public string Title { get; set; }
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
3. Pada halaman MainPage.cs tambahkan kode berikut:
public partial class MainPage : MasterDetailPage
{
public MainPage ()
{
InitializeComponent ();
masterPage.ListView.ItemSelected += OnItemSelected;
}
void OnItemSelected (object sender, SelectedItemChangedEventArgs e)
{
var item = e.SelectedItem as MasterPageItem;
if (item != null) {
Detail = new NavigationPage ((Page)Activator.CreateInstance (item.TargetType));
masterPage.ListView.SelectedItem = null;
IsPresented = false;
}
}
}
4. Buat file dengan nama MasterPage.xaml yang berisi list menu yang akan dipilih
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MasterDetailPageNavigation.MasterPage"
Padding="0,40,0,0"
Icon="icon.png"
Title="Personal Organiser">
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand">
<ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Text="{Binding Title}" ImageSource="{Binding IconSource}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
5. Tambahkan kode berikut pada file MasterPage.cs
public partial class MasterPage : ContentPage
{
public ListView ListView { get { return listView; } }
public MasterPage()
{
InitializeComponent();
var masterPageItems = new List<MasterPageItem> ();
masterPageItems.Add (new MasterPageItem {
Title = "Contacts",
IconSource = "contacts.png",
TargetType = typeof(ContactsPage)
});
masterPageItems.Add (new MasterPageItem {
Title = "TodoList",
IconSource = "todo.png",
TargetType = typeof(TodoListPage)
});
masterPageItems.Add (new MasterPageItem {
Title = "Reminders",
IconSource = "reminders.png",
TargetType = typeof(ReminderPage)
});
listView.ItemsSource = masterPageItems;
}
}
6. Untuk bagian halaman detail tambahkan kode berikut pada halaman ContactsPage.xaml.
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MasterDetailPageNavigation.ContactsPage" Title="Contacts Page"> <ContentPage.Content> <StackLayout> <Label Text="Contacts data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage>
7. Tambahkan lagi halaman dengan nama ReminderPage.xaml.
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MasterDetailPageNavigation.ReminderPage" Title="Reminder Page"> <ContentPage.Content> <StackLayout> <Label Text="Reminder data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage>
8. Terakhir tambahkan halaman dengan nama TodoListPage.xaml
<?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MasterDetailPageNavigation.TodoListPage" Title="TodoList Page"> <ContentPage.Content> <StackLayout> <Label Text="Todo list data goes here" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" /> </StackLayout> </ContentPage.Content> </ContentPage>
9. Pada file App.cs tambahkan kode berikut:
public App ()
{
MainPage = new MasterDetailPageNavigation.MainPage();
}
10. Hasilnya dapat dilihat pada gambar berikut ini:
Untuk diskusi dan pertanyaan, anda dapat mengirimkan email ke: erick@actual-training.com
Erick Kurniawan 