Hai, seri pengembangan App Windows Phone 8.1 telah hadir lagi. Kali ini di bagian 3 kita akan berfokus pada topik tentang XAML. Untuk seri bagian 2, kamu bisa melihat di artikel sebelumnya.
Oke, sebelumnya apa itu XAML ? XAML yang singkatan dari Extensible Application Markup Language merupakan sebuah bahasa markup berbasis XML yang dikembangkan oleh Microsoft. XAML menjadi bahasa untuk presentasi visual dari sebuah aplikasi, mirip seperti HTML jika di web.
Layout
Layout sendiri merupakan proses untuk memposisikan dan mengatur ukuran dari elemen yang kamu buat untuk ditampilkan di antarmuka. Layout ada dua, yaitu Fixed dan Dinamis, Yang fixed bisa menggunakan Canvas sedangkan dinamis bisa menggunakan StackPanel maupun Grid.
Canvas
Dengan Canvas, kita bisa memposisikan objek secara absolut. Lihat contoh kode berikut:
Pada kode diatas ada 3 elemen Ellipse yang memiliki posisi berbeda-beda. Urutan elemen juga mempengaruhi di layar, semakin kebawah maka di layar akan berada di posisi tumpukan atas. Berikut hasil kode diatas.
Grid
Coba buat project baru (seperti yang ada di artikel sebelumnya) dan buka MainPage.xaml dari Solution Explorer. Terlihat elemen Grid di dalamnya. Dengan Grid kita meletakkan elemen secara relatif, kita bisa mendefinisikan baris dan kolom di dalam Grid seperti kode dibawah:
Pada kode di atas, saya mendefinisikan 2 baris dan 2 kolom dengan lebar dan tinggi yang sama, dan menambahkan elemen Rectangle dengan 4 warna yang berbeda, diletakkan di baris dan kolom berbeda. Jika dilihat di XAML Designer, tampilannya akan seperti gambar dibawah.
StackPanel
Selain itu juga ada layout StackPanel, dimana elemen yang ada di dalamnya akan ditumpuk baik itu secara horizontal maupun vertikal. Seperti contoh kode dibawah :
Pada kode diatas 4 elemen Rectangle akan ditumpuk secara vertikal secara default, jika properti Orientation dari StackPanel di atur Horizontal, maka elemen akan ditumpuk mendatar kesamping. Berikut hasil dari contoh kode diatas.
Styling
Kali ini kita memasuki pembahasan Styling. Jika kamu ingin melakukan style, kamu bisa mengatur properti yang ada di elemen tersebut.
Untuk mengedit properti lebih mudah, bisa menggunakan window property yang tersedia di Visual Studio terletak di pojok kanan bawah Solution Explorer. Tampilan window property seperti dibawah.
Nantinya setelah mengubah style via window property, kodenya juga akan ikut berubah, berikut contoh kode TextBlock dengan ukuran teks, warna, font family, dll yang berbeda.
Pada kode diatas kita bahkan bisa melakukan transformasi di elemen TexBlock, dan akhirnya di window XAML Designer akan nampak seperti berikut.
Resources
Bagaimana jika ada banyak elemen dengan style yang sama ? Mungkin konsepnya sama dengan CSS, namun jika XAML ini kita bisa mendefinisikan Style tersebut di dalam Resources. Berikut contoh kodenya.
Pada kode diatas, terdapat style dengan Key “StyleAneGan”, yang selanjutnya bisa diaplikasikan lagi dengan mengatur properti Style mereferensikan static resource style yang telah didefinisikan sebelumnya. Di bawah ini merupakan tampilan dari kode yang telah dibuat.
Handle Event
Jika pada artikel sebelumnya kita telah mencoba event Click yang ada di elemen Button, kali ini kita coba event yang lain seperti TextChanged yang ada di TextBox.
Banyak cara untuk menambahkan method event, salah satunya kita bisa mengetahui Event apa saja yang ada di elemen tersebut dengan melihat window property, dengan mengklik tombol petir di bagian kanan.
Pada kotak isian di samping nama Event, kita bisa mengisikan nama method yang bisa kita buat untuk menangkap event tersebut, lalu tekan Enter, otomatis akan dibuat di kelas tersebut.
Terlihat pada kode markup xaml, property event TextChanged ditambahkan otomatis.
Selanjutnya isi method inputBerubah yang ada di berkas MainPage.xaml.cs dengan kode berikut untuk memperbarui TextBlock setiap teks yang ada di TextBox berubah.
Kemudian coba jalankan project, dan lihat hasilnya. Masukan teks kedalam textbox, otomatis akan muncul teks diatasnya yang akan mengikutinya.
Pada kode sampel yang saya sediakan, kamu dapat menghapus komentar-komentar tiap pembahasan seperti layout dll untuk kamu coba dan lakukan eksperimen
Kode Sampel bisa kamu unduh di – WindowsPhone8.1_Dev_MengenalXAML
Pada bagian selanjutnya kita akan membahas bagaimana kita berpindah antar halaman beserta parameter yang dikirimkan dan menangani back button untuk kembali ke halaman selanjutnya, artikel tersebut bisa kamu lihat disini.
Tetap pantengin terus WinPoin untuk update seri ini.
