Seri Pengembangan App Windows Phone 8.1 Bagian 3 : Pengenalan XAML
Hai, seri pengembangan App Windows Phone 8.1 telah hadir lagi. Kali ini di bab 3 kita akan berfokus pada topik ihwal XAML. Untuk seri bab 2, kau sanggup melihat di artikel sebelumnya.
Oke, sebelumnya apa itu XAML ? XAML yang abreviasi dari Extensible Application Markup Language merupakan sebuah bahasa markup berbasis XML yang dikembangkan oleh Microsoft. XAML menjadi bahasa untuk presentasi visual dari sebuah aplikasi, menyerupai mirip HTML jikalau di web.
Layout
Layout sendiri merupakan proses untuk memposisikan dan mengatur ukuran dari elemen yang kau buat untuk ditampilkan di antarmuka. Layout ada dua, adalah Fixed dan Dinamis, Yang fixed sanggup memakai Canvas sedangkan dinamis sanggup memakai StackPanel maupun Grid.
Canvas
Dengan Canvas, kita sanggup memposisikan objek secara absolut. Lihat pola arahan berikut:
Pada arahan diatas ada 3 elemen Ellipse yang mempunyai posisi berbeda-beda. Urutan elemen juga mensugesti di layar, semakin kebawah maka di layar akan berada di posisi tumpukan atas. Berikut hasil arahan diatas.
Grid
Coba buat project gres (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 sanggup mendefinisikan baris dan kolom di dalam Grid menyerupai arahan dibawah:
Pada arahan 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 menyerupai gambar dibawah.
StackPanel
Selain itu juga ada layout StackPanel, dimana elemen yang ada di dalamnya akan ditumpuk baik itu secara horizontal maupun vertikal. Seperti pola arahan dibawah :
Pada arahan diatas 4 elemen Rectangle akan ditumpuk secara vertikal secara default, jikalau properti Orientation dari StackPanel di atur Horizontal, maka elemen akan ditumpuk mendatar kesamping. Berikut hasil dari pola arahan diatas.
Styling
Kali ini kita memasuki pembahasan Styling. Jika kau ingin melaksanakan style, kau sanggup mengatur properti yang ada di elemen tersebut.
Untuk mengedit properti lebih mudah, sanggup memakai window property yang tersedia di Visual Studio terletak di pojok kanan bawah Solution Explorer. Tampilan window property menyerupai dibawah.
Nantinya sehabis mengubah style via window property, kodenya juga akan ikut berubah, berikut pola arahan TextBlock dengan ukuran teks, warna, font family, dll yang berbeda.
Pada arahan diatas kita bahkan sanggup melaksanakan transformasi di elemen TexBlock, dan kesannya di window XAML Designer akan nampak menyerupai berikut.
Resources
Bagaimana jikalau ada banyak elemen dengan style yang sama ? Mungkin konsepnya sama dengan CSS, namun jikalau XAML ini kita sanggup mendefinisikan Style tersebut di dalam Resources. Berikut pola kodenya.
Pada arahan diatas, terdapat style dengan Key “StyleAneGan”, yang selanjutnya sanggup diaplikasikan lagi dengan mengatur properti Style mereferensikan static resource style yang telah didefinisikan sebelumnya. Di bawah ini merupakan tampilan dari arahan 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 menyerupai TextChanged yang ada di TextBox.
Banyak cara untuk menambahkan method event, salah satunya kita sanggup mengetahui Event apa saja yang ada di elemen tersebut dengan melihat window property, dengan mengklik tombol petir di bab kanan.
Pada kotak isian di samping nama Event, kita sanggup mengisikan nama method yang sanggup kita buat untuk menangkap event tersebut, kemudian tekan Enter, otomatis akan dibentuk di kelas tersebut.
Terlihat pada arahan markup xaml, property event TextChanged ditambahkan otomatis.
Selanjutnya isi method inputBerubah yang ada di berkas MainPage.xaml.cs dengan arahan 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 arahan sampel yang saya sediakan, kau sanggup menghapus komentar-komentar tiap pembahasan menyerupai layout dll untuk kau coba dan lakukan eksperimen
Kode Sampel sanggup kau unduh di – WindowsPhone8.1_Dev_MengenalXAML
Pada bab selanjutnya kita akan membahas bagaimana kita berpindah antar halaman beserta parameter yang dikirimkan dan menangani back button untuk kembali ke halaman selanjutnya, artikel tersebut sanggup kau lihat disini.
Tetap pantengin terus WinPoin untuk update seri ini.
Sumber: https://winpoin.com/
0 Response to "Seri Pengembangan App Windows Phone 8.1 Bagian 3 : Pengenalan XAML"
Post a Comment