Xamarin Forms MVVM : ListView dengan Menggunakan Prism

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

image

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.

image

    public class Artikel
    {
        public int ArtikelID { get; set; }
        public string Judul { get; set; }
        public string Deskripsi { get; set; }
    } 

Xamarin Forms MVVM Prism : Menggunakan EventToCommand Behaviour

ListView tidak memiliki properti command, sehingga untuk menangani event handler (ItemTapped) pada saat item dipilih harus menggunakan EventToCommandBehaviour.

Untuk menggunakan EventToCommand Behaviour, tambahkan kode berikut pada view ListArtikelPage.xaml

    <StackLayout>
        <ListView ItemsSource="{Binding ListArtikel}">
            <ListView.Behaviors>
                <b:EventToCommandBehavior EventName="ItemTapped"
                                          Command="{Binding ItemTappedCommand}"
                                          EventArgsConverter="{StaticResource itemTappedEventArgsConverter}" />
            </ListView.Behaviors>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <TextCell Text="{Binding Judul}" Detail="{Binding Deskripsi}" />
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Penambahan EventToCommandBehaviour ditujukan untuk membinding event ItemTapped pada ListView. Ini dikarenakan ListView tidak memiliki properti Command.

Untuk mengambil nilai kembalian dari event handler yang dibinding maka harus dibuat objek converter. Pada solution explorer tambahkan folder dengan nama Converters, kemudian tambahkan file baru dengan nama ItemTappedEventArgsConverter.cs. Tambahkan kode sebagai berikut:

    public class ItemTappedEventArgsConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var itemTappedEventArgs = value as ItemTappedEventArgs;
            if (itemTappedEventArgs == null)
            {
                throw new ArgumentException("Kembalian diharapkan berupa Item Tapped", nameof(value));
            }
            return itemTappedEventArgs.Item;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Kemudian pada ListArtikelPageViewModel.cs tambahkan method yang digunakan untuk menangani event ItemTapped.

    public class ListArtikelPageViewModel : ViewModelBase
    {
----------------------------------------------

        public Artikel ItemSelected { get; set; }

        public DelegateCommand<Artikel> _itemTappedCommand;
        public DelegateCommand<Artikel> ItemTappedCommand =>
            _itemTappedCommand ?? (_itemTappedCommand = new DelegateCommand<Artikel>(ExecuteTtemTappedCommand));

        private void ExecuteTtemTappedCommand(Artikel obj)
        {
            ItemSelected = obj;
            _dialogService.DisplayAlertAsync("Keterangan", $"Judul: {obj.Judul}", "OK");
        }
    }

Method ExecuteItemTappedCommand juga digunakan untuk mengambil parameter objek yang dikirimkan dari Item Tapped, data yang diambil berupa data objek dari ListView.

Berikut adalah tampilan ketika memilih salah satu item pada ListView.

image