Pada blog tutorial ini saya akan membahas bagaimana cara mengirimkan data antar halaman pada Xamarin Forms.
Untuk mengirimkan data antar halaman, anda dapat menggunakan beberapa macam cara. yaitu:
- Menggunakan Constructor parameter.
- Menggunakan Object Application.Current.Properties
- Menggunakan Global Class
Cara yang pertama adalah mengirimkan data lewat parameter yang ada di konstruktor.
1. Pada project portable tambahkan halaman xaml baru dengan nama NavigationPage1.xaml. Kemudian tambahkan kode xaml berikut.
<?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="Modul4.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 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());
}
}
3. 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>
4. 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);
};
}
}
5. Tambahkan kode berikut pada NavigationPage2.xaml.
public NavigationPage2(string param)
{
InitializeComponent();
lblParam.Text = "Nama anda : " + param;
btnBack.Clicked += async (sender, e) =>
{
await Navigation.PopAsync(true);
};
}
6. Dan untuk mengirimkan parameternya lewat konstruktor, tambahkan kode berikut ini:
public partial class NavigationPage1 : ContentPage
{
--------
private async void BtnSecond_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new NavigationPage2("Erick Kurniawan"));
}
}
Menggunakan Objek Application.Current.Properties
Selain menggunakan parameter pada konstruktor, anda juga dapat juga menggunakan objek Application.Current.Properties seperti yang ditunjukan pada contoh berikut:
1. Tambahkan kode berikut ini pada halaman App.cs.
public App()
{
InitializeComponent();
Application.Current.Properties["id"] = "22002321";
MainPage = new NavigationPage(new NavigationPage1());
}
2. Kemudian untuk menampilkan datanya pada halaman NavigationPage2 tambahkan kode berikut:
public partial class NavigationPage2 : ContentPage
{
public NavigationPage2(string param)
{
InitializeComponent();
lblParam.Text = "Nama anda : " + param + "id "+(string)Application.Current.Properties["id"];
btnBack.Clicked += async (sender, e) =>
{
await Navigation.PopAsync(true);
};
}
}
Global Class
Selain dua cara yang sudah dibahas sebelumnya, anda juga dapat menggunakan Global class yang dapat diakses dari semua halaman.
1. Buat class dengan nama Global.cs.
public class Global
{
private Global()
{
}
private static Global _instance;
public static Global Instance
{
get
{
if (_instance == null)
{
_instance = new Global();
}
return _instance;
}
}
public String myData { get; set; }
}
2. Buat halaman dengan nama GlobalPage1.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.GlobalPage1">
<ContentPage.Content>
<StackLayout>
<Label Text="Assigning id = 12345" FontSize="40" />
<Button Text="Go to Second Page" Clicked="Navigate" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
3. Tambahkan kode berikut pada file GlobalPage1.xaml.cs
public partial class GlobalPage1 : ContentPage
{
public GlobalPage1()
{
InitializeComponent();
Global.Instance.myData = "12345";
}
protected async void Navigate(object sender, EventArgs args)
{
await Navigation.PushAsync(new GlobalPage2());
}
}
4. Kemudian tambahkan juga halaman GlobalPage2.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.GlobalPage2">
<ContentPage.Content>
<StackLayout>
<Label Text="Persisted id: " FontSize="40" />
<Label Text="{Binding Data}" FontSize="40" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
5. Terakhir tambahkan kode pada GlobalPage2.xaml.cs.
public partial class GlobalPage2 : ContentPage
{
public string Data { get; set; }
public GlobalPage2()
{
InitializeComponent();
Data = Global.Instance.myData.ToString();
this.BindingContext = this;
}
}
6. Anda dapat menggunakan object static class Global pada setiap halaman Xamarin Forms.
Untuk diskusi dan pertanyaan, anda dapat mengirimkan email ke: erick@actual-training.com
Erick Kurniawan 