Pada tutorial berikut saya akan menjelaskan konsep navigasi pada Xamarin Forms. Navigasi digunakan untuk memudahkan pengguna berpindah halaman dengan mudah. Fitur untuk navigasi meliputi menu, tap icon, tombol, tabs, dan list items.
Bentuk Navigasi pada Xamarin Forms
Ada beberapa pattern yang sering digunakan pada navigasi diantaranya:
- Hierarchical
- Modal
- Drill-down
- Navigation drawer
- Tabs
- Springboard
- Carousel
Pada contoh yang pertama akan ditunjukan bagaimana cara untuk menambahkan Navigation Page, teknik ini digunakan untuk memanggil halaman selanjutnya dari halaman pertama.
1. Tambahkan page xaml baru dengan nama NavigationPage1.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage Title="Navigasi Hirarki" xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Bab4.NavigationPage1">
<ContentPage.Content>
<StackLayout>
<Label Text="Home Page" FontSize="40"></Label>
<Button Text="Go To Second Page" x:Name="btnSecond"></Button>
</StackLayout>
</ContentPage.Content>
</ContentPage>
2. Tambahkan kode berikut pada App.xaml.cs
public App()
{
InitializeComponent();
MainPage = new NavigationPage(new NavigationPage1());
}
3. Tambahkan kode pada NavigationPage1.xaml.cs. Method Navigation.PushAsync() digunakan untuk memanggil halaman selanjutnya.
public partial class NavigationPage1 : ContentPage
{
public NavigationPage1()
{
InitializeComponent();
btnSecond.Clicked += BtnSecond_Clicked;
}
private async void BtnSecond_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NavigationPage2());
}
}
4. Tambahkan halaman NavigationPage2.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="Bab4.NavigationPage2">
<ContentPage.Content>
<StackLayout>
<Label Text="Second Page" FontSize="40"></Label>
<Button x:Name="btnBack" Text="Back"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
5. Kemudian tambahkan kode pada NavigationPage2.xaml.cs. Method Navigation.PopAsync() digunakan untuk kembali ke halaman sebelumnya.
public partial class NavigationPage2 : ContentPage
{
public NavigationPage2()
{
InitializeComponent();
btnBack.Clicked += async (sender, e) =>
{
await Navigation.PopAsync(true);
};
}
}
6. Tampilan dibawah menunjukan bagaimana cara navigasi antar form, dari form Home Page ke form Second Page.
Erick Kurniawan 