Cara Menampilkan Data ListView pada C#

Haii hai oke di post ini Insya Allah ane bakalan ngejelasin step by step gimana cara nya nampilin data kamu dengan menggunakan ListView. Yuklah capcuus

1. Create Project Xamarin Cross-Platform. Tutorialnya bisa liat disini. Pada project ini saya beri nama Modul3
2. Pada project portable klik kanan -> add new folder. Lalu berilah nama Models.
   
3. Buatlah sebuah kelas dengan cara klik kanan project portable -> add new item -> pilih class -> beri nama = ListItem.cs -> oke
   
4. tambahkan code berikut

   using System;
   using System.Collections.Generic;
   using System.Text;
   
   namespace Modul3.Models
   {
       public class ListItem
       {
           public string Source { get; set; }
           public string Title { get; set; }
           public string Description { get; set; }
           public string Price { get; set; }
       }
   }

5. Klik kanan project portable lalu add item forms blank content page xaml. Beri nama BindingToDataModel.xaml
   
6. Pada file BindingToDataModel.xaml tambahkan code 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.BindingToDataModel">
       <ListView ItemsSource="{Binding ListItems}" ItemTapped="ListViewItemTapped">
           <ListView.ItemTemplate>
               <DataTemplate>
                   <TextCell Text="{Binding Title}" Detail="{Binding Description}" DetailColor="Red" />
               </DataTemplate>
           </ListView.ItemTemplate>
       </ListView>
   </ContentPage>
   

Pada file C# yaitu BindingToDataModel.xaml.cs tambahkan code berikut

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Modul3.Models;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Modul3
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class BindingToDataModel : ContentPage
    {
        public BindingToDataModel ()
        {
            InitializeComponent ();
            BindingContext = new ListViewDataModelViewModel();
        }

        private async void ListViewItemTapped(object sender, ItemTappedEventArgs e)
        {
            ListItem item = (ListItem)e.Item;
            await DisplayAlert("Tapped", item.Title.ToString() + " was selected", "OK");
            ((ListView)sender).SelectedItem = null;
        }

        public class ListViewDataModelViewModel : BindableObject
        {
            private List<ListItem> lstItems;
            public ListViewDataModelViewModel()
            {
                lstItems = new List<ListItem>
                {
                    new ListItem {Title="Mystic", Description="Mystic team blue badge" },
                    new ListItem {Title="Instinct",Description="Instinct team yellow badge" },
                    new ListItem {Title="Valor",Description="Valor team red badge" }
                };
            }
            public List<ListItem> ListItems
            {
                get { return lstItems; }
                set
                {
                    lstItems = value;
                    OnPropertyChanged("ListItems");
                }
            }
        }
    }
}

 

 Lalu pada file utama yaitu App.xaml.cs yang telah tersedia tambahkan code berikut

Setelah selesai lalu silahkan run program tersebut. Jika ingin run di Android maka run dengan android. Jika ingin run di Windows OS maka set up project ke UWP, lalu deploy dan run.