User Interface #DevelopWin8Apps #MSP

Satu lagi yang keren dari Visual studio 2012 ini. Dia sudah include Blend. Jadi waktu kita mengistal Visual Studia, Belnd ini juga terinstal. Blend sendiri adalah kumpulan tools desain yang dapat kamu gunakan untuk membangun aplikasi Windows Store secara visual dengan JavaScript, VB, C#, atau C++ (sumber).

Untuk membuka Blend, lihat saja pada menu start kamu atau di Visual Studio klik kanan proyekmu di the Solution Explorer, kemudian klik Open in Blend.

Dengan Blend ini, mengatur user interface aplikasi kita pun lebih mudah. Kita hanya perlu drag and drop saja sedangkan code akan mengikuti.

Well, sekarang saya akan menjelaskan bagaimana saya membangun user interface instalay.

1. Pertama saya akan memasukan gambar sebagai header tampilan aplikasi saya. Maka saya harus meletakan gabar tersebut di folder assets terlebih dahulu. Caranya adalah pilih tab Project pada side bar kiri atas, kemudian klik kanan Assets, klik Add Existing Item, dan pilih gambar yang kamu ingin masukan.

2. Selanjutnya pilih tab Assets-> Controls-> All kemudian drag Image ke workspace kamu

3. Atur ukuran kotak gambar sesuai kemauanmu. Tinggal seret-seret saja.

4. Lihat side bar kanan (Properties), klik Common, dan pada dropbox “Source” pilih gambar yang ingin kamu jadikan header.

5. Sekarang saya akan memasukan tulisan, jadi lihat side bar kiri lagi, drag TextBlock, dan drop ke workspace.

6.   Atur ukuran, tulisan, warna, dan lain-lain di Properties. Otak-atik saja sesuai keinginanmu.

7. Sekarang saya akan memasukan TextBox. Gunanya adalah untuk memunculkan kotak input. Seperti sebelumnya dari sidebar kiri drag saja TextBox-nya, kemudian atur di Properties. Untuk kali ini jangan lupa isi bagian “name”. Kenapa harus diisi? Karena nanti saya akan menggunakan TextBox ini pada suatu method. Intinya TextBox ini nantinya akan dipanggil untuk diolah, makanya harus dikasih nama. Kan susah juga memanggilnya jika dia tidak punya nama. Saya memberi nama dia “Sentences”.

8.  Sekarang masukkan dua button sekaligus. Drag saja dari sidebar kiri, dan atur di Properties. Satu Button diisi dengan tulisan “Ubah”, dan yang satu diberi tulisan “Bagi”.

9.  Selesai. Oh ya, jika kamu masih mau otak-otak lagi propertiesnya, di workspace kamu tinggal double click saja mana yang akan diotak-atik. Misal kamu masih mau otak-atik background, double click background-nya dan di properties atur warnanya.

Oke! Jika masih ada yang ingin ditanyakan komentar saja. Dan kalau kamu masih penasaran dengan Aset-aset lain, seperti apa itu Checkbox, Radio button, dan lain-lain, coba-coba saja. Kita tidak akan pernah tahu sebelum kita mencoba bukan? Sebagai penutup. Saya tunjukan hasil rancangan saya untuk tampilan Instalay. Taraaaaaaaaaaa! Sudah user friendly-kah?