Pada artikel ini saya akan membahas bagaimana cara membuat custom ListView. Pada contoh sebelumnya, saya sudah menunjukan bagaimana penggunaan elemen ItemTemplate yang sudah disediakan oleh Xamarin Form untuk menampilkan Text dan Image. Pada contoh ini akan ditunjukan cara untuk kustomisasi kontrol ListView.
1. Pada project portable, tambahkan halaman xaml baru dengan nama ListViewCustom.xaml. Kemudian tambahkan xaml berikut ini.
<?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.ListViewCustom">
<ListView x:Name="listView" ItemsSource="{Binding ListItems}" RowHeight="80" BackgroundColor="Black">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal" Padding="25,10,55,15">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Vertical">
<Label HorizontalOptions="Start" FontSize="20" FontAttributes="Bold" TextColor="White" Text="{Binding Title}"/>
<Label HorizontalOptions="Start" FontSize="12" FontAttributes="Bold" TextColor="White" Text="{Binding Description}"/>
</StackLayout>
<Label HorizontalOptions="End" FontSize="25" TextColor="Aqua" Text="{Binding Price}" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentPage>
2. Pada kode xaml diatas dapat dilihat bahwa kontrol ListView dapat mempunyai ItemTemplate yang berupa ViewCell. Element ViewCell ini sangat fleksible sehingga dapat diisi dengan element lain. Pada contoh diatas dapat dilihat bahwa ViewCell diisi dengan tiga kontrol label yang disusun menggunakan StackLayout.
3. Pada folder Models modifikasi class ListItem yang sebelumnya sudah dibuat dengan menambahkan property baru yaitu Price.
public class ListItem
{
public string Source { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public string Price { get; set; }
}
4. Tambahkan kode pada file ListViewCustom.xaml.cs sebagai berikut:
public partial class ListViewCustom : ContentPage
{
public ListViewCustom()
{
InitializeComponent();
BindingContext = new ListViewCustomViewModel();
}
public class ListViewCustomViewModel : BindableObject
{
private List<ListItem> listItems;
public List<ListItem> ListItems
{
get { return listItems; }
set
{
listItems = value;
OnPropertyChanged("ListItems");
}
}
public ListViewCustomViewModel()
{
listItems = new List<ListItem>
{
new ListItem { Title="Pokeball", Description="Pokeball Red", Price="Rp.10.000" },
new ListItem {Title="Masterball",Description="Masterball Blue",Price="Rp.20.000" },
new ListItem {Title="Ultraball",Description="Ultraball Yellow",Price="Rp.50.000" }
};
}
}
5. Untuk menjalankan program tekan tombol F5, maka anda akan dapat melihat hasilnya pada android emulator. Jangan lupa untuk mengganti inisalisasi page yang diload oleh aplikasi pada App.xaml.cs
Erick Kurniawan 