[VS2012 C# WP8] XAML Designing in Nutshell and the Holy StackPanel

Assalamualaikum Ladies and Gentlemen,
Artikel ini akan mengupas mengenai beberapa aspek pengembangan UI dengan XAML. Akan sedikit lebih serius dan berbobot. *buhahaha*

Karena artikel ini harus mengenai proses belajarnya, mari kita sedikit membahas konsep sederhana.

Dalam mengembangkan sebuah UI, organisasi konten merupakan hal yang patut untuk diberi perhatian lebih. Konten yang tersusun dengan rapi dan sistematis mempermudah pengguna untuk memperoleh informasi dan mengoperasikan sistem secara optimal. Oleh sebab itu, desain UI harus dilakukan secara hati-hati.

Project Panorama Apps kali ini akan menggunakan XAML untuk merancang antar muka penggunanya(UI). XAML(eXtensible Application Markup Language), adalah bahasa markup yang dikembangkan oleh microsoft.

*XAML ini masih sodaraan sama HTML, jadi konsepnya hampir-hampir sama*
Untuk "menciptakan" object pada applikasi kita, kita cukup menuliskan beberapa tag pada file *.xaml kita. Untuk mengaksesnya kita dapat menggunakan file *.cs. Environment dari IDE VS2012 sangat user friendly untuk membimbing kita merancang UI dengan XAML. Sehingga akan sangat mungkin untuk belajar dengan teknik "trial-and-error".

*membangun UI dengan XAML ibarat memasak sebuah sajian makanan, setiap orang punya selera dan resep rahasia masing-masing*
Tidak ada UU yang mengatur bagaimana seorang developer menggunakan XAML untuk UI nya. Secara probadi, dalam pengembangan aplikasi juragan pulsa saya gemar menggunakan tag <stackpanel... > untuk setiap halaman saya.
Dari hasil belajar "trial-and-error" stackpanel menjaga agar antara satu konten dan konten lain tidak saling menindih. Dari namanya STACKpanel, tag ini akan membuat konten di dalamnya saling bertumpuk/ berjejer dari atas ke bawah. Akan sangat nyaman untuk membuat UI dengan satu kolom, ini maksudnya :

Komponen textblock, listpicker, textbox, dan button diatas akan secara otomatis tersusun secara vertikal dengan menggunakan stackpanel. Tidak perlu repot memberi atribut posisi untuk masing-masing konten. Margin dari masing-masing konten pun akan secara otomatis menyesuaikan diri dan terbentuklah komponen rapi yang vertical.

Namun, masalah akan muncul ketika ingin meletakkan dua buah konten dalam baris yang sama. Stackpanel tidak mengijinkan hal ini terjadi.
*Akan tetapi Tuhan Maha Adil, selalu ada jalan untuk menyelesaikan masalah*
Kita bisa siasati dengan membuat grid didalam barisan stackpanel. Konsepnya, grid hampir sama dengan stackpanel, akan tetapi lebih flexible dan lebih susah dikendalikan. Langsung kita lihat contohnya :

Kita dapat menyelipkan grid dengan leluasa dibagian manapun stack pannel yang ingin kita "belah". Di dalam kotak orange adalah konten stackpanel secara keseluruhan, sama seperti sebelumnya. Kemudian yang berada di kotak merah adalah grid untuk membagi kolom textbox dan button search.
Untuk menggunakan grid, kita cukup memberikan tag <grid....>, mendeklarasikan jumlah potongan baris/kolom beserta ukuranya, kemudian kita tinggal memakaikannya ke komponen yang ingin kita belah. Caranya memberi attribut Grid.column / Grid.row.
Voila, terbentuklah kolom di dalam stackpanel.

Demikian ladies and gentlemen, cukup mudah menggunakan stackpanel dan grid untuk UI design kita.
Semoga bermanfaat,

Wassalamualaikum,