Play With Xaml Syntax

Assalamu’alaikum wr. Wb

Bertemu lagi dengan saya, pada tutorial windows phone. Kali ini saya akan berbagi sedikit tutorial windows phone untuk agan-agan pecinta OS windows phone. Oke, yang pertama saya akan memberikan tutor mengenai Play With Xaml Syntax. Langsung saja buka visual studionya, kita ke tkp……

1. New Project (ctrl+shift+N)

2. Pilih windows Phone App + Visual C#

3. Beri nama project  “XamlSyntax” Name project jangan lupa samakan dengan Solution Name

4. Lalu browse dan pilih dimana kita akan menyimpan Folder Project aplikasi yang akan kita buat.

5. Lalu klik OK dan pilih Windows OS 7.1 lalu klik OK

Pada Sesi Tutorial kali ini mungkin kita tidak akan terlalu banyak melakukan/menulis koding yang panjang seperti pada tutorial-tutorial sebelumnya. Seperti yang pernah kita lakukan dalam pembuatan aplikasi, secara default tampilannya akan seperti pada gambar dibawah ini.

Ket (Warna Merah : Untuk Design . Warna Biru : Untuk penulisan Kode)

Mungkin beberapa dari agan sudah tau itu, namun ini hanya sedikit flashback. Apabila kita ingin mengganti properties pada design Emulatur kita bisa bermain main pada tool seperti gambar yang ditandai dibawah ini.

Ket :

Zoom : untuk mengatur ukuran emulator design

Show Snap Grid : untuk memperlihatkan grid agar ketika kita menaruh beberapa element seperti button agar rapih.

Snap to gridlines, dll. Mungkin agan-agan bisa mencoba menguliknya satu-satu.

Seperti yang kita ketahui pada windows phone ini UI menggunakan Silverlight. Dan pada umumnya ketika kita memasukkan element pada toolbox seperti button  kedalam Xaml design maka secara otomatis akan tertuliskan kode button beserta propertiesnya pada MainPage.xaml. lihat seperti contoh gambar dibawah ini.

(Lihat pada gambar yang ditadai dengan warna biru, itu adalah kode dari element button yang kita drag ke xaml design yang secara otomatis langsung tertulis pada MainPage.xaml)

Pesan : kita bisa membuat element button dengan cara men-drag dari Toolbox langsung, atau menuliskan kode pada MainPage.xaml langsung juga bisa.

Xaml ini hamper sama dengan XML dan juga HTML karena disetiap pembuka selalu ada penutup contoh seperti gambar dibawah ini.

Ket : <Grid itu adalah pembuak dan kode </Grid> itu adalah penutup.

Jadi istilahnya jangan lupa tutup kembali apa yang telah kita buka, atau akhiri apa yang pernah kita mulai weeeeeys mantap hehehee

Lalu selanjutnya saya akan menjelaskan mengenai SupportedOrientation, atau bisa diliat kodenya seperti dibawah ini. 

Yang ditandai oleh warna biru, ketika dijalankan aplikasi maka  tampilan pada emulator akan seperti ini.

Jadi ketika emulator 7.1 sudah dijalankan lalu buat emulator seperti ini, maka Si page name beserta button tidak ikut seperti emulatornya, itu fungsi dari SupportedOrientation menggunakan “Portrait” jadi maksudnya orientasi yang kita support itu hanya Portrait saja. Lalu Orientation : “Portrait” itu merupakan Default, jadi ketika emulator dibuka maka tampilannya akan portrait atu berdiri.

Lalu ikuti kode seperti gambar yang ditandai dibawah ini. 

Kita ubah SupportdOrientation Menjadi PortraitOrLandscape dan Orientation menjadi Landscape, maksud dari shell:SystemTray.IsVisible=”False”; adalah kode dimana apakah kita akan menampilkan bar batrei dan sinyal, jika ingin menampilkan maka tuliskan kode “True” , jika tidak ingin menampilkan maka tuliskan kode “False”. Lalu kita jalankan Emulator 7.1 dan hasilnya akan seperti gambar dibawah ini.

Ketika kita ubah maka posisinya akan seperti gambar diatas.

Lalu kita masuk ke penjelasan mengenai Grid dan StackPanel

Grid dan StackPanel merupakan 2 buah Element yang termasuk kedalam Layout Control. Yang artinya kita biisa mengkontrol Layout ini lewat StackPanel, untuk merapihkan beberapa tampilan.

Mungkin hanya sekian penjelasan dari saya, semoga bermanfaat bagi kalian, jangan pernah menyerah untuk belajar, karena sampe matipun Ilmu itu adalah harta yang paling berharga. Mohon maaf apabila ada kata-kata yang kurang berkenan, da nada penjelasan yang kurang bisa dimengerti, mungkin agan-agan bisa memberi komentar pada Tutorial diatas. Saya pamit undur diri. Sampai ketemu pada sesi tutorial selanjutnya.

 

Salam programmer!!!!

Wassalamu’alaikum Wr. wb