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

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Xamarin, Xamarin Forms and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s