Pada bab ini akan dijelaskan bagaimana cara membinding data kedalam ListView dengan menggunakan framewrok Prism.
Pertama pada project CobaPrism yang sudah dibuat pada tutorial sebelumnya, tambahkan view dengan nama ListArtikelPage.xaml
Untuk membuat model yang akan di tampilkan pada ListArtikelPage, buat folder dengan nama Models. Pada folder Models tambahkan clas dengan nama Artikel.cs
public class Artikel
{
public int ArtikelID { get; set; }
public string Judul { get; set; }
public string Deskripsi { get; set; }
}
Setelah View dibuat maka file ViewModel juga otomatis akan dibuat. Tambahkan file ListArtikelPageViewModel.cs.
public class ListArtikelPageViewModel : ViewModelBase
{
public ListArtikelPageViewModel(INavigationService navigationService)
: base(navigationService)
{
Title = "Main Page";
_listArtikel = new List<Artikel>
{
new Artikel{ArtikelID=1,Judul="Pemrograman CSharp",Deskripsi="Deskripsi Buku Pemrograman CSharp"},
new Artikel{ArtikelID=2,Judul="ASP.NET Core 2.1",Deskripsi="Deskripsi Buku Pemrogaman ASP.NET Core 2.1"},
new Artikel{ArtikelID=3,Judul="Xamarin Forms",Deskripsi="Deskripsi Buku Xamarin Forms"}
};
}
private List<Artikel> _listArtikel;
public List<Artikel> ListArtikel
{
get { return _listArtikel; }
set { SetProperty(ref _listArtikel, value); }
}
}
Pada file diatas dapat dilihat bahwa ListArtikel bertipe collection of Artikel. Data pada ListArtikel akan ditampilkan pada ListView. Pada ListArtikelPage.xaml, tambahkan kode 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"
xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="ContohPrism.Views.ListArtikelPage" Title="{Binding Title}">
<StackLayout>
<ListView ItemsSource="{Binding ListArtikel}">
<ListView.ItemTemplate>
<DataTemplate>
<TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
Jika program dijalankan maka akan ditampilkan data List Artikel pada ListView.
public class Artikel
{
public int ArtikelID { get; set; }
public string Judul { get; set; }
public string Deskripsi { get; set; }
}
Erick Kurniawan 