Pada blog sebelumnya saya telah membahas bagaimana cara untuk menampilkan data pada kontrol ListView dengan sumber data berupa koleksi string. Pada contoh dibawah ini akan ditunjukan bagaimana cara untuk menampilkan sumber data koleksi dari objek kedalam kontrol ListView.
Pada contoh berikut dijelaskan cara menampilkan data dari objek data model yang sudah disiapkan sebelumnya.
1. Pada project Portable, tambahkan folder baru dengan nama Models, kemudian tambahkan class dengan nama ListItem.cs.
public class ListItem
{
public string Title { get; set; }
public string Description { get; set; }
}
2. Untuk class yang digunakan untuk Binding, pastikan menggunakan Public
3. Kemudian tambahkan halaman xaml baru (Form Xaml Page) dengan nama BindingToDataModel.xaml, kemudian tambahkan kode xaml berikut:
<?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="Modul3.BindingToDataModel">
<ListView ItemsSource="{Binding ListItems}" ItemTapped="ListViewItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Title}" Detail="{Binding Description}" DetailColor="Red" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
4. Pada halaman xaml diatas digunakan ItemTemplate untuk mengatur data yang akan ditampilkan pada kontrol ListView. Keyword Binding digunakan untuk mengikatkan data yang diambil dari objek data model kedalam kontrol ListView.
5. Element TextCell digunakan untuk menampilkan dua informasi yaitu title dan description.
6. Pada file BindingToDataModel.xaml.cs tambahkan kode berikut ini.
public partial class BindingToDataModel : ContentPage
{
public BindingToDataModel()
{
InitializeComponent();
BindingContext = new ListViewDataModelViewModel();
}
public class ListViewDataModelViewModel : BindableObject
{
private List<ListItem> lstItems;
public ListViewDataModelViewModel()
{
lstItems = new List<ListItem>
{
new ListItem { Title="Mystic", Description="Mystic team blue badge" },
new ListItem {Title="Instinct",Description="Instinct team yellow badge" },
new ListItem {Title="Valor",Description="Valor team red badge" }
};
}
public List<ListItem> ListItems
{
get { return lstItems; }
set {
lstItems = value;
OnPropertyChanged("ListItems");
}
}
}
}
7. Jika ada merah pada ListItem tambahkan using Modul3.Models;
8. Property BindingContext digunakan untuk mengarahkan sumber data yang akan ditampilkan pada halaman xaml.
9. Class ListViewDataModelViewModel.cs. akan digunakan untuk membuat objek ListItems yang akan ditampilkan kedalam kontrol ListView.
10. Pada kode diatas dapat dilihat bahwa class ListViewDataModelViewModel diturunkan dari class BindableObject, ini bertujuan agar kita dapat menggunakan method OnPropertyChanged() yang akan memberi tahu program bahwa ada objek yang berubah.
11. Untuk mengambil informasi dari data yang dipilih pada kontrol ListView, anda dapat menambahkan event ItemTapped ke dalam class BindingToDataModel seperti ditunjukan pada kode berikut:
private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)
{
ListItem item = (ListItem)e.Item;
await DisplayAlert("Tapped", item.Title.ToString() + " was selected", "OK");
((ListView)sender).SelectedItem = null;
}
12. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian constructor seperti berikut :
public App()
{
InitializeComponent();
MainPage = new BindingToDataModel();
}
13. Tekan tombol F5 untuk menjalankan aplikasi pada android emulator.
Erick Kurniawan 