Xamarin Forms: Menampilkan data pada ListView (Part 1)

Pada tutorial kali ini saya akan membahas bagaimana menggunakan kontrol ListView pada Xamarin Forms. ListView adalah salah satu kontrol yang banyak digunakan untuk menampilkan data pada layar ponsel yang memiliki keterbatasan ukuran. Untuk menampilkan data dari sumber data kedalam view/kontrol maka digunakan mekanisme data binding.

Binding Data yang bertipe List Of String

Mekanisme binding umum digunakan pada Xamarin Form. Binding adalah mengaitkan data yang ada pada data source (sumber data) ke kontrol tertentu. Ada dua macam jenis binding yaitu one-way binding dan two-way binding. One-way binding digunakan hanya untuk menampilkan data saja, sedangkan two-way binding digunakan untuk menampilkan dan mengedit data.

Latihan Menampilkan Data bertipe List Of String

1. Buat Xamarin Cross Platform Portable solution dengan nama Modul3. Kemudian pada project Portable tambahkan halaman xaml baru (Form Xaml Page) dengan nama BindingListString.xaml.

image

2. Kemudian 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"
             x:Class="Modul3.BindingListString">
  <ListView x:Name="listView" />
</ContentPage>

3. Pada file BindingListString.xaml.cs tambahkan kode C# berikut untuk menampilkan data berupa objek List kedalam kontrol ListView.

public BindingListString()
{
InitializeComponent();
List<string> items = new List<string> { "First", "Second", "Third" };
       listView.ItemsSource = items;
}

4. Anda juga dapat mengambil informasi data/item yang dipilih pada ListView, caranya adalah dengan menambahkan event handler ‘ItemTapped’ kedalam ListView.

        public BindingListString()
        {
            InitializeComponent();
            List<string> items = new List<string> { "First", "Second", "Third" };
            listView.ItemsSource = items;

            //untuk mengambil nilai item ketika diklik pada baris
            listView.ItemTapped += async (sender, e) =>
            {
                 await DisplayAlert("Tapped", e.Item.ToString() + " was selected", "OK");
                 ((ListView)sender).SelectedItem = null;
            };
        }

5. Setelah itu masuk ke halaman App.xaml.cs dan ubah kode program berikut di bagian constructor seperti berikut :

        public App()
        {
            InitializeComponent();
            MainPage = new Modul3.BindingListString();
        }

6. Tekan F5 untuk menjalankan program pada emulator, hasilnya dapat dilihat pada gambar dibawah ini:

image

Advertisements

About Erick Kurniawan

IT Trainer, Consultant, & Microsoft Azure MVP Actual Training (http://actual-training.com)
This entry was posted in Cross Platform Mobile Development, 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