MEMBUAT LAYOUT WINDOWS 8 APP MENGGUNAKAN XAML

Setelah kita mendesain aplikasi windows 8 yang akan kita buat, kini saatnya membuat layout dari desain tersebut. Kali ini saya akan berbagi cara bagaimana membuat layout aplikasi windows 8 yang akan kita buat menggunakan XAML. Saya akan membahas layout menggunakan beberapa panel yang ada yaitu

  • Canvas

Jika kita membuat layout menggunakan canvas, kita akan mengacu seperti menggunakan koordinat kartesius. Secara default titik 0,0 akan berada di kiri atas. Untuk mengatur koordinat x(horizontal) bisa kita gunakan “Canvas.Left” properties pada element yang akan kita set nilainya. Sedangkan untuk mengatur koordinat y(vertikal) kita gunakan “Canvas.Top”. Tentunya jika menggunakan Canvas kita harus set tiap element posisi x dan y nya. Sebagai contoh

layout1

  • StackPanel

Jika anda akan membuat layout list dari beberapa item maka StackPanel adalah pilihan yang tepat. Misalkan anda akan membuat gallery gambar, menu atau toolbox, StackPanel sangat cocok digunakan untuk membuat layout seperti contoh tersebut. Hal yang perlu diingat saat membuat layout dengan StackPanel adalah orientationya, kita bisa set orientation StackPanel secara vertical,contohnya sebagai berikut

layout2

Selain itu kita juga bisa set orientation StackPanel secara horizontal, contohnya sebagai berikut

layout3

Tinggal kita sesuaikan dengan kebutuhan apakah ingin menggunakan orientation secara horizontal maupun vertical.

  • Grid

Grid sendiri merupakan panel yang paling sering digunakan untuk membuat layout pada aplikasi windows 8 kita. Grid sendiri menggunakan system baris dan kolom, bisa dibilang mirip table. Selain itu grid lebih banyak digunakan karena kita bisa set ukuran layout secara auto menyesuaikan dengan contentnya. Nahh untuk lebih memahami, bisa disimak contoh codenya

layout4

Itulah tadi 3 panel yang sering digunakan untuk membuat layout menggunakan XAML. Selain itu kita juga bisa menggabungkan beberapa panel untuk membuat layout. Misalkan kita menggunakan grid, lalu kita ingin membuat gallery gambar, tentunya kita membutuhkan StackPanel untuk mempermudah kita dalam membuat gallery gambar. Contohnya penggunaan grid dan StackPanel dalam satu page bisa disimak langsung pada gambar di bawah ini

layout5

Okee sekian dulu dari saya, semoga bermanfaat untuk membuat layout dari desain aplikasi windows 8 yang akan anda buat :)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s