Xamarin Forms: Menggunakan Master Page

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.

  1. 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:

imageimage

Untuk diskusi dan pertanyaan, anda dapat mengirimkan email ke: erick@actual-training.com

Advertisements

About Erick Kurniawan

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