Tutorial Xamarin Form : ListView Item Selected dan Passing Data antar Page

Selamat malam pembaca blog, sekarang kita melanjutkan artikel yang sudah sya share tadi siang ya, yaitu ListView Image dari JSON pada Xamarin Form. Nah selanjutnya adalah kita akan mengimplementasi jika item dari listview tersebut di seleksi atau ditap atau di klik. Pada artikel sebelumnya adalah menampilkan json untuk artikel blog yang berisi judul, foto dan summaries berita. Nah sekarang jika item tersebut di klik maka akan diarahkan ke halaman detail. Di halaman detail akan ditampilkan pula isi beritanya.

Konsep yang digunakan adalah Passing Data antar Page di Xamarin Form. Jika sebelumnya kita bersusah payah membuatnya dengan intent pada xamarin android, pada xamarin form ini lebih mudah implementasinya.

Pastikan anda sudah mengikuti artikel saya sebelumnya ya. Oleh ikuti langkah berikut ini :

Langkah 1 :
Pada MainPage.xaml tambahkan sebuah pemanggilan method pada Listview boleh cek kode berikut

<ListView x:Name="ListView1" RowHeight="200" ItemSelected="ListView1_ItemSelected">

Nah diListView kita akan panggil sebuah method dengan nama ListView1_ItemSelected() ya.

Langkah 2:
Buka MainPage.xaml.cs lalu tambahkan sebuah fungsi berikut

async void ListView1_ItemSelected(object sender, SelectedItemChangedEventArgs e)
  {
   var item = (ItemClass)e.SelectedItem;
   //DisplayAlert("item selected", item.id.ToString(), "Ok");

   string idnya = item.id.ToString();
   string judulnya = item.judul;
   string foto = item.foto_berita;
   string isi = item.isi_berita;

   //kirim data id,judul, url foto dan isi berita ke blogdetail
   await Navigation.PushAsync(new DetailBlog(idnya,judulnya,foto,isi));

  }

Nah kode diatas, kita ambil id, judul, foto_berita dan isi, lalu kita kirim ke DetailBlog

cek kode ini

await Navigation.PushAsync(new DetailBlog(idnya,judulnya,foto,isi));

Langkah 3:
Buatlah sebuah file baru pada folder xamarin form dengan nama DetailBlog contentpage xaml.
Maka anda akan mendapatkan 2 buah file yaitu DetailBlog.xaml dan DetailBlog.xaml.cs

pada DetailBlog.xaml ketikan 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="ListViewJson.DetailBlog">
 <ContentPage.Content>
  <StackLayout BackgroundColor="White" Padding="10,10,10,30">
      <ScrollView>
       <StackLayout Orientation="Vertical">
    
        <Image x:Name="fotosku" Aspect="AspectFill" HorizontalOptions="FillAndExpand" Source="{Binding fotos}" WidthRequest="100" HeightRequest="150"/>
        <Label x:Name="judulku" TextColor="#000" FontSize="18" LineBreakMode="TailTruncation" FontAttributes="Bold" />  
        <Label x:Name="isiku" TextColor="#000" HorizontalOptions="EndAndExpand"/> 

       </StackLayout>  
      </ScrollView>

   </StackLayout>
 </ContentPage.Content>
</ContentPage>

Coba cek kode berikut

<Image x:Name="fotosku" Aspect="AspectFill" HorizontalOptions="FillAndExpand" Source="{Binding fotos}" WidthRequest="100" HeightRequest="150"/>
<Label x:Name="judulku" TextColor="#000" FontSize="18" LineBreakMode="TailTruncation" FontAttributes="Bold" />  
<Label x:Name="isiku" TextColor="#000" HorizontalOptions="EndAndExpand"/> 

Kode diatas adalah untuk mengambil data dari MainPage.xaml.cs yang dikirim ke DetailBlog.xaml.cs

Langkah 4 : 
Mengambil data hasil passing dari MainPage.xaml.cs

using System;
using System.Collections.Generic;

using Xamarin.Forms;

namespace ListViewJson
{
 public partial class DetailBlog : ContentPage
 {
  

  public DetailBlog(string ids, string juduls, string fotos, string isis)
  {
   InitializeComponent();
   Title = "Detail Berita";
   judulku.Text = juduls;
   isiku.Text = isis;
   fotosku.Source = fotos;

  }

 }
}

Nah, kira-kira begitulah cara untuk membuat detail blog dengan cara item selected pada xamarin form dengan passing data antar page.

Salam

Ipung Purwono

Facebook : https://web.facebook.com/ipungz.purwono