Pengenalan XAML

Extensible Application Markup Language (XAML) adalah bahasa deklaratif yang kita gunakan untuk

membuat user interface di aplikasi metro style. Tentu saja kita dapat menggunakan Microsoft Visual

Studio dan Expression Blend untuk membuat UI dan menyerahkan XAML dibuat secara otomatis oleh

alat tersebut. Tetapi saya merasa bahwa sangat penting bagi kita untuk memahami cara kerja XAML. Hal

ini mempermudah kita jika ingin melakukan edit secara langsung dan akses penuh ke user interface yang

anda bangun. Kita harus belajar berjalan terlebih dahulu sebelum berlari bukan ?

Jika anda berasal dari web programming, anda bisa menganggap bahwa XAML setara dengan HTML.

XAML terdiri dari elemen dan property. Kaidah markup yang diikuti adalah XML.

XAML digunakan untuk membuat object dan mengatur nilai property dari object, mengatur struktur dari

object dan hubungannya dengan object lain. Kita juga dapat membuat code yang berpasangan dengan

XAML yang disebut code behind untuk menangani event atau mengatur property dari code. Sehingga

ada pemisahaan yang bersih antara logic dan user interface. Hal ini juga mempermudah koordinasi kerja

antara designer dan developer.

File XAML adalah XML files yang memiliki ektensi .xaml. Code behindnya memiliki ekstensi .xaml.h (file

header) dan .xaml.cpp (file implementasi)

Contoh XAML

Pada bagian sebelumnya ketika membuat program pertama, kita telah melihat bagaimana kita

membuat sebuah button dan menghasilkan XAML kira-kira sebagai berikut.

Tag button tersebut kita gunakan untuk melakukan instansiasi object dari kelas Button. Width,

HorizontalAlignment dan VerticalAlignment merupakan attribute yang ada pada object Button.

Kita bisa membuat user interface dengan mengetikkan langsung pada XAML windows sperti yang

terlihat pada gambar dibawah ini

Selain itu kita juga dapat membuat user interface langsung dengan menggunakan Visual studio designer

dengan cara drag and drop dari Toolbox.

Setelah anda nanti mengetahui bagaimana XAML dan seluk beluknya maka kita akan menggunakan

Visual Studio Designer dan Blend untuk membangun User Interface. Dengan demikian kita bisa menjadi

lebih produktif dan kualitas dari product kita pun menjadi lebih baik.

XAML dan Code

Sebenarnya kita bisa saja membangun user interface dengan menggunakan Code prosedural yang ditulis

dengan c#. Contohnya adalah sebagai berikut.

Kita dapat menulis code XAML diatas dengan menggunakan c++ sebagai berikut ini.

Tetapi XAML lebih mudah untuk dibaca dan lebih singkat penulisannya dibandingkan dengan code c++.

Meskipun kadang ada kalanya kita perlu membuat elemen dari user interface dengan code jika kita ingin

membuat UI yang dinamis.

Property

Ada dua cara untuk memberikan nilai terhadap property :

1. sintaks attribute

2. sintaks property

Anda telah melihat bagaimana cara menggunakan sintaks attribute sebelumnya dengan cara seperti ini

attribute="value". Contohnya jika kita ingin membuat object Rectangle dan ingin memberikan warna

Red maka kita akan membuatnya dengan cara sperti ini.

<Rectangle Fill="Red" />

Tetapi jika warna yang kita inginkan tidak sesimple itu melainkan memiliki gradasi warna dan kombinasi

maka kita dapat menggunakan sintaks property.

Nama

Agar dapat menggunakan dan merujuk object Control yang telah kita buat dengan XAML maka kita perlu

memberikan nama.

Anda dapat langsung mengetikkan pada XAML editor atau menggunakan bantuan dari property panel.

Setelah anda memberikan nama maka anda langsung dapat mengakses object control tersebut dari

code. Berikut object tersebut telah ditampilkan pada intellisense

Anda juga dapat merubah property lainnya dengan mudah dengan menggunakan property panel.

Event Handler

Setiap control memiliki event yang memungkinkan kita untuk bereaksi terhadap aksi yang dilakukan oleh

user atau perubahan yang teradi pada aplikasi kita. Contohnya Button memiliki event Click yang akan

ditrigger ketika user melakukan klik terhadap Button. Kita membuat method yang disebut dengan event

handler untuk menangani atau bereaksi terhadap event tersebut.

Kita dapat membuat event handler dengan menggunakan Window Propertie, dari XAML atau langsung

dari code behind.

Jika anda menggunakan Property window maka anda tinggal memilih event yang akan ditangani,

memberikan nama terhadap event handlernya dan double click. Maka event handler tersebut akan

dibuat oleh Visual Studio.

Maka anda akan melihat bahwa pada file header dan implementasi akan digenerate event handler

untuk event tersebut

File Header

File Implementasi

Kita juga dapat membuat event handler langsung dari XAML view. Kita tinggal mengetikkan nama event

yang ingin kita tangani dan intellisense akan membantu kita mengenerate event tersebut.

Cara ketiga adalah dengan meletakkan proses untuk melekatkan handler dengan event langsung pada

code behind.

Jangan lupa menyertakan deklarasi pada header file

XAML dan Visual Tree

Jika kita memiliki elemen <Button> atau <Grid>, kita dapat memiliki elemen di dalam elemen tersebut.

Hal ini menggambarkan hubungan dan komposisi antar object dan menentukan posisi tampilan pada

layar, juga bagaimana cara menangani suatu event.

Perhatikan contoh berikut ini.

Jika kita menggambarkan hubungan antara Grid, StackPanel dan TextBlock, kita akan mendapatkan

visualisasi sebagai berikut.

Selain untuk menentukan bagaimana representasi dari content, visual tree juga memiliki efek

bagaimana event diproses. Banyak event yang berhubungan dengan UI dan input "bubble" sampai ke

puncak tree. Contohnya kita dapat membuat event handler di StackPanel untuk menangani event press

atau click untuk TextBlock. Hal ini sangat bermanfaat karena kita tidak perlu mengattach handler satu

persatu untuk setiap TextBlock. cukup satu saja yang ada di parent nya yaitu StackPanel.

Contohnya adalah sebagai berikut.

berikut adalah event handler nya

Ketika anda menjalankan program tersebut dan menekan TextBlock maka event tersebut akan

ditangkap oleh TextBlock tetapi akan diteruskan ke parent nya yaitu StackPanel dimana terdapat event

handler commonHandler.

Berikut skenario yang terjadi ketika TextBlock di klik.

Kita juga dapat menangkap event tersebut pada Grid karena event dari StackPanel akan diteruskan lagi k

Grid yang merupakan root dari tree tersebut.

Resources

Logical Resource membuat kita dapat membuat object XAML yang bukan merupakan bagian dari Visual

tree tetapi dapat digunakan oleh elemen dari user interface yang lain. Contohnya kita membuat

resource untuk warna dari sebuah button dengan Brush.

Keuntungan penggunaan resource adalah kita dapat menikmati reusability dari object yang kita

definisikan tersebut, karena kita hanya membuat object tersebut sekali saja dan dapat menggunakannya

berulang-ulang. KIta juga mendapatkan flexibility, dengan memisahkan object yang digunakan oleh user

interface dan user interface itu sendiri kita dapat mengubah bagian user interface tersebut tanpa

mengubah keseluruhan design.

Berikut cara mendefinisikan resource yang terletak di Page. Jadi resource ini akan dikenali dikeseluruhan

page tersebut.

Jika anda ingin resource tersebut local hanya pada sebagian elemen saja, anda dapat

mendeklarasikannya secara local terhadap elemen tersebut. berikut contoh untuk local ke grid.

Setiap object yang dideklarasikan sebagai resource harus memiliki property x:Key. Key inilah yang

digunakan oleh elemen lain untuk mengakses resource tersebut.

Anda juga dapat mendefinisikan resource pada Application (App.xaml) sehingga dapat diakses oleh

keseluruhan aplikasi tersebut. Coba anda buka App.xaml anda maka anda akan menemukan deklarasi

Resource yang sudah digenerate sebelumnya oleh visual studio.

Anda dapat menambahkan resource global anda pada bagian tersebut.

Setelah anda melakukan deklarasi maka tentu saja kita ingin menggunakan resource tersebut. Kita dapat

melakukannya dengan sintaks {StaticResource resourceKey}.

Resource Dictionary

Anda telah melihat bahwa pada App.xaml kita menemukan tag <ResourceDictionary>. Resource

dictionary adalah koleksi dari resource yang berada pada XAML file yang berbeda dan dapat diimport

oleh aplikasi kita. Hal ini dapat berguna apabila kita ingin menggunakan resource tersebut pada

beberapa project pada satu solution.

Coba kita lihat kembali bahwa pada App.xaml kita telah memiliki satu resource file.

File tersebut terdapat di folder common.

Anda dapat melihat bahwa dalam file StandardStyles.xaml tersebut kita menemukan banyak Style. Kita

akan membahas style ini pada bagian berikutnya.

Anda dapat membuat ResourceFile dengan cara Add New Item dan memilih resource dictionary

Anda tinggal menambahkan resource yang anda inginkan ke file tersebut.

Agar resource tersebut dapat diakses dari aplikasi kita maka kita harus menggabungkan resource

tersebut. Caranya adalah dengan menggunakan MergedDictionaries.

Style

Pada resource StandardStyles.xaml yang sebelumnya kita lihat, kita menemukan banyak sekali style yang

telah didefinisikan disana. Salah satu contoh dari style yang dapat kita lihat dari StandardStyles.xaml

adalah sebagai berikut.

Style berguna untuk mengatur tampilan dari aplikasi kita. Jika anda pernah berkutat dengan web

pemrograman maka anda dapat menanggap bahwa style ini adalah css di xaml. Style akan memberikan

perintah kepada ui untuk menggati penampakan standar sesuai dengan nilai yang kita tentukan. Kita

menjadi lebih mudah untuk membuat tampilan yang konsisten. Hal ini sangat diperlukan pada aplikasi

metrostyle. Aplikasi metrostyle memiliki prinsip-prinsip design yang telah standard dan ditentukan.

Salah satu kelas yang akan sering kita gunakan untuk membuat style adala Setter. Setter berfungsi untuk

mengubah nilai dari property elemen.

<Setter Property="Background" Value="Red"/>

Ada beberapa cara yang dapat digunakan untuk mengaplikasikan style pada control kita. Cara yang

pertama adalah langsung mengesetnya pada control yang ingin kita ubah tampilannya.

Pada kasus diatas maka button kita akan memiliki warna merah dan tulisan "Style set directly" seperti

pada gambar dibawah ini.

Meskipun melakukan setting secara langsung pada control merupakan cara yang mudah,tetapi hal ini

bukan merupakan best practice. Hal ini disebabkan kita tidak dapat menggunakan style tersebut di

button lain dan kita harus melakukan copy paste dan akan banyak duplikasi code yang ada. Kita

sebaiknya mematuhi prinsip Don't repeat yourself dalam hal ini.

Cara yang paling banyak digunakan adalah menggunakan koleksi Resources. Kita telah mempelajari pada

bagian sebelumnya bahwa resource dapat digunakan untuk mendefinisikan object yang dapat dirujuk

oleh elemen-elemen lain. Pada contoh ini kita membuat koleksi resource dari Page. Anda harus

mengatur TargetType dari style tersebut yaitu adalah Button dalam hal ini.

Untuk menggunakannya kita menggunakan keyword binding expression

Style="{StaticResource resourceKey}".

Kita telah memberi key style dengan nama StyleOne. Key tersebutlah yang kita gunakan untuk merujuk

kepada style tersebut. Jika button tadi stylenya ingin kita ubah maka code button akan menjadi sebagai

berikut.

Hasilnya tetap sama seperti sebelumnya, tetapi kita dapat menggunakan style tersebut berulang ulang.

Style Inheritance

Kita bisa menerapkan inheritance dalam membuat style. Hal ini dapat berfungsi jika kita ingin membuat

style baru yang sedikit saja bedanya dengan style yang kita buat sebelumnya. Kita dapat menghemat

code dengan membua satu base style yang akan kita turunkan. Kita melakukannya dengan

menggunakan property BasedOn. Property BasedOn merujuk kepada style lain dan secara otomatis akan

menurunkan semua property yang dimiliki anggota dari parent style tersebut. Kita tinggal

menambahkan member baru pada child style.

Berikut adalah contoh dari style inheritance yang diaplikasikan untuk Button.

Berikut adalah tampilan dari kedua button yang mengimplementasikan kedua style tersebut.

Jika property di set di kedua style tersebut (parent dan child) maka nilai yang digunakan adalah nilai dari

child nya. Tetapi jika hanya parent saja yang memberikan nilai sedangkan child tidak, maka nilai dari

parent tersebut akan dipertahankan.

Kita telah melihat sebelumya bahwa kita telah dipermudah oleh Visual Studio template yang

menyediakan StandardStyle.xaml. Kita dapat menggunakannya secara langsung di aplikasi kita. Dan

dijammin bahwa style yang terdapat di StandardStyle tersebut telah sesuai dengan desain metro. Anda

sebaiknya menggunakan style yang telah didefinisikan pada StandardStyle tersebut. Ketika anda ingin

mendefinisikan style sendiri maka selalu usahakan bahwa anda menurunkan dari StandardStyle dengan

menggunakan BasedOn jika memungkinkan.