DATA BINDING PADA WINDOWS 8 APP

Salah satu fitur XAML yang paling popular yaitu Data Binding. Data binding sendiri merupakan metode yang dilakukan untuk memasukkan data ke dalam element dari interface aplikasi windows 8 kita. Selain itu kita juga bisa melakukan binding antar element yang ada pada interface kita.

Misalkan saya memiliki Slider yang ingin saya binding kan dengan ProgressBar. Sebelumnya hal yang perlu diperhatikan dalam melakukan binding yaitu mana yang akan menjadi source dan mana yang akan menjadi target binding. Dalam contoh ini yang akan menjadi source adalah value dari slider, sedangkan yang menjadi target binding yaitu value dari ProgressBar. Langsung saja bisa dicoba, pertama kita tambahkan Slider dan ProgressBar. Sebagai contoh pada bagian properties kedua element kita set maximum = 10 dan minimum = 0 serta LargeChange = 1. Lalu pada target binding kita pada properties bagian value, terdapat tombol kotak kecil, klik tombol tersebut. Lalu pilih Create data binding, pada binding type pilih element name. Nahh maka akan muncul nama element yang ada. Element Slider saya beri nama slider dan element ProgressBar saya beri nama progressbar. Jangan lupa source binding kita tadi adalah slider pada bagian properties value. Tinggal sesuaikan dengan gambar dibawah ini jika bingung :)

binding1

Maka source code XAML kita akan bertambah pada bagian properties pada progressbar

Value=”{Binding Value, ElementName=slider}”

Sekarang coba kita jalankan program kita, maka value dari progressbar akan mengikuti value dari slider.

binding2

Naahhh sekarang kita akan mencoba mengambil data text dari class C# dan akan kita binding kan ke TextBlock. Sebagai contoh kita gunakan page default yaitu MainPage. Pertama kita buka MainPage.cs atau class dibalik XAML yang saya gunakan adalah bahasa pemrograman C#. Simpel saja saya menambahkan class Data, lalu saya tambahkan variable nama, jangan lupa getter dan setternya. Setelah itu tambahkan constructornya dan saya set variable nama dengan nama saya :) Maka hasilnya akan seperti ini

binding3

Setelah itu pada MainPage.xaml pada element <Page> lihat bagian propertiesnya lalau pada bagian DataContext pilih New, lalu tambahkan class Data yang sudah kita buat tadi

binding4

Jangan lupa tambahkan TextBlock pada page kita. Jangan lupa source binding kita berasal dari class Data sedangkan target binding kita adalah text dari TextBlock. Setelah kita tambahkan TextBlock, lalu pada properties pada bagian Text kita klik tombol kecil di sebelah kanan lalu pilih Create data binding. Pilih binding type yaitu data context, lebih jelasnya bisa dilihat gambar dibawah,

binding5

Bisa dilihat sekarang properties Text pada TextBlock akan terisi dengan nama yang sudah kita set di constructor pada class Data

binding6

Okeee itu tadi Data Binding yang bisa gunakan untuk mengembangkan aplikasi windows 8 kita menjadi lebih menarik lagi. Selamat mencoba :)

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s