Kata Pengantar
Puji syukur kepada Allah SWT yang telah memberikan kekuatan kepada kresna untuk menyusun
dan menyelesaikan buku ini yang berjudul “User Experience in WPF and SIlverlight With
Expression Blend”. Kresna mengucapkan terima kasih banyak untuk Wely dan Naren yang telah
memberikan kesempatan kepada kresna untuk menulis buku ini. Tidak lupa kresna berterima
kasih kepada keluarga kresna yang selalu mendukung kresna, terutama papa yang selalu
mengerti akan kondisi kresna, selalu mendukung dikala kresna sedang susah. Terima kasih yang
sepsial untuk Nurulita Prihasti Kardia, karena hampir selalu menemani dan membantu kresna
dalam menyelesaikan buku ini, serta untuk teman-teman, fu yang sering membantu, niko yang
membuatkan cover, Ronald, dkk. Kresna mendapatkan banyak ilmu tambahan saat menulis
buku ini. Dan kresna yakin, dengan Expression Blend dapat membantu para developer dan
designer. Semoga buku ini bermanfaat bagi siapapun yang membacanya.
Jakarta, Oktober 2008
Kresna Dewnatara Siahaan, S.Kom
Daftar Isi
Daftar Isi ........................................................................................................................................................ 3
Introduction .................................................................................................................................................. 6
Target dan Tujuan ......................................................................................................................................... 7
Gambaran Umum Expression Blend ............................................................................................................. 8
Versi & Instalasi Expression Blend ............................................................................................................ 8
XAML ......................................................................................................................................................... 9
WPF Application (.exe) ................................................................................................................................ 10
Expression Blend Toolbar untuk WPF ..................................................................................................... 10
Selection Tool ...................................................................................................................................... 12
Direct Selection Tool ........................................................................................................................... 12
Pen dan Pencil Tool ............................................................................................................................. 12
Pan tool ............................................................................................................................................... 15
Zoom Tool ........................................................................................................................................... 15
Camera Orbit Tool ............................................................................................................................... 16
Eyedropper Tool .................................................................................................................................. 16
Paint Bucket Tool ................................................................................................................................ 17
Brush Transofrm Tool.......................................................................................................................... 19
Shape Tool: Elipse, Rectangle, dan Line .............................................................................................. 22
Layout Control ......................................................................................................................................... 24
Text Control dan Text Input Control ....................................................................................................... 25
TextBox ............................................................................................................................................... 25
RichTextBox ......................................................................................................................................... 26
TextBlock ............................................................................................................................................. 28
PasswordBox ....................................................................................................................................... 29
Label .................................................................................................................................................... 30
FlowDocumentScrollViewer ................................................................................................................ 31
Input Control ....................................................................................................................................... 35
Asset Library ........................................................................................................................................ 36
InkCanvas Control ............................................................................................................................... 37
Tab Control ...................................................................................................................................... 40
WebBrowser Control ...................................................................................................................... 42
Object and Timeline Panel .................................................................................................................. 45
Project panel ....................................................................................................................................... 47
Membuat folder dan memasukan file (image, video, dll) ke Project ............................................. 48
Properties panel .................................................................................................................................. 49
Brushes ............................................................................................................................................ 50
Membuat Color Resource ............................................................................................................... 54
Membuat MediaElement Sebagai Resources ................................................................................. 55
Membuat Resource Dictionary ....................................................................................................... 57
Perbedaan Color Resource biasa dan Resource Dictionary ............................................................ 59
Appearence ..................................................................................................................................... 61
Layout .............................................................................................................................................. 63
Common Properties ........................................................................................................................ 65
Text ................................................................................................................................................. 66
Transform ........................................................................................................................................ 67
Miscellaneous ................................................................................................................................. 68
Search .............................................................................................................................................. 69
Resources panel .................................................................................................................................. 70
Blend Development View ................................................................................................................... 71
Design View ..................................................................................................................................... 71
XAML View ...................................................................................................................................... 72
Split View ........................................................................................................................................ 73
Workspaces ......................................................................................................................................... 73
Design Workspace ........................................................................................................................... 74
Animation Workspace ..................................................................................................................... 74
Layout Elements ...................................................................................................................................... 75
Grid Layout .......................................................................................................................................... 75
Menggunakan Grid Layout Mode ................................................................................................... 79
Canvas Layout ..................................................................................................................................... 82
StackPanel Layout ............................................................................................................................... 85
WrapPanel Layout ............................................................................................................................... 86
DockPanel Layout ................................................................................................................................ 88
ScrollViewer Layout ............................................................................................................................ 89
Border Layout...................................................................................................................................... 92
ViewBox Layout ................................................................................................................................... 93
Control Templates, Styles, dan Custom UserControls ............................................................................ 95
Control Template ................................................................................................................................ 95
Merubah dan Membuat Button Control Template ........................................................................ 95
Memasukan Gambar ke dalam Button ......................................................................................... 103
Membuat eye-catching Button ..................................................................................................... 105
Action and Animations .......................................................................................................................... 116
Membuat Animasi Sederhana........................................................................................................... 116
Motion Path ...................................................................................................................................... 120
Membuat Animasi Button (MouseEnter dan Click) .......................................................................... 124
Case Study WPF: Data binding, image 3D, animation 3D, layout control, input control, Windowless
application, dan Compatibility with Visual Studio ................................................................................ 133
Tampilan atau Layout Aplikasi .......................................................................................................... 133
Data binding ...................................................................................................................................... 140
Merubah Gambar 2D Menjadi 3D ..................................................................................................... 160
Membuat Animasi 3D ....................................................................................................................... 162
Windowles Application & Compatibility with Visual Studio 2008 .................................................... 169
Silverlight 2.0............................................................................................................................................. 173
Perjalanan Silverlight ............................................................................................................................ 173
Install Microsoft Silverlight ................................................................................................................... 174
Expression Blend Toolbar untuk Silverlight 2.0 .................................................................................... 176
Pengenalan States pada Silverlight 2.0 ................................................................................................. 177
Case Study: Membuat Button pada Silverlight 2.0 ............................................................................... 184
Deep Zoom dengan Deep Zoom Composer .......................................................................................... 188
Introduction
Selamat datang di buku User Experience in WPF & Silverlight with Expression Blend! Saya
sangat senang sekali dapat menulis buku ini, karena saya sangat menyukai Windows
Presentation Foudation (WPF) dan Silverlight, dan tentunya dengan senang hati saya ingin
mengajarkan kedua teknologi tersebut melewati buku ini. Saya akan mengajarkan langkah demi
langkah bagaimana menggunakan Microsoft Expression Blend dari pemula hingga mahir
menggunakannya, sehingga dapat membuat aplikasi WPF dan Silverlight 2.0 yang WOW!
Microsoft Expression Blend merupakan teknologi yang masih cukup baru dari Microsoft, namun
teknologi ini sangat cepat berkembang di pasar. Banyak perusahaan – perusahaan di luar sana
mencari developer WPF ataupun Silverlight karena WPF dan Silverlight merupakan topic yang
hangat. Sehingga permintaan akan developer dan designer yang bisa menggunakan teknologi
WPF dan Silverlight akan cenderung meningkat.
Target dan Tujuan
Banyak orang yang salah membaca buku karena tidak termasuk dalam target pembaca dari
buku tersebut, maka dari itu kita perjelas target pembaca dari buku ini. Target pembaca untuk
buku ini adalah orang yang minimal mengetahui Object Oriented Programming (OOP) dan
cukup berpengalaman dalam programming dalam bahasa pemrograman seperti C, C++, C#,
Visual Basic, ataupun javascript. Namun jika hanya mengenal sedikit tentang OOP, tidak usah
khawatir karena tetap akan bisa mendapatkan pengetahuan yang ada pada buku ini.
Setelah membaca buku ini diharapkan kita bisa mencoba membuat aplikasi WPF ataupun
Silverlight dengan menggunakan Microsoft Expression Blend 2 Service Pack 1. Jadi yang lebih
ditekankan adalah WPF dan SIlverlight jika dilihat dari sudut pandang Expression Blend. Adapun
cakupan dari buku ini adalah
Mengerti cara menggunakan Expression Blend untuk membuat aplikasi WPF.
Mengerti Blend IDE, fungsi setiap tool yang ada dan cara menggunakannya.
Mengerti basic dari XAML dan C#
Mengenal basic dari WPF framework element controls.
Mengerti MediaElement yang ada pada WPF dan bisa menggunakannya untuk membuat
video dan audio untuk aplikasi yang akan dibuat.
Belajar bagaimana membuat reusable Styles dan control templates.
Gambaran Umum Expression Blend
Selama ini developer dan designer memiliki pekerjaan yang bertolak belakang, dimana si
developer tidak mengerti sama sekali mengenai urusan design dan sebaliknya. Maka dari itu
Microsoft mengeluarkan sebuah tool yang dinamakan Expression Blend. Dengan tujuan
membaurkan atau mempermudah dalam penyatuan antara design dan code, dimana sampai
saat ini itu masih menjadi kendala yang cukup besar bagi perusahaan – perusahaan yang ada.
Bahasa pemrograman yang digunakan adalah XAML dan C#. karena dengan XAML itulah
developer dan designer bisa berkomunikasi.
Selain untuk meleburkan antara developer dan designer, Expression Blend juga memiliki tujuan
untuk membuat user experience yang lebih dibandingkan aplikasi jaman dahulu. Dapat
diilustrasikan seperti gambar di bawah ini, yang sebelah kiri adalah aplikasi jaman dahulu
sedangkan yang sebelah kanan adalah aplikasi yang menggunakan teknologi WPF dan Silverlight
dengan bantuan Expression Blend.
Versi & Instalasi Expression Blend
Versi Expression Blend yang akan kita pakai untuk buku ini adalah Expression Blend 2 Service
Pack 1. Untuk mendapatkan versi ini dapat di download pada alamat ini. Terdapat dua buah
installer, yang pertama adalah Expression Blend 2 trial edition, dan kemudian download
Expression Blend 2 Service Pack 1 Preview.
Install Expression Blend 2 Trial terlebih dahulu, baru kita install yang Service Pack 1 nya. Ketika
kita menginstall Expression Blend 2 SP 1 maka dia akan meminta kita untuk uninstall Expression
Blend 2.5 June Preview. Dan tentunya syarat atau requirement yang dibutuhkan untuk
menginstall Expression Blend 2 SP 1 adalah kita sudah menginstall .NET Framework 3.5 SP 1.
XAML
XAML adalah sebuah bahasa yang digunakan dalam teknologi WPF dan Silverlight untuk
menghubungkan antara developer dan designer. Selama ini developer hanya mengerti bahasa
pemorgraman saja, missal C#, dan designer hanya tau urusan design saja. Tapi jika ada
penengah antara ke dua perbedaan tersebut (dalam hal ini adalah XAML), maka developer dan
designer cukup mempelajari XAML itu sendiri, sehingga dapat lebih mudah berkomunikasi.
Gambar di atas merupakan ilustrasi dari XAML itu sendiri, yaitu pertemuan antar dua buah
pekerjaan yang berbeda selama ini. Untuk lebih jelasnya, dapat dilihat lebih dalam pada buku
ini.
WPF Application (.exe)
Expression Blend Toolbar untuk WPF
Jika sudah familiar dengan toolbar yang ada pada suatu designer tool yang ada, maka tidaklah
sulit untuk menggunakan Microsoft Expression Blend. Karena pada dasarnya cara
penggunaannya sangatlah mirip. Mungkin hal ini juga sebuah trik yang dibuat oleh Microsoft
agar pengguna tools lainnya dapat mudah beradaptasi dengan Expression Blend. Toolbar
adalah seperangkat alat yang dapat digunakan untuk membuat dan merubah sebuah User
Interface (UI) dari aplikasi WPF atau Silverlight yang kita buat.
Untuk melihatnya, kita buka terlebih dahulu aplikasi Microsoft Expression Blend 2 Service Pack
1 yang sudah terinstall. Kemudian pilih New Project.
Lalu pilih WPF Application (.exe), beri nama project sesuai dengan selera, dan pilih .NET
Framework 3.5.
Setelah itu maka akan muncul tampilan seperti dibawah ini.
Gambar diatas merupakan workspace kita untuk membuat aplikasi Windows Presentation
Foundation. Jika kita lihat disebelah kiri terdapat banyak tools yang dapat kita gunakan, dan
itulah yang dinamakan dengan toolbar. Berikutnya kita akan mempelajari apa saja yang ada
pada toolbar tersebut dan bagaimana cara kerjanya.
Selection Tool
Selection tool adalah alat yang digunakan ketika kita ingin
memilih user interface element (UIElements) yang ada pada
aplikasi WPF atau Silverlight kita. Dengan tool ini kita dapat
merubah properti dari UIElements yang kita pilih, seperti
merubah ukuran, bentuk, opacity, atau bahkan warna. Selection
tool merupakan tool yang akan paling sering digunakan dalam
penggunakan Expression Blend, jadi sebaiknya kita harus sangat
familiar dengan lokasinya yang ada pada toolbar.
Direct Selection Tool
Direct selection tool adalah sebuah tool yang dapat kita gunakan
untuk melihat dan merubah node yang berbeda sehingga kita
dapat membuat sebuah bentuk shape yang diinginkan, yang
lebih sering dikenal dengan path (cara membuat path adalah
dengan menggunakan Pen atau Pencil tool). Agar dapat lebih
mengerti mengenai path, maka kita akan sedikit melompat untuk
belajar penggunaan Pen tool dan pencil tool untuk membuat
path.
Pen dan Pencil Tool
Pen atau Pencil tool adalah sebuah tool yang dapat kita gunakan
untuk membuat bentuk shapes yang kita inginkan untuk
membuat aplikasi WPF dan Silverlight. Secara default kita akan
melihat Pen tool pada Expression Blend toolbar. Untuk
menggunakan Pencil tool, klik kanan pada pen tool maka akan
muncul dua jenis tool, yaitu pen dan pencil tool.
Pada dasarnya pen tool dapat kita gunakan untuk membuat sejumlah titik yang dapat kita ubah-
ubah dengan menggunakan direct selection tool. Untuk mendemokannya kita akan coba
menggunakan pen tool untuk membuat sebuah path.
1. Pilih pen tool yang ada pada Expression Blend toolbar
2. Klik pada tempat yang berbeda untuk membuat sejumlah titik.
3. Lalu klik pada titik yang pertama kali kita buat untuk menyelesaikan shape yang kita
inginkan.
Hint: Jika kita perhatikan pada cursor pen tool, kita melihat ada tanda yang mengikuti cursor
pen tool ketika kita sedang membuat sebuah path. Tanda – tanda tersebut terdiri dari tiga jenis
yaitu, (+) jika kita ingin menambahkan titik atau point pada path, (-) jika kita ingin menghilankan
titik atau point tertentu, dan (o) jika kita ingin menyelesaikan path di titik yang pertama kali kita
buat.
4. Untuk memindahkan sebuah titik atau merubahnya kita dapat menggunakan direct
selection tool. Kita hanya cukup meletakan cursor direct selection tool pada path atau
titik yang diinginkan, kemudian klik dan drag ketempat yang diinginkan. Di bawah ini
merupakan contoh penggunaan direct selection tool pada path dan titik (dari contoh
sebelumnya kemudian diubah dengan menggunakan direct selection tool).
5. Path yang sudah ada juga dapat kita ubah menjadi melengkung atau seperti kurva.
Caranya adalah dengan menekan tombol alt pada keyboard sambil klik pada path atau
titik. Kemudian dapat kita tarik hingga mendapatkan kelengkungan yang diinginkan. Di
bawah ini merupakan contoh penggunaannya.
Berikutnya fungsi dari pencil tool adalah untuk membuat sebuah shape pada workspace
bagaikan menggambar pada sebuah kertas. Pencil tool dan pen tool tidak jauh berbeda dalam
penggunaannya, namun pada pencil tool kita dapat lebih bebas dalam membuat sebuah shape.
Pen dan pencil tool sangat berhubungan erat dengan penggunaan direct selection tool, karena
dengan menggunakan ke dua tool tersebut kita dapat membuat bentuk – bentuk atau shape
yang tidak simetris. Di bawah ini merupakan contoh dari penggunaan pencil tool yang
dikombinasikan dengan direct selection tool.
Pan tool
Sekarang kita sudah lebih tahu mengenai path dan cara
menggunakan direct selection tool, mari kita kembali lagi pada
Expression Blend toolbar. Tool berikutnya adalah pan tool,
berfungsi untuk navigasi sekitar workspace. Tool ini sangat
berguna jika kita membuat aplikasi yang besar. Pan tool memiliki
cursor yang bergambar tangan, jika kita klik dan drag mouse
ketika menggunakan pan tool maka kita dapat menggerakan
workspace kearah yang kita inginkan.
Hint: Pada prakteknya banyak orang yang tidak menggunakan pan tool, karena pan tool dapat
digantikan secara fungsional dengan menekan space bar pada keyboard kemudian kita klik
pada workspace, maka akan terlihat bahwa kita dapat menggerakan workspace sama halnya
dengan menggunakan pan tool. Namun ada salah satu fitur yang menarik pada pan tool, jika
klik dua kali pada pan tool yang berada pada toolbar maka workspace akan langsung otomatis
berada di tengah. Ini sangat bermanfaat jika kita merasa kehilangan arah.
Zoom Tool
Zoom tool dapat kita gunakan untuk memfokuskan atau men-
zoom workspace. Cukup dengan klik pada area yang kita ingin
zoom in, maka workspace akan menjadi lebih fokus atau lebih
besar. Jika kita ingin melakukan zoom out atau mengecilkan
tampilan workspace yang sudah kita perbesar tadi, cukup dengan
menahan tombol alt pada keyboard lalu klik hingga
mendapatkan ukuran workspace yang diinginkan. Jika kita
menginginkan tampilan workspace menjadi 100% kembali maka
cukup dengan double klik pada zoom tool.
Hint: zoom tool sangat bermanfaat jika kita membuat aplikasi yang sangat besar. Contonya
adalah ketika kita membuat sebuat button yang memiliki banyak gradient.
Camera Orbit Tool
Bagi yang sudah familiar dengan tools untuk mengembangkan
design dua dimensi, mungkin kurang mengerti apa gunanya
camera orbit tool, karena seperti pada adobe photoshop dan
illustrator tidak terdapat tool seperti ini. Tool ini dapat kita
gunakan untuk merubah sudut dari camera view pada object
WPF, yang lebih dikenal dengan Viewport3D. Untuk lebih
jelasnya, pada penjelasan di bab sample kita akan mencoba
menggunakan ini. Untuk sedikit memperjelas penggunaan dari
tool ini mana di bawah ini adalah hasil dari penggunaannya.
Hint: Camera orbit tool hanya ada jika kita membuat aplikasi Windows Presentation
Foundation, tool ini tidak ada ketika kita membuat aplikasi Silverlight 1.0. Untuk membuat 3D
pada SIlverlight harus menggunakan plug-ins dari third party.
Eyedropper Tool
Eyedropper tool berguna jika kita ingin mengetahui warna dari
sebuah vector shape atau maupun dari sebuah gambar. Dengan
eyedropper tool, cukup dengan memilih objek yang ingin kita
ganti warnanya lalu gerakan cursor ke warna yang kita ingin copy
pada sebuah vector atau gambar. Maka secara otomatis objek
yang pertama kali kita pilih akan berubah warnanya dengan
warna yang kita plih dengan eyedropper. Namun pada
kenyataanya tool ini sangat jarang dipakai, karena pada brush
panel terdapat fungsi yang serupa.
Berikut ini adalah contoh penggunaan eyedropper tool pada Expression Blend. Dalam contoh ini
saya memiliki 3 buah objek (cara untuk membuat objek rectangle atau elips dapat dilihat pada
pembahasan Shape Tool) dengan warna biru, merah, dan hitam. Lalu misalkan kita pilih objek
berwarna hitam (klik objek berwarna hitam.
Lalu kemudian kita klik eyedropper tool yang terdapat pada toolbar, kemudian cursor akan
secara otomatis menjadi eyedropper, dan kita tinggal memilih warna yang diinginkan pada
objek yang ada. Misalkan saya klik objek berwarna merah dengan eyedropper tool maka secara
otomatis objek yang berwarna hitam (yang pertama kali kita klik) akan berubah warna menjadi
warna merah, yaitu warna yang kita pilih dengan menggunakan eyedropper tool.
Paint Bucket Tool
Fungsi paint bucket pada Expression Blend mirip dengan fungsi
paint bucket yang ada di designer tool lainnya. Dengan paint
bucket kita dapat membuat warna objek yang kita inginkan
berwarna sama dengan warna yang sedang atau tersimpan pada
paint bucket. Untuk lebih jelasnya akan dijelaskan dengan contoh
di bawah ini.
Kita ambil contoh yang sama dengan contoh pada eyedropper tool, yaitu kita memiliki 3 objek
yang berwarna biru, merah, dan hitam.
1. Kemudian misalkan kita klik objek berwarna biru, lalu jika kita lihat panel properties (kita
akan mempelajari lebih dalam mengenai panel properties pada bagian Properties panel)
yang berada disebelah kanan workspace terdapat Brushes yang dimana di dalamnya
terdapat banyak pilihan warna. Kita ganti Fill color-nya menjadi sebuah warna yang
berbeda (dalam kali ini kita ambil saja warna kuning).
2. Setelah objek berwarna biru kita ganti warnanya seperti diatas, maka kita plih paint
bucket tool yang ada pada Expression Blend toolbar. Akan terlihat cursor berubah
menjadi logo dari paint bucket tool.
3. Kemudia kita klik pada objek yang kita ingin ganti warnanya dengan warna kuning
tersebut, dalam hal ini kita coba pada objek merah dan hitam, maka ke dua objek
tersebut akan berubah warna menjadi kuning diatas.
Brush Transofrm Tool
Brush transform tool sangatlah powerfull, kita dapat merubah
gradient dari sebuah objek sesuai dengan kebutuhan. Untuk
lebih jelasnya, kita akan membuat sebuah rectangle dan
kemudian kita akan ubah gradient dari rectangle tersebut.
1. Pilih rectangle tool yang ada pada Expression Blend toolbar.
2. Kemudian kita gambar sebuah rectangle pada workspace.
3. Klik selection tool (atau dengan shortcut cukup dengen menekan tombol V pada
keyboard) dan klik pada rectangele yang tadi kita buat.
4. Kemudian pada panel properties terdapat Brushes, sama seperi langkah yang ada pada
paint bucket tool kita klik Fill.
5. Setelah kita plih Fill, pilih tombol Gradient Brush.
6. Maka secara otomatis Fill akan berubah warnanya dari tadinya adalah putih menjadi
seperti di bawah ini.
Dan jika kita lihat warna pada rectangle yang telah kita buat warnanya akan berubah
menjadi hitam yang semakin ke bawah warnanya menjadi putih.
Kemudian anggaplah kita ingin merubah warna pada rectangle tersebut dari tadinya dari atas
berwarna hitam dan semakin kebawah berwarna putih menjadi dari sebelah kiri hitam dan
semakin ke kanan warnanya menjadi putih.
7. Klik Brush Transform tool pada Expression Blend toolbar. Maka akan muncul seperti
gambar di bawah ini.
Gambar panah di atas adalah yang disebut dengan Gradient Arrow. Gradient arrow di
atas menunjukan bahwa dimulai dari warna hitam dan diakhiri dengan warna putih.
8. Untuk merubah arah dari gradient kita cukup mengarahkan cursor ke ujung dari salah
satu panah tersebut hingga cursor berubah menjadi anak panah yang melengkung.
Setelah itu kita dapat merubah arah dari gradient sesuai keinginan kita.
9. Untuk memanjangkan gradient arrow, cukup dengan mendekatkan cursor pada ujung
anak panah hingga berubah gambar menjadi tangan. Kemudian tinggal kita drag sesuai
dengan kebutuhan.
Dengan contoh di atas diharapkan kita dapat mengerti mengenai penggunaan gradient brush
tool. Di atas sempat disinggung mengenai penggunaan panel properties, kita akan
mempelajarinya lebih jauh pada bab Properties Panel.
Shape Tool: Elipse, Rectangle, dan Line
Pada penjelasan sebelumnya kita sudah sempat menyinggung
penggunaan objek seperti rectangle. Pada bab ini kita akan lebih
jauh belajar mengenai penggunaan shape tool. Shape tool sendiri
terbagi menjadi tiga yaitu, rectangle, elipse, dan line. Secara
default Expression Blend akan memilih rectangle, namun kita
dapat memilih yang lain dengan klik kanan pada shape tool.
Karena kita sudah mempelajari cara membuat rectangle pada bab sebelumnya, maka kita akan
mencoba untuk mempelajari ke dua shape lainnya. Pertama kita akan membuat ellipse.
1. Klik kanan pada shape tool kemudian pilih ellipse.
2. Lalu gambarkan ellipse pada workspace. Maka akan muncul sepeti di bawah ini.
Jika kita perhatikan contoh di atas, kita melihat fill color atau warna dari ellipse tersebut mirip
dengan fill color yang kita buat pada bab gradient brush tool. Karena pada Expression Blend
warna yang terakhir kita buat akan tersimpan, jadi ketika kita membuat sebuah shape baru fill
color nya akan sama dengan yang sebelumnya. Fitur ini sangat membantu jika kita akan
membuat banyak shape yang serupa.
Hint: ketika kita menggambar ellipse, kadang kala kita ingin membuat ellipse itu simetris
(lingkaran). Kita cukup menekan tombol Shift pada keyboard sambil menggambarkannya pada
workspace. Maka akan terbentuk ellipse atau rectangle yang simetris. Jika kita ingin membuat
sebuah shape yang ketika digambar, awalnya shape tersebut berawal dari tengah tidak dari
sudut, kita cukup menekan tombol Alt, dengan sendirinya shape akan dimulai dari tengah.
Berikutnya kita akan mencoba untuk membuat shape yang berbentuk line.
1. Klik kanan pada shape tool kemudian pilih line.
2. Drag pada workspace hingga mendapatkan line shape yang diinginkan.
Hint: untuk mendapatkan line yang vertical atau horizontal seperti gambar di atas, kita dapat
menekan tombol Shift pada keyboard, kemudian kita drag pada workspace.
Layout Control
Berikutnya kita akan melihat sedikit tentang layout control yang
ada pada Expression Blend (wpf application). Default dari layout
control adalah Grid, karena grid merupakan layout control yang
paling sering dipakai pada pembuatan aplikasi WPF. Disini
terdapat banyak jenis layout control yang fungsinyapun berbeda-
beda. Kita akan belajar lebih dalam mengenai fungsi – fungsinya
pada bab Layout Control in Expression Blend, karena disana kita
akan belajar dengan contoh.
Di atas sempat disinggung kalau Grid merupakan layout control yang paling sering dipakai,
contohnya adalah kalau kita perhatikan lebih detail, ketika kita membuat aplikasi WPF secara
default layout control sudah ada, namanya adalah Layout Root. Dan itu sebenarnya adalah
sebuah Grid yang diberi nama dengan Layout Root.
Secara umum layout control adalah sebuah control yang betugas untuk menghandle layout dari
aplikasi WPF yang kita buat, yaitu sebuah container yang mewadahi atau merumahi UIElements
kita. Dapat kita ibaratkan seperti table pada HTML, karena jika tanpa table kita tidak akan dapat
melihat content yang tabular secara terstruktur. Kita akan belajar lebih dalam mengenai layout
control pada bab Layout Control in Expression Blend.
Text Control dan Text Input Control
Secara default text control dan text intput control pada
Expression Blend toolbar adalah TextBox. Namun jika kita klik
kanan maka terdapat TextBox, RichTextBox, TextBlock,
PasswordBox, Label, dan FlowDocumentScrollViewer. Masing –
masing control memiliki fungsi yang berbeda – beda. Pada
penjelasan selanjutnya kita akan mencoba untuk mempelajari
cara pemakain dari control – control yang ada.
TextBox
TextBox merupakan sebuah area yang menerima input text
dimana user nantinya dapat menulis pada area tersebut atau
merubah text yang ada sebelumnya. Untuk mempraktekannya,
kita klik TextBox yang ada pada toolbar kemudian kita drag pada
workspace.
Kita dapat merubah default text yang ada. Sepeti contoh diatas, saya merubah default text yang
tadinya bertuliskan TextBox menjadi Test TextBox. Jika ingin melihat hasilnya yaitu user
nantinya dapat mengubah default text yang ada, kita harus pilih Test Solution atau cukup
dengan menekan tombol F5. Maka akan tampil sebuah window dengan sebuah TextBox.
Kemudian kita dapat merubah default text yang tadinya berisi Test Text Box menjadi apapun
yang kita inginkan. Mari kita ubah default text-nya menjadi Hello World!
RichTextBox
Input text berikutnya yang akan kita pelajari adalah RichTextBox.
Fungsi dari RichTextBox mirip dengan fungsi dari TextBox, namun
RichTextBox support lebih banyak text formatting yang ada pada
propertiesnya dan bisa mengandung tipe objek lainnya, sepeti
gambar atau shape. Karena pada contoh TextBox kita sudah bisa
memasukan input text, pada contoh kali ini kita akan mencoba
memasukan shape atau gambar kedalam RichTextBox.
1. Pilih RichTextBox yang ada pada toolbar, kemudian gambarkan pada workspace.
2. Kemudian kita ganti default text-nya dengan Hello World!
3. Setelah itu kita akan mencoba memasukan sebuah shape kedalam RichTextBox. Klik dua
kali pada RichTextBox yang kita buat pada Object and Timeline panel hingga berwarna
kuning. Warna kuning ini menandakan bahwa objek tersebut sedang dipilih, sehingga
ketika kita membuat shape akan berada di dalam RichTextBox tersebut.
4. Lalu kita pilih shape yang kita ingin masukan ke dalam RichTextBox, kita ambil contoh
ellipse. Ketika kita membuat ellipse pada workspace secara default akan berada
disamping tulisan Hello World!. Kita dapat menekan tombol enter untuk
menurunkannya.
5. Untuk melihat aplikasi yang sudah kita buat, tekan F5 untuk Test Solution. Maka akan
terlihat sebuah window yang berisikan seperti di bawah ini.
Karena pada dasarnya ini adalah input text, maka user juga dapat merubah atau menghapus
shape yang ada. Hanya dengan menekan backspace maka shape tersebut akan hilang sama
halnya seperti text biasa.
TextBlock
TextBlock merupakan sebuah blok yang berisikian text yang
sifatnya statis, dimana nantinya user yang menggunakan aplikasi
kita tidak akan bisa merubah text yang berada pada TextBlock.
Ini merupakan kebalikan fungsi dari TextBox. Di bawah ini
merupakan cara penggunaan TextBlock.
1. Pilih TextBlock pada toolbar
2. Kemudian gambarkan pada workspace, maka akan muncul secara default tulisan text
TextBlock. Kita ganti dengan tulisan “Ini adalah TextBlock”.
3. Lalu kita masukan sebuah shape (sama seperti contoh pada TextBox)
4. Kemudian coba tekan F5 untuk menjalankan Aplikasi, disana terlihat bahwa text dan
shape yang ada tidak dapat kita ganti – ganti atau kita edit.
Hint: penggunaan TextBlock biasanya jika kita butuh untuk menginstruksikan user yang
menggunakan aplikasi atau untuk menyampaikan informasi yang tidak membutuhkan editing.
Namun kita dapat mengubah isi dari TextBlock tersebut dengan code behind.
PasswordBox
Mungkin PasswodBox sudah umum mengenai fungsinya, namun
disini kita coba lihat kembali mengenai cara penggunaannya. Kita
gunakan PasswordBox ketika kita ingin text yang dimasukan oleh
user akan tergantikan atau terhalang dengan character titik (∙). Di
bawah ini merupakan cara penggunaannya.
1. Pilih PasswordBox pada toolbar.
2. Kemudian gambarkan pada workspace, lalu coba jalankan dengan menekan F5.
3. Maka dapat kita lihat jika kita ketik sesuatu pada passwordBox tersebut maka akan
digantikan dengan character titik.
Label
Label menyediakan sebuah block yang terdiri dari content yang
bersifat statis dimana kita dapat menggunakan untuk memberi
label pada control yang lainnya atau user interface element
lainnya. Label hanya dapat menampung satu jenis content yaitu,
text atau shape, tidak bisa ke duanya ada dalam satu label.
Namun penggunaan label sangat jarang pada sebuah aplikasi.
FlowDocumentScrollViewer
FlowDocumentScrollViewer merupakan sebuah block yang dapat
mengandung content berupa text yang bersifat statis dengan
scrollbar di dalamnya, sehingga user dapat membaca text yang
ada dengan navigasi scrollbar. FlowDocumentScrollViewer juga
dapat mengandung text dan shape atau gambar. Dengan contoh
di bawah ini kita akan mencoba belajar bagaimana cara
menggunakannya.
1. Pilih FlowDocumentScrollViewer pada Expression Blend toolbar.
2. Lalu gambarkan pada workspace. Maka akan tampil sebuah TextBlock dengan scrollbar
di sampingnya. Coba kita ganti default text yang ada dengan sebuah kalimat yang cukup
panjang.
3. Kemudian ada sebuah fitur yang menarik pada FlowDocumentScrollViewr ini. Kita klik
dua kali pada FlowDocumentScrollViewer hingga berwarna kuning. Dan jika kita
perhatikan pada panel properties yang dimiliki oleh FlowDocumentScrollViewer, dan
dipaling bawah maka ada yang namanya Miscellaneous.
Coba kita klik agar ter-expand. Dapat kita lihat bahwa di miscellaneous terdapat banyak
sekali property yang dapat kita ubah – ubah. Namun kali ini kita hanya akan mencoba 2
property yang ada, karena fitur ini cukup menarik dan berguna.
4. Yang pertama adalah IsToolbarVisible, jika kita lihat setelah miscellaneous di expand
maka terdapat sebuah property yang bernama IsToolbarVisible. Dan secara default,
property tersebut tidak di centang atau tidak diaktifkan. Coba sekarang kita akifkan atau
centang property tersebut.
Maka jika kita lihat pada workspace, terdapat sebuah slide bar dengan disebelah kirinya
terdapat tanda minus dan disebelah kananya terdapat tanda plus.
5. Jika kita Test solution atau tekan F5, maka akan tampil seperti di bawah ini. Dan
terdapat sebuah slide bar yang berfungsi untuk memperbesar dan memperkecil (zoom
in dan zoom out) tulisan text yang ada pada text block tersebut.
Dan kalau kita perhatikan lagi, kita bisa men-select tulisan yang ada dan meng-copy text
tersebut.
6. Satu property lainnya yang akan kita pelajari adalah IsSelectionEnabled. Fungsi property
ini adalah jika kita ingin FlowDocumentScrollViewer yang kita buat dapat di-select atau
tidak. Secara default IsSelectionEnabled akan tercentang atau teraktifasi ketika kita
membuat FlowDocumentScrollViewer. Sekarang kita coba untuk menghilangkan centang
tersebut.
7. Lalu coba kita jalankan dengan menekan tombol F5 pada keyboard. Maka ketika kita
ingin men-select atau klik kanan pada text tidak akan bisa.
Input Control
Tool berikutnya yang akan kita pelajari pada Expression Blend
tool bar adalah Input Control. Secara default Input control akan
memilih pada Button. Namun jika kita klik kanan maka akan
tampil input control yang lainnya seperti, Check box, Combo box,
list box, radio button, scroll bar, slide, Tab control, dan Grid
splitter.
Control ini cukup esensial karena ini adalah yang
menghubungkan aplikasi kita dengan user. Input control yang
akan sering digunakan adalah Button, karena hampir setiap
aplikasi membutuhkan Button. Namun kita akan mempelajari
sebagian besar dari input control ini pada pembahasan
berikutnya.
Asset Library
Tool yang terakhir pada Expression Blend toolbar adalah Asset
Library. Asset library merupakan tool yang paling lengkap dan
memiliki fitur menyimpan control yang terakhir kita gunakan.
Contohnya adalah kita akan menggunakan tool check box yang
ada pada asset library untuk membuat sebuah check box. Maka
tool check box akan tersimpan di memory asset library, sehingga
kita dapat menggunakannya berulang – ulang tanpa harus
memilih lagi di asset library. Berikut ini adalah cara penggunaan
asset library.
1. Klik asset library yang ada pada Expression Blend toolbar, maka akan menghasilkan
tampilan seperti di bawah ini.
2. Pada asset library terdapat search box untuk mencari control yang kita inginkan.
Contohnya adalah jika kita ketik huruf “B” pada search box, maka semua control yang
mengandung huruf “B” akan tampil pada asset library. Dan jika kita coba masukan kata
“Button” pada search box, maka akan tampil semua jenis button yang ada.
Asset library sangatlah membantu kita jika kita tidak hafal atau lupa jenis – jenis control yang
ada, tinggal kita cari pada search box yang ada. Control yang ada pada asset library sangatlah
banyak, dan tidak mungkin kita bahas satu persatu fungsi dari control tersebbut. Untuk sebagai
contoh, kita akan ambil tiga buat control yang cukup menarik untuk dipelajari yaitu, InkCanvas
control, TabControl, dan WebBrowser.
InkCanvas Control
Control ini cukup menarik untuk kita pelajari, karena dengan control ini kita dapat membuat
aplikasi yang fungsinya mirip dengan whiteboard. User dapat corat coret bagaikan sedang
menggunakan sebuah pena, dan hasilnya pun seperti tinta. Untuk lebih jelasnya kita akan
pelajari dari contoh di bawah ini.
1. Pilih asset library yang ada pada Expression Blend toolbar.
2. Kemudian tuliskan InkCanvas pada search box yang ada pada asset library. Lalu pilih
atau klik InkCanvas.
3. Setelah kita pilih, maka secara otomatis akan muncul sebuah icon baru pada toolbar
yang berada di atas asset library. Dan control itu merupakan InkCanvas. Itu adalah
control yang tersimpan pada memory asset library (seperti yang dijelaskan pada bab
asset library).
4. Lalu kita gambarkan pada workspace sesuai dengan selera.
5. Karena default dari InkCanvas adalah berwarna putih, maka untuk membedakannya
dengan warna background yang juga berwarna putih maka kita ganti warna dari
InkCanvas tesebut. Caranya adalah, pada panel properties InkCanvas dan pada tab
Brushes, kita ganti warna Background-nya menjadi warna yang berbeda (misalkan abu –
abu).
6. Setelah itu mari kita coba jalankan dengan menekan tombol F5. Dapat dilihat bahwa kita
dapat melakukan hal seperti menggambar ataupun menulis seperti penggunakan tinta.
Tab Control
Tab control merupakan salah satu control yang cukup menarik juga untuk kita pelajari. Dengan
menggunakan tab control kita dapat sangat cepat menambahkan content di dalam masing tab –
tab yang ada. Berikutnya kita akan coba mempelajari bagaimana cara menggunakannya.
1. Pilih tab control yang ada pada Expression Blend toolbar, tab control berada pada input
control (input control pada blend secara default akan memilih Button).
2. Atau dapat mencarinya pada asset library, kemudian ketik tab control pada search box,
lalu pilih tab control.
3. Kemudian gambarkan pada workspace hingga terlihat pada workspace seperti di bawah
ini.
4. Dapat dilihat bahwa terdapat dua buah tab item yang terbentuk secara default ketika
kita menggambarkannya pada workspace. Dan bila kita lihat pada panel Objects and
Timeline (penjelasan lebih lanjut dapat dilihat pada bab Object and timeline Panel), kita
lihat pada TabControl kemudian kita expand maka akan terlihat ada 2 objek tab item.
Dimana masing – masing tab item terdiri dari Header dan sebuah Grid.
5. Jika kita ingin memasukan content ke dalamnya maka kita klik dua kali pada tab item
yang diinginkan hingga berwarna kekuningan, kemudian kita coba masukan sebuah
TextBlock pada salah satu tab. Karena sebuah tab item terdiri dari Grid, maka kita
tinggal memasukan TextBlock ke dalamnya.
6. Coba jalankan dengan menekan tombol F5 pada keyboard. Maka akan aplikasi kita akan
memunculkan dua buah tab, 1 tab berisi text block dan yang satu lagi masih kosong.
WebBrowser Control
Berikutnya kita akan coba untuk mempelajari sebuah control yang cukup menarik dan cukup
berguna jika kita ingin membuat aplikasi desktop yang ingin berhubungan dengan internet.
Langsung saja kita mencoba menggunakan sebuah control yang cukup powerfull yaitu,
WebBrowser.
1. Pilih asset library yang ada pada Expression Blend toolbar, kemudian masukan kata
“web” pada search box nya maka akan muncul sebuah control yang bernama
WebBrowser.
2. Kemudian gambarkan pada workspace sesuai dengan selera.
3. Pada panel properties web browser, expand tab Miscellaneous.
4. Setelah kita expand maka akan terlihat sebuah property yang bernama Source. Kita isi
dengan http://www.live.com.
5. Maka ketika kita jalankan dengan menekan tombol F5 pada keyboard, akan muncul
sebuah aplikasi desktop yang didalamnya terdapat sebuah browser dengan alamat
http://www.live.com. Di bawah ini adalah hasil jika aplikasi dijalankan.
Dari beberapa contoh control yang ada di atas seperti, InkCanvas, Tab, dan WebBrowser kita
dapat gambaran umum mengenai bagaimana penggunaan control pada Microsoft Expression
Blend untuk membuata sebuah aplikasi Windows Presentation Foundation.
Setelah kita mengenal toolbar yang ada pada Microsoft Expression Blend 2 Service Pack 1,
untuk berikutnya kita akan belajar mengenai panel – panel yang ada pada Microsoft Expression
Blend 2 Service Pack 1.
Object and Timeline Panel
Dari pembahasan di atas kita sudah cukup memahami fungsi-fungsi yang ada pada Expression
Blend toolbar, sekarang kita akan mencoba belajar mengenai fungsi dan penggunaan Object
and Timeline Panel.
Jika kita membuat sebuah objek pada workspace misalkan, sebuah TabControl (sudah
disinggung sedikit pada penjelasan mengenai tab control) maka akan muncul pada panel Object
and timeline sebagai objek, karena sekarang TabControl merupakan bagian dari visual tree yang
ada. Visual tree adalah list dari objek – objek yang ada pada workspace kita. Seperti yang kita
lihat pada gambar di atas, visual tree di atas terdapat Window. Di dalam Window dapat kita lihat
terdapat LayoutRoot Grid (ini sudah ada secara otomatis atau default ketika kita baru membuat
sebuah project WPF).
Jika setelah itu kita tambahkan sebuah TabControl maka, di
dalam LayoutRoot tedapat sebuah TabControl, dan jika kita
expand terlihat bahwa TabCotnrol terdiri dari dua buah
TabItems, dan masing – masing TabItems terdiri dari Header dan
Grid. Di dalam Grid kita dapat memasukan Image atau shape. Jika
kita ingin memilih sebuah objek misalkan, Grid. Kita tinggal pilih
atau klik dua kali pada panel Object and timeline, tidak perlu
memilih pada workspace. Karena biasanya cenderung lebih sulit
memilih sebuah objek yang ada pada workspace, terutama jika
pada workspace kita sudah banyak objek. Misalnya, kita ingin
memilih Button yang ada pada workspace, tetapi Button tersebut
terhalangi oleh sebuah StackPanel. Maka membutuhkan sebuah
langkah yang tricky untuk memilih Button tersebut tanpa
memindahkan terlebih dahulu StackPanel yang menghalanginya.
Maka dari itu, dalam kasus ini jauh lebih mudah memilih objek
melalui panel Object and timeline.
Hal penting lainnya yang perlu kita ketahui adalah ada dua buah icon yang bergambar mata dan
kunci (gembok) yang ada di samping disetiap objek pada visual tree panel Object and timeline.
Yang pertama adalah icon mata, fungsinya adalah jika kita klik icon mata tersebut (misalkan kita
klik icon mata pada TabControl) maka yang terjadi adalah TabControl yang berada pada
workspace akan invisible, dan icon mata akan secara otomatis berubah menjadi icon bulatan
hitam yang kosong.
Jika kita perhatikan pada workspace ketika icon mata pada TabControl kita klik, maka
workspace akan terlihat kosong (bukan berarti terhapus, namun hanya tidak terlihat saja). Jika
kita klik icon mata tersebut kembali maka TabControl akan kembali terlihat lagi. Dan kalau kita
perhatikan, ketika TabControl kita Hide (klik pada icon matanya) maka semua anak dari
TabControl (Header dan Grid) akan invisible juga. Harus diingat bahwa invisible bukan berarti
terhapus, namun hanya tidak terlihat saja, hal tersebut dapat dibuktikan ketika kita jalankan
aplikasi, walaupun kita Hide TabControl ketika di jalankan maka TabControl akan tetap terlihat.
Hal ini berguna jika kita sudah memiliki banyak objek dan kita ingin meng edit objek – objek
tertentu saja.
Berikutnya adalah icon kunci atau gembok. Fungsinya adalah untuk mengunci (lock) sebuah
objek agar tidak dapat kita pilih atau select. Misalkan kita Lock TabControl maka, ketika kita
coba untuk klik TabControl pada workspace maka TabControl tidak akan terpilih dan tidak bias
kita ubah - ubah. Fungsi Lock ini sanget berguna jika kita memiliki objek yang saling timpang
tindih atau memiliki banyak child, jadi ketika kita ingin merubah sebuah objek, objek lainnya
kita lock terlebih dahulu agar tidak terselect atau terubah.
Penjelasan mengenai penggunaan Storyboard dan Animations akan dibahas pada bab yang
berbeda.
Project panel
Pada project panel kita dapat melihat semua asset yang ada untuk aplikasi yang kita ingin buat.
Dari gambar di atas mari kita pelajari maksudnya, di bawah ini merupakan penjelasan mengenai
apa saja yang ada pada project panel.
1. Yang paling atas pada project panel adalah nama dari solution project yang kita buat.
Dalam hal ini nama projectnya adalah “BukuExpression”.
2. Berikutnya kita melihat sebuah directory yang bernama References. Folder ini
menyimpan semua file .dll yang membuat aplikasi yang kita buat dapat berjalan. Kita
juga dapat menambahkan dll lain ke dalam project kita.
3. Kemudian di bawahnya terdapat sebuah folder yang jika kita expand, maka akan terlihat
sebuah file yang bernama AssemblyInfo.cs. file ini secara otomatis di maintain oleh
visual studio dan Expression Blend, sehingga untuk kedepannya kita tidak perlu
merubah file ini.
4. Kemudian di bawahnya lagi terdapat App.xaml. File ini secara otomatis dibuat oleh
Expression Blend dan file ini menyimpan informasi tentang resources, dictionary, dan
semacamnya. Jika kita expand app.xaml, terdapat app.xaml.cs. File ini merupakan code
behind dari app.xaml dan tidak perlu kita ubah – ubah.
5. Dan yang terakhir adalah window1.xaml. File ini merupakan file yang paling sering kita
ubah – ubah. Contohnya adalah semua yang kita lakukan dan semua objek yang kita
gambarkan pada workspace akan secara otomatis dibuatkan code nya dan di letakan di
window1.xaml.
6. Kalau kita expand window1.xaml, maka terdapat Window1.xaml.cs. File ini merupakan
code behind dari Window1.xaml. Jika kita ingin membuat sebuah aplikasi yang
menggunakan control, biasanya akan sering menggunakan file ini. Untuk contoh
penggunaanya nanti dapat kita lihat pada sample. Dan code behind ini ditulis dalam
bahasa C#.
Project panel merupakan hal yang cukup penting dalam menggunakan Expression Blend. Jika
kita ingin memilih file yang ada pada project kita, tinggal kita klik dua kali. Jika file yang diklik
tersebut adalah .xaml maka Expression Blend akan memunculkannya, tetapi jika file tersebut
adalah C#, maka visual studio 2008 akan membukanya. Kita juga dapat membuat sebuah folder
baru dan menambahkan file lain ke dalam project kita, di bawah ini merupakan langkah –
langkah untuk membuat folder dan memasukan file lain ke dalam project.
Membuat folder dan memasukan file (image, video, dll) ke Project
1. Klik kanan pada Solution, kemudian pilih Add New Folder.
2. Misalkan kita beri nama folder tersebut “Images”. Lalu kita klik kanan pada folder
tersebut, pilih Add Existing Item.
3. Kemudian pilih file yang ingin di masukan kedalam project. Ada cara lain untuk
memasukan sebuah file ke dalam project yaitu, cukup dengan drag and drop ke folder
yang diinginkan.
Properties panel
Dengan properties panel kita dapat men-set property dari control yang kita buat pada
workspace. Jika pada awalnya kita berada dalam panel Project, kita tinggal pilih tab sebelahnya
yaitu, properties.
Brushes
Brushes merupakan bagian dari panel properties yang bertujuan untuk segala sesuatu hal yang
berhubungan dengan warna. Untuk lebih jelasnya dapat kita lihat di bawah ini.
1. Misalkan kita buat sebuah project baru. Pertama – tama kita buat sebuah Rectangle
dengan menggunakan shape tool yang ada pada toolbar.
2. Kemudian klik dua kali rectangle tersebut hingga berwarna kuning sekitarnya. Kemudian
pada panel properties cari bagian Brushes. Maka akan tampil seperti di bawah ini.
3. Sekarang kita mulai dari Fill property. Sekarang kalau kita lihat pada Fill maka, secara
default akan menggunakan Solid Colour.
4. Kita dapat merubah warna dari rectangle yang telah kita buat dengan berbagai cara.
Berikut ini adalah cara – cara yang dapat kita lakukan.
a. Kita dapat menggantinya dengan hanya klik pada pallete yang ada dan kemudian
rectangle akan berubah warnanya sesuai dengan warna pada pallete yang kita pilih.
b. Kita juga dapat mengubahnya lewat nilai RGB (Red, Green, Blue), yang terletak
disebelah pallete.
c. Selain itu kita juga dapat mengganti warna dengan menggati pada hexadecimalnya.
d. Alternatif lain adalah menggunakan eyedropper yang ada pada tab Brush. Dengan
eyedropper kita dapat mengambil warna apa saja yang sedang ada di bawahnya.
e. Dan cara terakhir adalah dengan menggunakan Color resources yang berada di
sebelah tab editor. Untuk lebih lanjutnya kita akan pelajari lebih dalam nanti pada
bab berikutnya.
Semua hal di atas adalah untuk mengubah warna Solid Brush. Kita juga bisa memilih Gradient
Brush untuk memanfaatkan gradient pada warna yang akan kita buat.
Ketika kita pilih Gradient Fill maka secara otomatis warnanya akan berubah menjadi hitam
gradasi putih. Warna ini dapat diubah sesuai dengan keinginan kita, caranya adalah:
1. Pilih Color Handle untuk warna Gradient yang kita inginkan, lalu ubah warnanya dengan
cara – cara yang sudah diajarkan di atas. Misalkan kita pilih Color handle yang ada di
sebelah kiri.
2. Jika kita ingin memilih warna lain selain hitam kita dapat memilihnya pada samping
pallete.
Untuk menambahkan Color Handle, misalkan kita ingin menambahkan warna gradasi, caranya
adalah dengan klik di dalam gradient bar dan handle color baru akan muncuk persis dibawah
cursor ketika klik. Untuk menghapusnya cukup dengan klik color handle yang ingin dihapus,
kemudian drag keluar dari gradient bar.
Jika kita ingin warna gradasi tersebut tidak dari atas ke bawah, gunakanlah Transofrm Brush
yang ada pada toolbar kita sudah mempelajarinya pada bab Expression Blend toolbar).
Sekarang mungkit saat yang tepat jika kita bicara mengenai Colour Resources. Misalkan kita
memiliki sebuah gradient atau sebuah warna yang sering digunakan di banyak tempat pada
aplikasi kita. Seperti yang kita tahu bahwa, designer biasanya sangat teliti memaintain design
yang telah dibuat dan segala kesalahan dari developer yang dapat menyebabkan kerusakan
pada designnya. Developer zaman dulu harus membuat ulang warna gradasi yang telah dibuat.
Namun sekarang kita dapat membuat warna gradasi satu kali kemudian kita buat warna gradasi
tersebut sebagai Color Resource, sehingga warna tersebut dapat kita gunakan pada setiap objek
yang ada. Tidak hanya warna saja yang dapat disimpan, property lainnya juga dapat disimpan
seperi, fill, source dari MediaElement, sudut dari sebuah objek, dan lain – lain. Dan jika resource
tersebut diubah maka semua objek yang menggunakannya akan ter-update juga.
Membuat Color Resource
Setelah mendapatkan gambaran umum dari color resource, sekarang kita akan coba
mempelajarinya.
1. Pertama – tama kita anggap warna gradasi yang tadi telah kita buat akan kita jadikan
sebagai resources. Pilih +Brush button untuk membuat sebuah color resource.
2. Kemudian akan muncul sebuah window yang menanyakan nama (key) untuk color
resource yang akan kita buat ini. Secara default nama yang ada adalah “Brush1”. kita
biarkan saja namanya tetap itu.
3. Pada area Define In, ada tiga buah pilihan Application (ini agar dapat digunakan pada
seluruh aplikasi), This document, dan Resource dictionary (akan kita bahas di bawah).
Setelah kita set ke dua buah area tersebut pilih Ok.
4. Maka jika kita lihat pada Brush Resources, terdapat color resource yang kita buat tadi.
5. Dan jika kita ingin menggunakan resource tersebut pada objek lain, kita cukup pilih
objek yang diinginkan untuk diubah warnanya kemudian kita pilih Brush1 yang ada pada
color resources.
Membuat MediaElement Sebagai Resources
Sekarang kita coba untuk memasukan sebuah MediaElement pada resources. Berikut ini adalah
langkah – langkah untuk membuat MediaElement sebagai resources.
1. Pada Asset Library, pilih MediaElement.
2. Kemudian gambarkan MediaElement pada workspace.
3. Lalu pada panel Properties, terdapat Media panel dan pada sourcenya pilih ke
directory video atau image yang kita inginkan pada hard drive kita. File –file yang
disupoort adalah .mp3, .asx, .asf, .wma, dan .wmv
4. Kemudian pilih advanced property option yang berada di sebelah icon titik – titik
untuk memilih lokasi gambar. Pilih Convert to new Resource..
5. Masukan nama untuk resource ini (bebas), lalu klik ok.
6. Untuk meng-applynya misalkan kita buat sebuah MediaElement lagi, kemudian pada
Sourcenya pilih Advanced property option. Lalu pilih local resource, kemudian pilih
resource yang tadi telah kita buat.
Membuat Resource Dictionary
Dari contoh di atas kita sudah dapat membuat sebuah resource dari sebuah video. Sekarang
kita akan belajar mengenai Resource Dictionary. Berikut ini adalah langkah – langkah untuk
membuat sebuah resource dictionary.
1. Kita buat sebuah rectangle atau elipse baru pada workspace.
2. Kemudian pilih Gradient Brush dan pilih warna gradasi sesuai dengan keinginan.
3. Pilih +Brush untuk membuat resource dictionary. Masukan nama yang dinginkan dan
jangan lupa untuk memilih New pada pilihan ke tiga, resource dictionary.
4. Setelah kita pilih New maka akan muncul window baru yang menanyakan nama untuk
Resource dictionary yang akan kita buat. Misalkan kita menggunakan nama default yang
ada. Kemudian kita pilih Ok.
5. Dengan membuat Resource dictionary maka Expression blend akan secara otomatis
membuatkan file .xaml nya. Jika kita lihat panel Resources yang ada di sebelah panel
Properties maka, kita dapat melihat resource dictionary yang kita buat. Dalam hal ini
saya menamakan warna gradasi yang dibuat adalah “Brush3”.
6. Jika kita ingin menggunakan brush tersebut, sama caranya dengan ketika kita
mengaplikasikan color resource yaitu, pilih Brush Resource dan pada Local Resource
pilih “Brush3”.
Jika kita lihat – lihat mungkin selintas terpikirkan bahwa apa perbedaan antara color resource
biasa dengan resource dictionary. Untuk itu mari kita bahas mengenai perbedaan antara color
resource biasa dan resource dictionary.
Perbedaan Color Resource biasa dan Resource Dictionary
Untuk melihat perbedaan antara ke duanya, kita akan memanfaatkan dua contoh di atas yaitu,
Bursh1 (gradient brush yang disimpan pada this document only) dan Brush3 (gradient brush
yang disimpan menggunakan resource dictionary). Di bawah ini merupakan perbedaan –
perbedaan antara color resource biasa dengan resource dictionary.
1. Jika kita lihat ketika kita ingin membuat sebuah resource (+Brush). Maka ada pilihan this
document atau pilihan ke tiga yaitu resource dictionary.
2. Kalau kita memilih this document maka (contohnya Brush1), resource tersebut hanya
ada pada window1.xaml saja. Untuk membuktikannya, kita coba tambahkan file .xaml
baru untuk mencoba menggunakan Brush1. Pertama – tama pada panel Project, klik
kanan pada solution BukuExpression, pilih add new item.
3. Kemudian pilih Window dan beri nama dengan Window2.xaml. Lalu pilih Ok.
4. Maka jika kita lihat pada panel Project terdapat Window2.xaml. Pilih Window2.xaml,
karena Window2.xaml masih kosong kita coba buat sebuah ellipse pada workspace.
Kemudian pada panel Properties, lihat pada tab Brush Resources.
Dari gambar di atas terlihat bahwa Brush resources yang terdapat pada Window2.xaml adalah
hanya Brush3, tidak ada Brush1. Jadi kesimpulannya adalah jika menggunakan resource
dictionary kita dapat menggunakannya pada seluruh aplikasi dan bahkan kita dapat meng-copy
resource tersebut untuk aplikasi yang berbeda, karena dengan resource dictionary dihasilkan
sebuah file .xaml yang dapat kita copy kemana saja untuk kita gunakan dalam aplikasi yang
berbeda.
Appearence
Appearance berada di bawah tab Brushes, fungsinya adalah untuk mengatur tampilan dari
objek – objek yang ada. Coba kita expand tanda panah yang berada pada tab Appearance.
Dari gambar di atas terlihat bahwa banyak sekali property yang dapat kita set untuk objek –
objek yang ada pada aplikasi kita. Kita dapat menset Opacity, visibility, BitMapEffect, dan lain –
lain.
Sekarang kita coba praktekan menggunakan BitmapEffect.
1. Coba kita buat sebuah ellipse pada workspace.
2. Kemudian klik drop-down yang ada pada BitmapEffect, bukan Button New. Dan pilih
Drop Shadow.
Dan kita lihat apa yang terjadi pada ellipse kita buat tadi. Terdapat bayangan yang
berada di belakang lingkaran tersebut.
3. Kemudian coba kita ganti BitmapEffect menjadi Blur, lalu kecilkan Opacity dari lingkaran
tersebut menjadi 50%.
4. Untuk menghilangkan Strokes yang ada, kita pilih Stroke yang ada pada tab Brushes.
5. Lalu kita pilih No Brush untuk menghilangkan garis lingkaran luar yang ada pada ellipse.
6. Jika kita lihat pada workspace maka lingkaran hitam yang berada di luar lingakran
menjadi hilang.
Masih banyak fungsi – fungsi dari BitmapEffect yang lainnya atau property yang ada pada
Appearence. Namun intinya adalah fungsi dari tab Appearance untuk mengontrol tampilan dari
objek – objek yang kita punya pada aplikasi.
Layout
Setelah kita belajar mengenai Appearance, sekarang kita pindah kebagian selanjutnya yang
pada pada panel Properties juga yaitu, Layout. Fungsi dari Layout ini adalah untuk mengatur
letak – letak dari objek yang ada pada workspace. Kita akan coba mempelajari dari fungsi –
fungsi property yang ada pada Layout.
Kita lihat dari paling atas terdapat Width dan Height. Fungsinya adalah untuk men-set
panjang dan lebar dari sebuah objek, atau dapat juga kita set Auto agar Blend sendiri
yang mengaturnya.
Yang ke dua adalah kita dapat men-set ukuran baris dan kolom pada sebuah Grid.
Sedangkan fungsi dari HorizontalAlignment dan VerticalAlignment adalah untuk men-set
letak horizontal dan vertical sebuah objek. Biasanya kita pilih yang Strech untuk ke
duanya.
Margin berfungsi agar kita dapat men-set seberapa jauh letak objek dari kiri, atas,
kanan, dan bawah.
Dan yang terakhir adalah Zindex. Untuk mudahnya, objek yang memiliki Zindex nilai 1
akan berada lebih atas dibandingkan dengan objek yang Zindexnya bernilai 0.
Jika kita expand tab Layout maka terdapat property – property yang lebih advanced lagi,
namun untuk kali ini kita tidak akan mempelajarinya lebih dalam. Mungkin bisa coba –
coba sendiri jika anda ingin mengetahuinya.
Common Properties
Berikutnya adalah Common Properties yang juga ada pada panel properties. Dengan gambar di
bawah ini kita akan coba pelajari property – property yang ada di dalamnya.
Hal yang pertama kita bahas adalah Cursor. Jika kita lihat pada drop-down list yang ada
apda Cursor maka banyak sekali jenisnya. Masing – masing jenis cursor akan terlihat jika
kita meng-hover atau melintasi objek yang kita set property Cursor-nya. Misalkan objek
ellipse tadi kita coba ganti Cursor-nya menjadi Wait. Kemudian coba jalankan dengan
menekan tombol F5 pada keyboard. Maka ketika kita hover, cursor akan berubah
menjadi seperti loading pada windows vista.
Kemudian jika kita activate property IshitTestVisible maka objek tersebut akan dapat
mendeteksi hit yang terjadi di objek tersebut.
Property yang cukup menarik lainnya adalah ToolTip. Fungsinya adalah untuk info untuk
objek tersebut jika kita mouse hover. Misalkan kita isi ToolTip dengan kata – kata “Ini
adalah lingkaran”. Maka ketika kita jalankan dan kita hover pada objek tersebut, akan
muncul kata – kata tersebut.
Dari penjelasan di atas, itulah kira – kira gambaran umum dan cara menggunakan mengenai
Common Properties. Untuk lebih jelasnya mungkin anda dapat mencoba sendiri dengan
mencoba – coba property yang belum dijelaskan di sini.
Text
Text juga merupakan salah satu tab yang berada pada panel Properties. Fungsinya adalah untuk
mengatur tulisan atau text yang ada pada objek. Dengan ini kita dapat mengatur font, ukuran
font, paragraph, dan lain – lain. Misalkan kita buat sebuah TextBlock, maka akan muncul tab
Text.
Transform
Dengan transform kita dapat merubah objek – objek yang ada seprti, scale, rotate, skew, flip,
dan translate. Kita akan mencoba fungsi tersebut satu persatu.
1. Yang pertama adalah translate. Dengan ini kita dapat merubah posisi objek dari
koordinat x dan y nya.
2. Kemudian yang ke dua adalah rotate. Kita dapat memutar objek yang ada dengan
merubah derajat perputarannya disini.
3. Fungsi yang ke tiga adalah scale. Gunanya adalah untuk merubah ukuran objek
berdasarkan X dan Y nya. Jika kita ingin objek tersebut tetap seimbang antara
panjang dan lebarnya, hanya ukurannya saja yang diperbesar maka kita harus
menyeimbangkan nilai perbesaran X dan Y. Misalkan X diperbesar 2, maka Y juga
harus diperbesar menjadi 2.
4. Fungsi yang ke empat adalah skew. Kita dapat gunakan skew untuk memiringkan
objek. Jika kita coba X kita perbesar menjadi 21 dan Y juga bernilai 21. Maka kira –
kira akan menghasilkan seperti di bawah ini.
5. Dan yang terakhir kita akan mempelajari mengenai fungsi dari Flip. Dengan flip kita
dapat memindahkan objek ke tempat hasil pencerminannya (bisa dicerminkan
terhadap sumbu X atau sumbu Y). Di bawah ini adalah hasil dari flip X dan Y objek di
atas.
Miscellaneous
Pada miscellaneous mengandung property – property yang tidak dicakup oleh tab – tab di atas.
Namun kita tidak akan mempelajarinya lebih dalam karena masih banyak yang harus dipelajari.
Mungkin setelah membaca buku ini dapat mencoba – coba menggunakan property yang ada
pada miscellaneous.
Search
Dan yang terakhir pada panel Properties adalah Search. Fungsinya adalah untuk mencari
property – property yang ada pada panel Properties. Sangat berguna bagi kita jika lupa letak
dari sebuah property, misalkan kita ingin mencari property Cursor namun tidak ingat letak
property tersebut. Kita cukup mengetikan kata crusor pada search box maka akan muncul di
bawahnya.
Kita akan mencoba mempraktekan property – property yang ada pada sample. Jadi bila masih
terdapat kebingungan nanti kita akan coba belajar lewat contoh.
Resources panel
Pada panel ini terdapat semua resources yang ada pada aplikasi yang akan kita buat. Masih
ingat dengan ReourceDictionari1.xaml? itu tersimpan pada panel ini.
Jika kita ingin menggunakan resources yang ada maka ada alternative lain untuk
menggunakannya. Berikut ini adalah langkah – langkah untuk menggunakan resources yang
ada.
1. Coba kita gambar sebuah rectalngle pada workspace.
2. Kemudian kita drag Brush3 yang ada pada panel resources dan letakan pada rectangle
yang tadi kita buat.
3. Setelah kita drag ke dalam rectangle, pilih Fill.
Maka dengan cara di atas sangatlah mudah mengaplikasikan resource yang ada ke dalam objek
– objek. Terutama jika kita memiliki banyak resources dan banyak objek pada aplikasi yang akan
kita buat.
Blend Development View
Pada Microsoft Expression Blend 2 Service Pack 1 terdapat tiga jenis view. Kita sebagai
developer yang akan menggunakannya harus tau cara menggunakan ke tiga jenis view tersebut.
Mari kita bahas satu persatu mengenai jenis – jenis view yang ada.
Design View
Kekuatan Expression Blend yang sesungguhnya adalah dengan menggunakan design view.
Microsoft Visual Studio 2008 juga memiliki design view, namun design view yang terdapat pada
Visual Studio tidak secanggih atau se-powerfull design view yang ada pada expression Blend. Di
bawah ini kira – kira gambaran jika kita menggunakan design view.
Secara default, expression Blend akan secara otomatis menggunakan design view ketika kita
pertama kali membuat aplikasi. Dengan menggunakan design view secara basic kita dapat
melakukan seperti latihan atau contoh – contoh yang sebelumnya ada dan juga kita dapat
dengan mudah membuat sebuah objek tanpa menuliskan satu baris code. Walaupun
sebenarnya ketika kita membuat objek pada workspace, Expression Blend secara otomatis
men-generate code XAML nya.
Keuntungan lainnya menggunakan design view adalah kita dapat memaksimalkan User
Interface yang kita punya dan dapat melihat efeknya dengan cepat. Bila kita membuatnya
dengan code XAML secara langsung maka akan sangat sulit, kita harus melakukan trial and
error.
XAML View
Design view biasanya lebih cenderung digunakan oleh para designer, sedangkan biasanya para
developer lebih senang menggunakan XAML view. Dengan menggunakan XAML view, kita dapat
melihat semua code yang secara otomatis degenerate oleh Expression Blend ketika kita
membuat sebuah objek dan memanilpulasinya.
Kita dapat membuat dan memanipulasi sebuah objek dengan hanya menuliskan codenya pada
XAML view, namun sekali lagi hal ini sangat merepotkan karena pada Expression Blend tidak
terdapat fitur IntelliSense. Fitur IntelliSense hanya terdapat pada Visual Studio, karena dengan
fitur ini kita dapat memprediksi code apa yang akan kita tulis berikutnya.
Alasan lainnya lebih baik kita menggunakan Design view adalah pada Expression Blend kita
tidak dapat mengelompokan code sehingga jika kita memiliki code Viewport3D sangatlah
banyak code yang harus kita lihat. Jadi jika ditanya lebih baik menggunakan view yang mana,
jawabannya adalah jika kita ingin melihat design view gunakanlah Expression Blend, namun jika
kita ingin membuat dengan membuat codenya maka lebih baik kita menggunakan visual studio.
Split View
Split view dapat dijadikan alternative jika kita menginginkan ke dua jenis view di atas tetap
tampil. Dengan split view kita dapat menggunakan design view dan XAML view secara
bersamaan. Jika kita membuat sebuah rectangle pada workspsace maka akan terlihat juga code
nya karena menggunakan Split view.
Workspaces
Dari penjelasan di atas kita sudah tau mengenai design view, xaml view, dan split view.
Sekarang kita akan memahami apa itu workspaces. Workspaces sendiri terdiri dari dua jenis
yaitu, Design workspace dan animation workspace. Mari kita bahas mengenai ke dua jenis
workspace tersebut.
Design Workspace
Pada design workspace lebih focus kepada visual tree, properties, dan resources. Design
workspace dirancang agar kita lebih mudah untuk melakukan proses design. Secara default
ketika kita membua Expression Blend maka yang tampil adalah design workspace. Jika kita ingin
menggantinya menjadi animation workspace, kita tinggal menekan tombol F6 pada keyboard.
Animation Workspace
Untuk melihat animation workspace kita dapat menekan tombol F6. Dan jika kita lihat maka,
perbedaan dengan design workspace adalah hanya panel Interaction yang terdiri dari Trigers
dan Object and Timeline berada di bagian paling bawah. Sedangkan pada design view panel
Interaction berada di sebelah kiri.
Layout Elements
Pada bab ini kita akan mencoba memahami dan belajar menggunakan jenis – jenis layout
elements yang ada. Pada bab Expression Blend toolbar kita sempat menyinggung sedikit
mengenai layout elements namun, karena dirasakan perlu satu bab sendiri untuk belajar
menggunakan layout elements yang ada maka kita akan mencoba mempelajarinya lebih dalam
pada bab ini.
Pada aplikasi WPF, kita menggunakan layout elements untuk mengatur content seperti, gambar,
MediaElement, button, dan UI Framework lainnya. Seperti yang sudah dijelaskan sebelumnya
bahwa layout elements dapat diibaratkan seperti tables pada HTML, walaupun pada
kenyataanya control pada WPF jauh lebih kompleks dibandingkan table pada HTML. Berikutnya
kita akan mencoba mempeajari layout element yang paling sering digunakan dan bagaimana
kita membuat sebuah aplikasi dengan menggunakan layout element tersebut.
Grid Layout
Tanpa diragukan lagi, layout element yang paling sering digunakan pada pembuatan aplikasi
WPF adalah Grid. Ketika kita membuat sebuah project WPF baru maka, secara otomatis
Expression Blend akan menggunakan Grid sebagai layout element. Grid tersebut bernama
Layout root. Di bawah ini merupakan potongan code ketika kita memulai sebuah project WPF.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="BukuExpression.Window1"
x:Name="Window"
Title="Window1"
Width="640" Height="480" xmlns:System="clr-
namespace:System;assembly=System"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="LayoutRoot"/>
</Window>
Hal ini bukan berarti kita tidak bisa menambahkan layout element lagi ke dalamnya, justru
dengan adanya layout element berguna untuk memiliki layout elemet lain di dalamnya. Namun
itu semua adalah pilihan bagi kita, boleh kita masukan lagi layout element lain ke dalam layout
element yang ada atau tidak, itu semua tergantung dengan kebutuhan yang kita perlukan untuk
menampilkan content. Sama halnya dengan table pada HTML yang berisi rows dan column, kita
dapat mengisi content di dalam masing – masing row dan column tersebut. Sekarang kita buat
project baru untuk mempraktekan hal ini.
1. Buka kembali Microsoft Expression Blend 2 Service Pack 1, kemudian buat sebuah
aplikasi WPF, beri saja dengan nama LayoutControlProject dan pilih Ok.
2. Coba perhatikan pada workspace yang ada pada Expression Blend, jika kita lihat bagian
atas dan kiri window terdapat bar yang berwarna biru. Disitulah tempat kita membuat
row dan column pada sebuah Grid. BIla kita arahkan cursor ke bar yang berada di paling
atas, maka akan terlihat sebuah garis vertical. Coba klik dan buat beberapa buah.
Dengan melakukan hal itu kita sudah membuat column.
3. Kemudian coba kita klik bar yang ada di sebelah kiri maka, akan terbentuk sebuah garis
horizontal. Jika kita hanya mengarahkan cursor ke bar yang berwarna biru maka, akan
ada sebuah garis yang berwarna kuning. Itu adalah visualisasi row dan colomn yang akan
kita buat. Jika kita klik baru garis tersebut akan menjadi berwarna biru. Dengan memilih
pada bar yang ada di sebelah kiri maka kita sudah membuat row baru.
Jika kita pindah ke XAML view maka akan terlihat code yang di-generate secara otomatis oleh
Expression Blend.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="0.241*"/>
<RowDefinition Height="0.759*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.12*"/>
<ColumnDefinition Width="0.88*"/>
</Grid.ColumnDefinitions>
</Grid>
Jika kita lihat potongan code di atas maka, terlihat bahwa Grid memiliki nilai height dan width.
Jikia kita menuliskan nilai height dan width secara hard-code maka, kita tidak dapat meng
merubah besar kecilnya ukuran dari content yang berada di dalamnya. Dengan alasan itu,
jangan kita menggunakan hard-code untuk men-set nilai height dan width, dan disamping itu
dengan kita tidak men-set secara hard-code kita secara otomatis memanfaatkan keunggulan
engine layout WPF yang dapat merubah ukuran objek di dalamnya secara otomatis.
Expression blend 2 akan secara otomati men-set nilai dari height dan width karena kita sedang
dalam Grid’s canvas layout mode, berbeda halnya dengan Grid’s grid layout mode. Tim
Expression Blend membuat Canvas layout mode dengan tujuan mempermudah bagi para
designer yang belum berpengalaman dengan layout panel.
Untuk berikutnya kita akan melihat mengenai Grid’s in Grid layout mode. Jika kita perhatikan
pada pojok kiri atas terdapat sebuah tombol kecil yang jika kita klik maka akan berubah menjadi
Grid layout mode.
Sekarang kita melihat sebuah icon gembok yang berada pada bar biru column ataupun row.
Icon gembok ini dapat berfungsi untuk mengunci height dari row atau width dari column. Kalau
kita lihat pada XAML view, di sebelah nilai height dan width terdapat symbol “*”. Coba kita klik
salah satu icon gembok tersebut hingga “terkunci”. Maka jika kita kembali lihat pada XAML
view, nilai dari height atau width-nya akan hilang digantikan dengan symbol “*” saja.
<Grid.RowDefinitions>
<RowDefinition Height="0.241*"/>
<RowDefinition Height="0.759*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="74.88"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
Jika row dan column tidak dalam keadaan “dikunci” maka, nilai dari height dan width akan
tergantung kepada besarnya ukuran content dan ukuran window. Untuk lebih jelasnya kita akan
mencoba dengan latihan kecil agar kita dapat memahami penggunaan Grid yang lebih
maksimal.
Menggunakan Grid Layout Mode
Berikut ini langkah – langkah untuk mempelajari penggunaan Grid layout mode.
1. Buat aplikasi WPF baru pada Expression Blend 2 dengan nama RowCol
2. Kemudian set width dan height Window menjadi 800 x 600. Property ini terletak pada
tag Window (pilih XAML view).
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="LayoutControlProject.Window1"
x:Name="Window"
Title="Window1"
Width="800" Height="600">
3. Buat dua buah column dan dua buah row.
4. Klik icon kecil yang berada di pojok kiri atas untuk merubah mode menjadi Grid layout
mode.
5. Buat empat buah rectangle pada setiap cell (jadi totalnya ada empat buah rectangle).
6. Biarkan gembok dalam keadaan “tidak terkunci” (sudah secara default tidak terkunci).
7. Coba jalankan aplikasi dengan menekan tombol F5. Dan coba resize window menjadi
lebih kecil.
Dari contoh di atas terlihat bahwa jika window diperkecil maka rectangle yang ada di dalamnya
akan ikut mengecil.
8. Sekarang kita coba klik semua gembok yang ada hingga “terkunci”.
9. Kemudian kembali coba jalankan kembali dengan menekan tombol F5.
Dari situ terlihat bahwa rectangle yang ada di dalamnya tidak menyesuaikan dengan ukuran
window.
Sekarang kita coba hapus semua rectangle yang ada. Berarti kondisi window saat ini adalah
terdiri dari dua row dan dua column. Kemudian ikuti langkah – langkah di bawah ini:
1. Pilih TextBlock pada toolbar
2. Gambarkan TextBlock pada workspace.
3. Set text nya menjadi “Row 0 Column 0”.
Maka ketika kita lihat pada XAML viewnya, code XAML akan seperti di bawah ini:
<TextBlock Margin="23,37,21,51" Text="Row 0 Column 0" TextWrapping="Wrap"/>
Dari potongan code di atas kita sama sekali tidak men-set row dan column dari TextBlock tersebut,
Expression Blend akan menganggap bahwa code diatas dimasukan ke dalam row 0 dan column 0. Kita
akan coba men-set row dan column secara hard-code.
4. Gantikan code diatas dengan code dibawah ini
<TextBlock Margin="23,37,21,51" Text="Row 0 column 0"
TextWrapping="Wrap" Grid.Column="0" Grid.Row="0"/>
5. Copy paste sebanyak tiga kali hingga row dan column terisi semua dengan TextBlock.
Jangan lupa untuk gantikan text, Grid.Column, dan Grid.Row seperti di bawah ini
<TextBlock Margin="23,37,21,51" Text="Row 0 Column 0"
TextWrapping="Wrap" Grid.Column="0" Grid.Row="0"/>
<TextBlock Margin="23,37,21,51" Text="Row 0 Column 1"
TextWrapping="Wrap" Grid.Column="1" Grid.Row="0"/>
<TextBlock Margin="23,37,21,51" Text="Row 1 Column 0"
TextWrapping="Wrap" Grid.Column="0" Grid.Row="1"/>
<TextBlock Margin="23,37,21,51" Text="Row 1 Column 1"
TextWrapping="Wrap" Grid.Column="1" Grid.Row="1"/>
6. Atau dapat juga kita menggunakan Design view, kita dapat men-set pada bagian
property Layout. Misalkan untuk row 0 dan column 1, maka di set seperti di bawah ini.
7. Dan jika kita lihat apda workspace maka akan terlihat seperti di bawah ini.
Hal yang menarik lainnya yang terdapat pada Grid adalah posisi content-nya menggunakan
Margins. Secara umum fungsi dari Margins adalah untuk seberapa jauh sebuah objek dari kiri,
atas, kanan, dan relative terhadap boundaries yang ada pada Grid.
Canvas Layout
Layout elements berikutnya yang akan kita bahas adalah Canvas. Dengan menggunakan Canvas
user dapat mengatur absolute positioning dari “anak”nya. Canvas tidak akan merubah poisisi
“anak” dari element yang berada di dalamnya. Untuk lebih jelas mengenai penggunaan canvas mari kita
ikuti contoh dibawah ini.
1. Dengan menggunakan Project di atas, kita ubah ukuran Window menjadi 600 x 600.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="LayoutControlProject.Window1"
x:Name="Window"
Title="Window1"
Width="600" Height="600">
2. Ubah width dari setiap TextBlock menjadi 150 dan height menjadi 20. Dapat diset di
bagian Layout property. Lakukan hal ini ke empat TextBlock lainnya.
3. Pindahkan setiap TextBlock ke pojok kiri atas dari masing – masing cell.
4. Klik kanan pada Grid tool yang ada pada toolbar, kemudian pilih Canvas. Gambarkan
canvas pada row 0 dan column 1.
5. Kemudian klik dua kali pada Canvas yang baru kita buat hingga sekitarnya berwarna
kuning.
6. Dengan sekitarnya berwarna kuning hal itu menandakan bahwa sekarang kita sudah bisa
menambahkan content ke dalamnya.
7. Kita coba masukan sebuah ellipse ke dalamnya. Pilih ellipse ellipse pada toolbar,
kemudian gambarkan sambil meneka tombol Shift pada keyboard pada canvas yang
telah kita buat tadi.
8. Lalu klik dua kali pada ellipse yang sudah kita buat hingga sekitarnya berwarna kuning,
kita coba ganti warna Backgroundnya menjadi warna gradasi.
9. Setelah itu kita ubah gradient menjadi radial.
10. Ubah warna sesuai dengan selera atau kita dapat menggunakan Brush Transform tool.
Dan hasilnya kira – kira akan seperti di bawah ini.
Jika kita melihat XAML yang ada maka dapat terlihat bahwa Canvas berada di dalam Grid dan di
dalam canvas terdapat ellipse. Yang cukup menarik adalah canvas sendiri memiliki property
Margin dan membuatnya dapat dicontrol oleh parentGrid-nya. Setelah kita belajar
menggunakan Canvas, berikutnya kita akan belajar StackPanel layout.
StackPanel Layout
StackPanel adalah salah satu jenis lain dari layout elements dimana kita bisa membuat posisi
content seperti tumpukan vertical atau horizontal. Untuk lebih jelasnya langsung saja kita coba
dengan menggunakan contoh di bawah ini. Kita masih menggunakan project yang sebelumnya
jadi jangan dihapus terlebih dahulu.
1. Pilih StackPanel dari toolbar (klik kanan pada Grid layout).
2. Kemudian gambarkan StackPanel pada row 1 dan column 0. Setelah itu coba kita
masukan ellipse ke dalam StackPanel yang telah kita buat (jangan lupa klik dua kali pada
StackPanel hingga berwarna kuning, baru kemudian kita dapat memasukan objek ke
dalamnya).
3. Coba buat tiga buah ellipse pada StackPanel tersebut.
4. Cara untuk merubah arah vertical atau horizontal terletak pada panel properties nya
bagian Layout.
WrapPanel Layout
WrapPanel merupakan sebuah layout element yang cukup menarik untuk kita pelajari
bagaimana menggunakannya. Dengan menggunakan WrapPanel, posisi dari anak content di
dalamnya dapat berubah ketika aplikasi berjalan. Ini adalah konsep baru dalam pembuatan Rich
Media Content. Bayangkan jika kita punya sebuah table dalam HTML yang di dalamnya terdapat
sebuah rectangle bitmap, kemudian apa yang terjadi jika user mengecilkan window browser?
Pasti rectangle tersebut akan terpotong.
Pada WPF jika kita menggunakan layout element lainnya maka kita akan mengalami hal yang
serupa dengan diatas yaitu, rectangle akan terpotong ketika kita mengecilkan window. Lain
halnya jika rectangle tersebut berada di dalam WrapPanel. Secara otomatis WrapPanel akan
merubah posisi dari objek yang ada di dalamnya sampai posisi tersebut tidak lagi sampai
terpotong. Dan sekarang mari kita coba menggunakannya.
1. Pilih WrapPanel pada toolbar.
2. Kemudian buat WrapPanel berada di bawah StackPanel dan berada di row 1, column 0.
3. Klik dua kali pada WrapPanel kemudian buat beberapa rectangle di dalamnya.
Sama halnya seperti StackPanel, WrapPanel juga dapat kita ubah orientasi arahnya (vertical
atau horizontal). Sekarang kita coba jalankan aplikasi di atas (F5) agar kita bisa melihat
fungsinya dan keunggulannya. Setelah dijalankan, coba kecilkan window aplikasi. Maka akan
terlihat bahwa rectangle yang ada di dalam WrapPanel akan menyesuaikan posisi secara
otomatis.
Kalau kita perhatikan baik – baik gambar di atas terlihat perbedaan menggunakan StackPanel
dan WrapPanel. Ketika window aplikasi sudah kecil, StackPanel tidak dapat secara otomatis
menyesuaikan posisi objek yang ada di dalamnya. Sehingga menyebabkan objek yang berada di
dalamnya menjadi terpotong oleh ukuran aplikasi window.
Hal ini yang membuat banyak para developer kagum, karena hal baru ini sangat berguna jika
kita ingin membuat sebuah aplikasi Rich Media Content, dimana hal itu sangat banyak
dibutuhkan. Berikutnya kita akan mencoba mempelajari jenis layout element lainnya yaitu,
DockPanel.
DockPanel Layout
Sesuai dengan namanya, fungsi dari DockPanel adalah kita dapat meletakan content rapat atas,
kiri, kanan, atau bawah. Sekarang coba kita belajar cara menggunakannya.
1. Pilih DockPanel pada toolbar.
2. Buat DockPanel pada row 0, column 0.
3. Dengan Pencil tool gambar beebrapa shape secara sembarang.
4. Secara default maka objek yang dibuat akan berada di sebelah kiri. Coba pindahkan
objek lainnya ke berbagai arah dengan men-set pada propertynya.
5. Maka kira – kira akan menjadi seperti ini.
6. Coba jalankan aplikasi dengan menekan tombol F5 dan coba resize ukuran window.
Kalau kita coba perhatikan ketika window kita perbesar maka, DockPanel juga akan membesar.
Objek yang berada di atas akan tetap berada dipaling atas, hal ini sangat menguntungkan jika
kita ingin membuat aplikasi yang memiliki sebuah objek atau content yang posisinya selalu
sama atau tidak berubah – ubah.
ScrollViewer Layout
Dengan ScrollViewer hanya dapat satu buah content di dalamnya. Jika content di dalamnya
lebih besar dari ScrollViewer itu sendiri maka, user dapat menggeser dan melihat seluruh
bagian dari content. Untuk itu kita akan mencobanya dengan gambar yang ukurannya kira – kira
lebih besar dari ukuran ScrollViewer. Karena kalau ukuran gambar lebih kecil, tidak ada gunanya
kita menggunakan scroll, kita dapat melihat gambar secara keseluruhan.
1. Masukan gambar ke dalam project dengan menekan tombol CTRL + I, atau pada panel
Project klik kanan pada nama project lalu pilih Add Existing Item dan pilih gambar yang
ingin digunakan.
2. Setelah gambar masuk ke dalam project, klik dua kali hingga gambar tersebut berada di
dalam workspace. Bila dirasa gambar yang dimasukan terlalu besar maka resize sedikit
ukurannya namun jangan sampai ukurannya lebih kecil dari ukuran ScrollViewer
nantinya.
3. Pilih ScrollViewer pada toolbar dan gambarkan pada row 1, column 1.
4. Pada panel Object and Timeline, masukan gambar ke dalam ScrollViewer dengan men-
drag gambar ke dalam scrollViewer. Sehingga gambar merupakan anak dari scrollviewer.
5. Kemudian kita akan memunculkan ScrollBar yang bersifat Horizontal. Pada panel
Properties bagian Layout advanced, kita bisa men-set HorizontalScrollbarVisibility dan
VerticalScrollbarVisibility menjadi visible.
6. Coba jalankan aplikasi dengan menekan tombol F5.
Berikutnya kita akan mencoba untuk belajar sedikit tentang cara pemakaian border layout.
Border Layout
Border adalah sebuah layout element yang sederhana dimana kita dapat menggambar garis di
sekitar content dan memberikannya background atau border yang sesungguhnya. Dengan
menggunakan border kita hanya dapat memiliki satu buah element di dalamnya dan tentunya
content bisa berada di kiri, kanan, atas, bawah, atau di tengah. Sekarang mari kita coba
menggunakan border pada aplikasi yang akan kita buat.
1. Pilih border tool pada toolbar
2. Gambarkan border pada row 0, column 1.
3. Buat sebuah ellipse di dalam border tersebut.
4. Pada panel Properties, kita coba ganti – ganti warna background dan borderBrush. Jika
ingin mempertebal border, kita dapat men-setnya pada BorderThickness.
5. Dan di bawah ini adalah kira – kira hasil yang dihasilkan dengan memainkan property
yang ada pada border.
ViewBox Layout
Keuntungan ViewBox adalah objek atau content yang dimasukan ke dalamnya akan secara
otomatis menyesuaikan ukuran dengan ukuran ViewBox. Sehingga kita tidak perlu repot –repot
untuk merubah ukuran objek atau content, cukup dengan menentukan ukuran objek atau
content yang diinginkan kemudian kita set ukuran ViewBox dengan ukuran yang kita butuhkan,
maka secara otomatis content akan mengikuti ukuran itu. Mari kita coba menggunakannya.
1. Masukan gambar ke dalam project dengan menekan tombol CTRL + I, atau pada panel
Project klik kanan pada nama project lalu pilih Add Existing Item dan pilih gambar yang
ingin digunakan.
2. Setelah gambar masuk ke dalam project, klik dua kali hingga gambar tersebut berada di
dalam workspace.
3. Pada panel Object and Timeline, masukan gambar ke dalam ViewBox dengan men-drag
gambar ke dalam ViewBox. Sehingga gambar merupakan anak dari ViewBox.
4. Dari tadinya sebuah gambar yang ukurannya besar sekali ketika kita masukan kedalam
ViewBox, secara otomatis maka akan mengecil dan menyesuaikan dengan ukuran
ViewBox.
Control Templates, Styles, dan Custom UserControls
Konsep yang paling penting dalam Object Oriented Programming adalah kita dapat membuat
sesuatu yang dapat kita gunakan kembali atau reusable. Tentunya kita hanya bisa menggunakan
resource berulang – ulang hanya pada aplikasi yang sama, namun pada WPF kita dapat
menggunakan resource yang sudah kita buat berulang – ulang dan pada aplikasi yang berbeda.
Dengan keuntungan ini tentunya menjadikan masa development menjadi bertambah cepat
karena kita cukup menambahkan referensi di aplikasi yang akn kita buat.
pada bab ini kita akan belajar membuat style untuk sebuah button dari WPF yang berisi Control
Template dan kita akan belajar untuk merubah ControlTemplate tersebut. Kemudian kita juga
akan belajar membuat ResourceDictionary untuk button.
Control Template
ControlTemplate tidaklah berbeda dengan sebuah resource. Agar mudah kita mengerti apa itu
ControlTemplate kita sebut saja kita dapat membuat template untuk sebuah WPF control. Kita
dapat membuat sebuah template untuk beberapa control yang ada pada WPF, contohnya
adalah kita dapat membuat template untuk button, ListBoxes, CheckBoxes, dan lain – lain.
Setelah kita membuat satu buah template (misalkan untuk button), kita dapat menggunakan
template tersebut berulang – ulang pada aplikasi yang akan kita buat. Mari sekarang kita coba
mempelajarinya dengan contoh.
Merubah dan Membuat Button Control Template
Secara default button sudah memiliki template sendiri yaitu, button yang ada pada toolbar. Jika
kita coba buat sebuah button yang ada pada toolbar maka button tersebut akan berwarna abu
– abu, itu adalah default template dari button yang ada di WPF. Namun salah satu keunggulan
WPF adalah kita dapat membuat atau mengedit template yang ada sesuai dengan keinginan
kita. Ada dua buah cara untuk membuat button pada WPF, di bawah kita akan mencoba ke dua
buah cara tersebut.
Cara yang pertama adalah kita membuat design atau templatenya terlebih dahulu baru kita
jadikan button.
1. Kita buat project baru atau menggunakan project yang sebelumnya pada Expression
Blend.
2. Pilih rectangle tool kemudian gambarkan pada workspace. Pada panel Properties ubah
radiusX dan radiusY menjadi 10 dan beri warna sesuai keinginan.
Fungsi dari radiusX dan radiusY adalah melengkungkan ke empat sudut pada rectangle.
Coba lihat pada workspace apa yang terjadi pada rectangle tersebut.
3. Kemudian pada Tools pilih Make Button.
4. Misalkan saja beri nama ButtonStyle, dan pilih ok.
Jika kita lihat pada panel Object and Timeline, rectangle yang telah kita buat tadi
otomatis berubah menjadi sebuah button.
Dan bila kita lihat pada workspace terlihat rectangle sudah berubah menjadi button
yang secara default bertuliskan “Button”.
5. Beri nama button tersebut dengan nama MyButton pada panel Properties.
6. Sekarang kita coba lihat XAML nya dengan memilih XAML view atau Split view.
<Grid x:Name="LayoutRoot"> <Button Margin="190,202,297,183"
Style="{DynamicResource ButtonStyle}"
Content="Button"
x:Name="MyButton"/>
</Grid>
Dari potongan code di atas dapat dilihat pada Main Grid hanya terdapat satu buah
control yaitu, button dengan nama MyButton.
Mari sekarang kita lihat satu persatu apa yagn telah dibuat oleh Expression Blend secara
otomatis ketika kita melakukan hal di atas.
Blend 2 membuatkan bagian Windows.Resources.
Pada bagian Windows.Resources, Blend 2 membuatkan kita style yaitu ButtonStyle.
Blend 2 juga membuatkan sebuah setter yang mendefinisikan template. Setter adalah
yang men-set property dari ControlTemplate untuk objek yang kita ubah templatenya.
Pada template tersebut, Blend 2 membuatkan sebuah ControlTemplate dengan
TargetType dari button.
Pada ControlTemplate tersebut juga dapat kita lihat bagaimana Blend 2 menampilkan
sebuah button dengan membuat:
1. Sebuah Grid
2. Sebuah Rectangle
3. Sebuah Rectangle.Fill
4. Sebuah ContentPresenter (ini adalah text yang bertuliskan “Button”)
5. ControlTemplate.Triggers untuk mendefinisikan bagaimana interaksi tersebut
di handle.
Kemudian Blend 2 membungkus style dari dari button control yang kita buat ke dalam
DynamicResource dari MyButton style.
Cara yang ke dua adalah dengan membuat sebuah button terlebih dahulu baru kemudian kita
edit template yang ada sesuai dengan keinginan kita. Sekarang mari kita coba cara ke dua.
1. Kita pilih button yang ada pada toolbar.
2. Gambarkan button tersebut pada workspace.
3. Klik kanan pada button yang sudah kita buat. Pilih Edit Control Parts (template), lalu Edit
a Copy.
4. Kemudian akan muncul sebuah dialog box yang akan menanyakan nama dari style yang
akan kita buat. Misalkan saja kita beri nama dengan “ButtonStyle2”. Lalu pilih ok.
5. Jika kita lihat pada panel Object and Timeline terlihat bahwa button itu terdiri dari
sebuah template, di dalamnya terdapat chrome, dan di dalamnya lagi terdapat
ContentPresenter.
6. Sekarang kita pilih Chrome dan hapus. Yang terjadi adalah content presenter yang
berada di dalamnya juga akan terhapus. Dan tampilan button pada workspace akan
kosong.
7. Klik dua kali pada Grid yang ada pada toolbar sehingga ukuran Grid akan sesuai dengan
ukuran template button. Fungsinya adalah untuk menempatkan ContentPresenter
(untuk menuliskan text pada button) dan path atau gambar.
8. Sekarang kita akan lihat bagaimana membuat button dengan style sesuka hati. Klik dua
kali pada Grid yang baru saja kita buat, kemudian pilih pencil tool pada toolbar.
9. Lalu misalkan kita gambar seperti di bawah ini.
10. Masih Grid dalam keadaan terpilih, pada AssetLibrary cari ContentPresenter.
11. Setelah kita cari dan pilih ContentPresenter langsung klik dua kali pada ContentPresenter
yang ada di toolbar sehingga langsung masuk ke dalam Grid. Besarkan ukurannya
sehingga pas dengan ukuran Grid.
12. Pada panel Properties bagian Layout set HorizontalAlignment dan VerticalAlignment menjadi
Center.
13. Hasilnya adalah seperti di bawah ini.
14. Kemudian kita lihat pada panel Object and Timeline terdapat sebuah button, Return
scope to window. Kita klik button tersebut untuk mengeluarkan kita dari template
button yang telah kita ubah tersebut.
15. Dan kita lihat lagi pada panel Object and Timeline setelah kita pilih Return scope to
window maka panel tersebut kembali lagi ke tampilan awal yaitu, LayoutRoot dan
button yang telah kita buat.
Dengan ke dua cara di atas kita dapat membuat sebuah button style atau merubah template
button yang ada menjadi sebuah button dengan bentuk yang kita inginkan. Dengan contoh di
atas kita dapat melihat bahwa aplikasi desktop generasi sekarang sudah bisa berbeda dengan
aplikasi desktop dimana aplikasi desktop jaman dahulu tidak bisa di modifikasi tampilannya
hingga seperti ini.
Misalnya adalah button yang ada pada aplikasi desktop jaman dahulu, bentuknya adalah
monoton berwarna abu – abu dan kotak. Tetapi jika kita lihat button yang bisa dihasilkan oleh
WPF, button yang kita gunakan untuk aplikasi desktop bisa berbentuk apa saja. Button hanyalah
salah satu contoh untuk penerapan modifikasi template, kita juga dapat melakukan perubahan
template pada setiap control yang disediakan oleh WPF.
Memasukan Gambar ke dalam Button
Dari contoh di atas kita sudah bisa membuat template button sesuai selera kita, sekarang kita
akan belajar memasukan sebuah gambar ke dalam button yang telah kita modifikasi
templatenya. Berikut ini adalah langkah – langkah untuk memasukan gambar ke dalam button.
1. Pada panel Object and Timeline klik kanan di button yang sebelumnya telah kita buat.
Atau kita juga dapat klik kanan di button yang ada di workspace. Pilih Edit Control Parts
(template), lalu Edit Template.
2. Setelah kita pilih Edit template panel Object and Timeline akan kembali ke tampilan
ketika kita sedang merubah template button pertama tadi. Kemudian kita hapus
ContentPresenter yang ada, hal ini menyebabkan tulisan “Button” menjadi hilang.
3. Kemudian kita masukan gambar kedalam Project kita dengan menekan tombol Ctrl + I
atau kita pilih pada Project, Add Existing Item. Lalu pilih gambar yang ingin dimasukan
kedalam button.
4. Setelah kita pilih gambar yang diinginkan maka pada panel Project akan muncul gambar
yang telah kita masukan tadi. Kalau ingin rapih maka kita buat sebuah folder (klik kanan
pada solution yang ada kemudian Add New Folder).
5. Pastikan Grid dalam keadaan terpilih (berwarna kuning), kemudian klik dua kali gambar
yang telah dimasukan ke dalam project. Hasilnya adalah gambar tersebut akan masuk ke
dalam Grid, tetapi ukurannya masih terlalu besar.
6. Kecilkan ukuran gambar yang berada di dalam Grid hingga berada di tengah button.
Maka akan menghasilkan seperti di bawah ini.
Dari contoh di atas kita dapat belajar bagaimana memasukan gambar ke dalam sebuah button.
Sekarang kita akan belajar bagaimana mencoba membuat sebuah button yang indah dan enak
untuk dilihat.
Membuat eye-catching Button
Dari contoh di atas kita sudah bisa membuat template sendiri untuk membuat button. Sekarang
kita akan mencoba membuat sebuah template button yang enak untuk dilihat dan menjadi
perhatian ketika orang melihatnya. Tujuannya adalah kita dapat menguasai bab – bab yang
sebelumnya, karena kita akan mencoba mempraktekannya di sini.
1. Buat Project baru atau menggunakan Project yang sebelumnya.
2. Buat sebuah button pada workspace dengan menekan tombol Shift pda keboard untuk
menghasilkan bentuk button yang persegi.
3. Klik kanan pada button yang berada di workspace ataupun yang ada di panel Object and
Timeline. Pilih Edit a Copy.
4. Beri nama dengan “CoolButton” atau terserah sesuai dengan keiinginan. Kemudian pilih
This Document saja dan pilih Ok.
5. Pada panel Object and Timeline tentunya berubah menjadi isi dari si button tersebut
(sudah pernah kita pelajari pada contoh atau bab sebelunya).
6. Kita hapus Chrome dan ContentPresenter agar kita bisa memasukan template yang baru.
Untuk menghapus ke duanya kita cukup menghapus parentnya yaitu, Chrome.
7. Setelah kita hapus maka tampilan button pada workspace akan kosong. Pada toolbar
kita klik dua kali pada Grid, agar langsung masuk ke dalam Template sebagai anaknya.
8. Klik dua kali pada Grid hingga berwarna kuning sekitarnya. Kemudian masukan Ellipse ke
dalamnya sambil menekan Shift pada keyboard. Tujuannya adalah untuk membuat
ellipse menjadi berbentuk lingkaran (simetris).
9. Pada Assetlibrary cari ContentPresenter dan klik dua kali agar masuk ke dalam Grid.
Dengan catatan Grid dalam keadaan terpilih (berwarna kuning sekitarnya).
10. Setelah kita masukan ContentPresenter ke dalam Grid secara otomatis maka tulisan text
button akan berada di pojok kiri atas, maka dari itu kita buat menjadi center pada
VerticalAlignment dan HorizontalAlignment.
11. Selanjutnya kita pilih ellipse yang sudah kita buat tadi, beri warna gradasi seperti di
bawah ini.
12. Kemudian kita coba lihat pada workspace warna yang telah kita pilih untuk ellipse
tersebut.
13. Kemudian kita gunakan Brush Transform tool yang ada pada toolbar, atau kita tekan
tombol B pada keyboard. Lalu ubah arahnya sesuai dengan gambar di bawah ini.
14. Lalu kita plih Stroke yang berada di panel Properties, berikan warna kuning, dan set
StrokeThicknessnya menjadi 4. StrokeThickness adalah sebuah property yang mengatur
ketebalan border yang berada di luar objek, dalam hal ini adalah ellipse.
15. Jika kita lihat pada workspace maka tampilannya akan seperti di bawah ini.
16. Kemudian kita pilih lagi ellipse tool pada toolbar, gambarkan sebuah ellipse pada pojok
kanan atas dari ellipse yang berwarna biru. Agak miringkan ellipse tersebut hingga
seperti di bawah ini (untuk memiringkan objek caranya adalah dengan mendekatkan
cursor pada sudut objek tersebut hingga cursor berubah menjadi sebuah gambar sepeti
panah melengkung dua arah).
17. Set Stroke pada panel Properties menjadi No Brush.
18. Beri warna Fill Color dengan warna putih (Solid Color Brush) dan set Alpha-nya menjadi
40.
19. Posisikan ellipse yang berwarna putih seperti gambar di bawah ini.
20. Pilih ellipse yang berwarna putih, kemudian pada bagian atas Expression Blend pilih
object, lalu Path, pilih Convert to Path.
21. Setelah ellipse menjadi Path, pilih Direct Selection tool pada toolbar. Untuk merubah
bentuk dari ellipse yang berwarna putih tersebut agar terlihat lebih natural.
22. Ubah bagian bawah dari ellipse yang berwarna putih dengan menggunakan Direct
Selection tool hingga berbentuk seperti di bawah ini.
23. Coba jalankan aplikasinya dengan menekan tombol F5 pada keyboard. Kalau kita
menggunakan Project yang sebelumnya maka kita dapat lihat perbandingan button –
button yang sudah kita buat tadi dengan yang sekarang.
Dari Contoh di atas kita sudah dapat membuat sebuah template button untuk aplikasi desktop,
namun button di atas hanyalah sebuah template yang statis. Sedangkan ketika kita lihat pada
default template yang ada pada button, ketika kita hover atau menempatkan cursor di atasnya
maka button tersebut akan berubah warnanya, begitu juga ketika kita klik sebuah button
dengan default template, button akan berlaku seperti ditekan. Kita akan mencoba membuat
perilaku button seperti ketika cursor berada di atasnya (hover) dan ketika button diklik pada
bab Trigger and Animations.
Action and Animations
Dalam bab ini kita akan belajar bagaimana membuat sebuah Trigger dari sebuah objek dan
bagaimana mengatur Trigger tersebut. Dalam bab sebelumnya kita sudah belajar bagaimana
membuat sebuah template dari button, tetapi kita belum bisa memberinya sebuah fungsi
MouseEnter (ketika cursor berada di atas button tersebut) atau fungsi yang lainnya.
Selain itu kita juga akan belajar membuat animasi pda sebuah objek, dalam hal ini kita akan
banyak berhubungan dengan panel Object and Timeline. Tentunya sangatlah sulit jika kita tidak
mencobanya langsung, maka dari itu kita akan mencoba membuat sebuah animasi yang
sederhana dan membuat animasi dengan Trigger.
Membuat Animasi Sederhana
Pada awal bab ini kita akan belajar membuat sebuah animasi sederhana sekaligus membiasakan
diri membuat animasi dengan Expression Blend. Animasi yang akan kita buat adalah ada sebuah
rectangle yang jika kita klik akan bergerak ke arah tertentu. Buat sebuah project baru dengan
nama “Animasi” atau sesuai dengan keinginan masing – masing.
1. Buat project baru WPF Application (.exe) pada Expression Blend.
2. Buat sebuah rectangle pada workspace dan pada panel Properties berikan Fill Color
rectangle tersebut warna merah.
3. Beri nama rectangle tersebut “Kotak”.
4. Pada panel Object and Timeline terdapat sebuah icon bergambar tanda tambah (+), klik
icon tersebut untuk membuat sebuah Storyboard baru. Setelah kita klik akan muncul
sebuah dialog box yang menanyakan nama dari Storyboard yang akan kita buat.
5. Kalau kita coba perhatikan sekeliling workspace menjadi ada garis merah dan di atasnya
terdapat tulisan Timeline recording is on. Jika dalam kondisi ini maka setiap perubahan
yang ada akan masuk ke dalam Storyboard yang kita beri nama “Pertamax”.
6. Dan coba kita lihat panel Object and Timeline, akan berubah menjadi seperti di bawah
ini. Sebelah kiri adalah objek – objek yang ada dan di sebelah kanan adalah timeline.
Secara default timeline menunjukan angka 0, hal ini menunjukan posisi objek pada detik
ke 0 (sekarang). Coba pindahkan timeline ke detik 1.
7. Setelah timeline berada pada detik ke satu, gerakan rectangle yang ada pada workspace
ke sembarang arah, misalkan ke sudut kanan atas.
8. Coba perhatikan panel Object and Timeline, terdapat tombol Play, pause, dan lain – lain.
Pilih tombol Play untuk melihat apa yang terjadi pada detik ke satu. Dan kalau kita
perhatikan lebih detail lagi, terdapat sebuah bulatan putih pada detik satu dan tepat dis
sebelah rectangle yang bernama “Kotak”. Bulatan putih itu yang disebut dengan
Keyframe.
9. Di samping nama Storyboard (dalam hal ini “Pertamax”) terdapat sebuah tanda (x) atau
close storyboard. Coba klik button tersebut untuk keluar dari Timeline recording.
10. Coba jalankan aplikasi dengan menekan tombol F5. Yang terjadi adalah ketika Window
aplikasi terbuka, rectangle yang bernama “kotak” lagnsung beregerak ke pojok kanan
atas. Hal ini terjadi karena secara otomatis Expression Blend membuatkan sebuah
Trigger ketika Window loaded (coba lihat pada panel Trigger).
11. Sekarang kita akan merubah Trigger yang ada, animasi akan mulai ketika rectangle
tersebut di klik. Caranya adalah klik Window.Loaded yang ada pada panel Trigger.
Secara otomatis di bawahnya aka nada tampilan seperti ini.
12. Pilih DropdownList yang tadinya bertuliskan Window menjadi Kotak (jika tidak
menemukan “kotak” pada dropdownlist, pastikan rectangle “kotak” sedang dalam
keadaan terpilih).
13. Setelah kita pilih “Kotak”, di sebelahnya terdapat dropdownlist lagi (secara default
adalah Loaded). Di dalam dropdownlist tersebut banyak sekali Trigger yang ada, dalam
hal ini kita pilih MouseLeftButtonDown.
14. Jadi pada panel tersebut terlihat, When “Kotak”. MouseLeftButtonDown is raised
“Pertamax”. Begin. Jika diartikan adalah sebagai berikut, ketika rectangle yang bernama
“Kotak” diberikan Trigger MouseLeftButtonDown maka Storyboard yang bernama
“Pertamax” akan mulai.
15. Sekarang coba jalankan aplikasi ini dengan menekan tombol F5 pada keyboard. Klik pada
rectangle tersebut maka akan bergerak ke pojok kanan atas.
Motion Path
Motion Path adalah salah satu fitur baru yang ada di Expression Blend 2 Service Pack 1. Inti dari
Motion Path ialah bagaimana kita bisa membuat animasi dengan sebuah path. Path-nya pun
dapat kita buat sebebas mungkin. Langsung saja kita pelajari bagaimana cara menggunakannya.
1. Buat Project baru pada Expression Blend, kita buat sebuah object rectangle dengan
nama “motion”, lalu pilih pencil tool yang ada pada toolbar. Gambarkan pada workspace
sebebas mungkin.
2. Klik kanan pada Path tersebut, pilih Covert to Motion Path.
3. Akan muncul sebuah Window yang yang menanyakan objek apa yang akan digerakan
pada path tersebut. Pilih rectangle yang bernama “motion” dan pilih Ok.
4. Pada panel Interaction, ubah Window.Loaded dengan motion.MouseLeftButtonDown.
jangan lupa jika ingin mengganti Window menjadi motion, maka motionnya harus di klik
terlebih dahulu.
5. Coba jalankan aplikasi dengan menekan tombol F5 pada keyboard.
Membuat Animasi Button (MouseEnter dan Click)
Pada bab sebelumnya kita sudah pernah membuat sebuat template button yang sederhana
namun cukup menarik perhatian. Sekarang kita buka kembali project tersebut, karena kita akan
belajar memberikan template button tersebut Trigger MouseEnter dan Click.
Pertama kita akan membuat sebuah animasi ketika cursor berada di atas button tersebut.
Berikut ini adalah langkah – langkah untuk membuat animasi tersebut.
1. Buka kembali project dimana kita membuat sebuah template button seperti di atas.
2. Klik dua kali pada button tersebut hingga berwarna kuning di sekitarnya.
3. Klik kanan pada button tersebut, pilih Edit Control Parts (template), lalu Edit Template.
4. Pada panel Triggers pilih + Property yang berada di sebelah + Event, maka akan muncul
sebuah Property baru yaitu IsEnabled = false.
5. Pilih IsEnabled = False, maka di bawahnya akan muncul Properties when active. Terdapat
tiga buah dropdown list pada Activated when, yang pertama tidak usah kita ganti (tetap
target-element), yang ke dua kita ganti dengan IsMouseOver, dan yang terakhir dari
False kita ganti dengan True (untuk yang satu ini setelah kita pilih gambar panah ke
bawah pada dropdown list tersebut, kita ketik secara manual “True”).
6. Kalau kita perhatikan, ketika kita pilih IsEnabled = False pada workspace akan terlihat
Trigger Recording is On. Artinya adalah segala sesuatu yang kita lakukan pada mode ini
akan tersimpan.
7. Kemudian pada tab Actions When Activating di sebelah kanannya terdapat sebuah
tanda (+) untuk menambahkan new action, klik tanda (+) tersebut.
8. Setelah itu akan muncul sebuah dialog box yang menanyakan membutuhkan sebuah
storyboard, pilih Ok.
9. Pada panel Object and Timeline pindahkan timeline dari detik ke nol menjadi detik ke
0.3 (satu bar). Lalu pilih tiga buah objek yang ada yaitu, ellipse, ContentPresenter, dan
Path.
10. Pada panel Properties, expand tab Transform, lalu pilih Scale, dan ubah nilai X dari satu
menjadi 1.2. begitu juga dengan nilai pada Y, ubah nilainya dari satu menjadi 1.2.
11. Masih pada detik ke 0.3, pilih Path kemudian geser hingga seperi di bawah ini.
Tujuannya adalah ketika button membesar maka Path ini juga ikut bergerak menempel
dengan border.
12. Setelah itu kita close storyboard ini dengan menekan tombol (x) yang ada di panel
Object and Timeline di sebelah nama storyboard.
13. Sekarang kita akan membuat sebuah Action ketika mouse keluar dari button. Langkah
pertama adalah pilih storyboard 1 dengan memilih dropdown list yang ada pada panel
Object and Timeline.
14. Di sampingnya tanda (+) terdapat dropdown list lagi, pilih duplicate.
15. Maka akan terbuat sebuah Storyboard lainnya yang benama “Storyboard_Copy1”.
16. Kemudian pada dropdown list yang ada di sebelah tanda (+), pilih Reverse. Fungsi
Reverse adalah membalikan fungsi yang ada. Karena tadi yang kita duplicate adalah
animasi membesar ketika button di MouseEnter, maka ketika di reverse yang terjadi
adalah button kembali mengecil jika mouse meninggalkan button.
17. Sekarang tinggal kita taruh storyboard tersebut di Actions when deactivating.
18. Setelah kita lakukan hal di atas, coba jalankan aplikasi dengan menkan tombol F5. Ketika
kita MouseOver, button akan membesar dan ketika mouse keluar akan mengecil.
19. Dari langkah – langkah di atas kita sudah bisa membuat action dengan trigger
MouseOver dan MouseLeave. Sekarang kita akan belajar membuat sebuah action yaitu,
animasi ketika button di klik. Pilih button yang telah kita buat di atas, kemudian pilih klik
kanan Edit Control Parts (Template), Edit Template.
20. Pilih +Property yang ada pada panel Triggers.
21. Secara otomatis akan muncul sebuah Property IsCancel = False. Kita ubah IsCancel
menjadi IsPressed yang berada pada tab Activated when.
22. Ubah juga IsPressed = False menjadi IsPressed = True. Caranya adalah klik dropdown list
False, ketik secara manual True dan tekan enter pada keyboard.
23. Pilih ellipse yang merupakan salah satu bagian dari objek button yang kita buat, ubah
warnanya menjadi seperti di bawah ini.
24. Coba jalankan dengan menkan F5 pada keyboard. Action di atas akan terjadi ketika kita
meng-klik atau klik dan tahan (itulah fungsi dari IsPressed).
Dari contoh di atas kita sudah dapat membuat sebuah animasi dan action untuk button. Contoh
di atas merupakan salah satu penggunaan action pada WPF, masih banyak yang kita dapat
lakukan dengan menggunakan action dan animasi pada WPF. Tujuan dari contoh di atas adalah
memberikan gambaran mengenai cara penggunaannya kemudian kita dapat
mengembangkannya pada aplikasi lain.
Case Study WPF: Data binding, image 3D, animation 3D, layout control, input
control, Windowless application, dan Compatibility with Visual Studio
Pada bab ini kita akan belajar menggunakan apa – apa saja yang sudah kita pelajari pada bab
sebelumnya pada sebuah aplikasi. Gambaran secara umum mengenai aplikasi apa yang kita
buat adalah, kita akan membuat sebuah aplikasi desktop dimana user yang menggunakannya
dapat melihat sejumlah item, kemudian jika kita pilih salah satu item tersebut maka akan ada
penjelasan singkat dan detail dari item tersebut. Dalam contoh kali ini kita akan menggunakan
jenis – jenis game Xbox untuk masing – masing item yang ada nantinya. Jenis – jenis, deskripsi,
dan gambar item akan kita simpan dalam sebuah file XML.
Untuk mempermudah pembuatan aplikasinya maka kita akan membaginya menjadi beberapa
bagian mulai dari, layout dari keseluruhan aplikasi, kemudian data binding, membuat image 2D
menjadi 3D, membuat animasi 3D, dan yang terakhir membuat aplikasi yang kita buat menjadi
windowless. Langsung saja kita praktekan langkah pertama yaitu, membuat tampilan atau
layout dari aplikasi yang akan kita buat.
Tampilan atau Layout Aplikasi
Untuk gambaran umum layout yang akan kita buat adalah, sebuah ListBox horizontal berada
pada window bagian bawah dan sebuah Grid yang menampung sebuah gambar ditambah
dengan sebuah StackPanel. StackPanel sendiri terdiri dari tiga buah TextBlock.
1. Buat sebuah project baru WPF pada Expression Blend, misalkan beri nama “Sample1”.
2. Setelah workspace terbuka, hapus LayoutRoot yang merupakan sebuah Grid. Alasannya
adalah, karena kita akan mencoba menggunakan ViewBox sebagai root.
3. Set ukuran window menjadi 800 x 600.
4. Kemudian pada AssetLibrary, ketik ViewBox di search box yang ada, dan gambarkan
ViewBox tersebut pada workspace dengan ukuran yang sama dengan ukuran Window
atau cukup dengan klik dua kali pada ViewBox yang telah muncul di atas AssetLibrary
maka ukurannya akan disesuaikan dengan ukuran Window secara otomatis.
5. Pilih ViewBox yang sudah kita buat pada workspace hingga berwarna kekuningan
sekitarnya, lalu masukan Grid layout ke dalamnya dengan meng-klik dua kali pada
button Grid yang berada pada toolbar, dan besarkan ukurannya hingga sebesar
ViewBox.
6. Klik dua kali pada Grid yang merupakan child dari ViewBox hingga berwarna kuning
sekitarnya. Pada AssetLibrary ketikan ListBox, kemudian gambarkan pada workspace
bagian agak bawah Window. Sehingga ListBox akan menjadi child dari Grid yang kita
buat pertama. Pilih ListBox tersebut kemudian lihat pada panel Properties, ubah
property Height-nya menjadi 18.352 dan Margin-nya menjadi seperti ukutan di bawah
ini.
7. Masih pada panel Properties, ubah BorderThickness dari ListBox tersebut menjadi 0.5
semua, baik kiri, kanan, atas, maupun bawah.
8. Tambahkan lagi sebuah Grid pada Grid yang sebelumya sudah kita buat pada workspace
dan gambarkan di atas ListBox.
9. Dan jika kita lihat tree yang ada pada panel Object and Timeline maka akan seperti di
bawah ini.
10. Kemudian klik dua kali pada Grid yang terakhir kita tambahkan hingga berwarna
kekuningan, pada AssetLibrary ketik Image, gambarkan pada Grid tersebut, dan letakan
agak di seblah kanan Window.
11. Tambahkan juga sebuah StackPanel (cari pada AssetLibrary), letakan di sebelah Image
yang tadi kita buat pada workspace. Ubah property margin dari sebelah kanan menjadi
33.678.
12. Sehingga letak StackPanel pada workspace akan menjadi seperti di bawah ini.
13. Klik dua kali pada StackPanel yang baru kita buat di atas hingga berwarna kekuningan
sekitarnya, masukan tiga buah TextBlock ke dalamnya. TextBlock yang pertama beri
ukuran height dan width seperti gambar di bawah ini.
14. Masih dalam keadaan StackPanel terpilih, kemudian TextBlock yang ke dua gambarkan
dengan ukuran di bawah ini.
15. Dan TextBlock yang ke tiga berikan nilai panjang dan lebar seperti di bawah ini.
16. Klik dua kali pada window yang berada di panel Object and Timeline. Ubah warna
backgroundnya menjadi sesuai selera. Dalam kali ini ambil saja contohnya seperti di
bawah ini.
17. Berikan background no brush pada ListBox.
18. Tampilan pada workspace kira – kira akan seperti di bawah ini.
Data binding
Data binding adalah salah satu keunggulan dari WPF, dimana dalam contoh kali ini kita akan
mencoba data binding dengan menggunakan Extensible Markup Language (XML). File XML ini
sifatnya berupa struktur seperti tree. Di dalam file XML ini kita akan masukan nama judul dari
game, pembuatnya, deskripsi, screenshot, dan gambar box masing – masing game. Berikut ini
adalah file XML yang akan kita gunakan. Copy text di bawah ini ke notepad kemudian save
dengan nama “GameData.xml”.
<?xml version="1.0" encoding="utf-8"?>
<Games>
<Game>
<Title>Gears of War</Title>
<Publisher>Microsoft / Epic Games</Publisher>
<Description>Blending the best of tactical action games with the best of
survival horror titles, "Gears of War" is the first game
developed by Epic Games exclusively for Microsoft Game
Studios and the Xbox 360 video game and entertainment system.
"Gears of War" thrusts gamers into a deep and harrowing story
of humankind's epic battle for survival against the Locust
Horde, a nightmarish race of creatures that surface from the
bowels of the planet.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\gowbox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\gowscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>Call of Duty 3</Title>
<Publisher>Activision / Treyarch</Publisher>
<Description>The follow-up to the #1 next-generation game, Call of Duty 3
delivers the intensity of being closer than ever to the fury
of combat during the Normandy Breakout, the historic
campaign that made the liberation of Paris possible and
brought the Allies a step closer to Berlin. Through a
seamless narrative that delivers the rush of unrelenting
battle and breathtaking action, players assume the roles of
four ordinary Allied soldiers—American, British, Canadian
and Polish—and are thrust onto an authentic, living
battlefield for an unprecedented variety of combat, with
advanced high-definition graphics, detailed character
animations and explosive on-screen action, delivering the
most immersive and cinematically intense war experience
ever.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\codbox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\codscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>Pro Evolution Soccer 6</Title>
<Publisher>Konami</Publisher>
<Description>With over 150 individual moves, techniques and tricks at
your disposal, pro Evolution Soccer 6 enables you to play the
Beautiful Game in any way you see fit. The latest in the
critically-acclaimed Pro Evolution series, this is legendary
producer Shingo "Seabass" Takatsuka`s greatest football
simulation to date. From slick passing moves to hard
tackling, crowd-pleasing exhibitions of individual skill to
dogged, desperate defending, no other game can rival its
ability to capture the essence and atmosphere of the real-
life sport.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\pesbox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\pesscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>WWE SmackDown vs. RAW 2007</Title>
<Publisher>THQ</Publisher>
<Description>WWE SmackDown vs. RAW 2007 enables players to experience the
intensity of being a WWE Superstar like never before with key
updates and new game play features. Environmental hotspots
let players select and control multiple objects in and around
the ring, as well as from crowd members, to inflict damage on
their opponents. Players can also get closer than ever to WWE
fans as they battle in an intense new fighting area outside
the ring. New high impact combination moves and an enhanced
Season Mode with multiple branching storylines let players
take control of Superstars like never before, while a brand
new Analog Control System adds intuitive movement and
improved handling to deliver competitive game play at the
next level.</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\wwebox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\wwescreen.jpg
</Screenshot>
</Game>
<Game>
<Title>Need for Speed: Carbon</Title>
<Publisher>Electronic Arts</Publisher>
<Description>What starts in the city is settled in the canyons as Need
for Speed Carbon immerses you in the world’s most dangerous
and adrenaline-filled form of street racing. You and your
crew must race in an all-out war for the city, risking
everything to take over your rivals’ neighborhoods one block
at a time. As the police turn up the heat, the battle
ultimately shifts to Carbon Canyon, where territories and
reputations can be lost on every perilous curve. Represent
your car class, your crew, and your turf in Need for Speed
Carbon, the next revolution in racing games.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\nfsbox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\nfsscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>FIFA 07</Title>
<Publisher>Electronic Arts</Publisher>
<Description>From the first whistle, FIFA 07 throws you into the
rollercoaster ride of a football season and the intense
stadium atmosphere of every home and away match. Relish every
satisfying victory over bitter rivals and live through every
gut-wrenching poor performance at home. Savour the spine-
tingling stadium atmosphere, home and away, as your team
battles their way up the league table. Listen as your
supporters chant your players' names and bellow all the
rousing club songs through rain and shine.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\fifabox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\fifascreen.jpg
</Screenshot>
</Game>
<Game>
<Title>Tony Hawk's Project 8</Title>
<Publisher>Activision / Neversoft Entertainment</Publisher>
<Description>Tony Hawk’s Project 8 immerses players in the definitive
skateboarding experience using ultra-realistic graphics,
enhanced physics and extremely responsive controls that
simulate the feeling of skating with every trick and bail.
The game challenges players to experience the intensity and
pressure of skating against some of the world’s top pros in
true to life competitions as they aim to become the #1 skater
and establish their town as a skateboard destination.
Delivering continuous skating action in a free-roaming living
environment, Tony Hawk’s Project 8 incorporates the series’
most popular features, all of which have been enhanced with
next-generation technology.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\tonybox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\tonyscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>F.E.A.R.</Title>
<Publisher>Vivendi / Monolith</Publisher>
<Description>F.E.A.R. (First Encounter Assault Recon) is an intense
combat experience with rich atmosphere and an engaging story
presented entirely in first person. Be the hero in your own
blockbuster action movie. The story begins as an unidentified
paramilitary force infiltrates a multi-billion dollar
aerospace compound, taking hostages but issuing no demands.
The government responds by sending in special forces, but
loses contact as an eerie signal interrupts radio
communications. When the interference subsides moments later,
the team has been obliterated. Live footage of the massacre
shows an inexplicable wave of destruction tearing the
soldiers apart before they can even react.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\fearbox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\fearscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>Tom Clancy's Splinter Cell: Double Agent</Title>
<Publisher>Ubi Soft</Publisher>
<Description>Veteran agent Sam Fisher is back. But he's never faced an
enemy like this before. To stop a devastating terrorist
attack, he must infiltrate a vicious terrorist group and
destroy it from within. For the first time ever, experience
the relentless tension and gut-wrenching dilemmas of life as
a double agent. Do whatever it takes to complete your
mission, but get out alive.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\tombox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\tomscreen.jpg
</Screenshot>
</Game>
<Game>
<Title>Dead Rising</Title>
<Publisher>Capcom Entertainment</Publisher>
<Description>The hero of the story is Frank West, a grizzled freelance
photographer who has made his way to an idyllic suburban town
to get his hands on the scoop. To his surprise, he soon
discovers that the town has been overrun with zombies. As he
fights tooth and nail against hordes of gruesome zombies,
Frank must discover the cause of the disturbing outbreak.
Full of mystery and thrills, this title is sure to please.
</Description>
<BoxImage>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\deadbox.jpg
</BoxImage>
<Screenshot>c:\Users\Kresna\Documents\Expression\Expression Blend
Projects\dataBinding2\dataBinding2\Images\deadscreen.jpg
</Screenshot>
</Game>
</Games>
Khusus untuk BoxImage dan Screenshot pada file XML, ganti path di atas dengan lokasi path
tempat image yang ada di masing – masing komputer. Untuk mendapatkan asset beserta file
XML di atas dapat di download terpisah.
Berikutnya kita akan belajar mem-bind data yang ada di file XML tersebut ke dalam aplikasi
yang kita buat di atas dengan menggunakan Expression Blend. Dengan Expression Blend kita
dapat dengan mudah melakukan proses data binding.
Di bawah ini adalah langkah – langkah untuk melakukan data binding pada Expression Blend.
1. Masukan file XML yang sudah kita buat ke dalam project, yaitu dengan klik kanan pada
solution kemudian pilih Add Existing Item dan pilih file XML yang sudah kita buat tadi.
2. Bikin sebuah folder baru dan isi dengan gambar – gambar yang ingin dimasukan ke
dalam aplikasi. Perhatikan file XML yang kita masukan, apakah path dari gambar dan
screen shot sudah benar.
3. Pada panel Project (berada di sebelah panel Properties) dan tab Data, pilih + XML untuk
membuat sebuah XML data source yang baru.
4. Maka akan muncul dialog box di bawah ini, ubah nama koneksinya menjadi
“GameData”, lalu pilih lokasi path file XML itu berada, pilih Ok.
5. Setelah kita masukan file XML tersebut kedalam project, klik dua kali pada Grid yang
pertama hingga berwarna kuning.
6. Pada panel properties, pilih Data Context, advanced property options.
7. Kemudian akan muncul seperti di bawah ini, pilih Data binding.
8. Setelah kita pilih data binding, akan muncul lagi sebuah window, pilih tab Data Field,
pada Data Sources pilih GameData, dan pada fields expand Games, pilih Game(Array)
seperti di bawah ini, lalu pilh finish.
9. Setelah di atas kita membuat sebuah data source baru, sekarang kita akan mem-bind
ListBox menjadi sebuah list yang isinya adalah gambar – gambar box game yang ada
pada XML. Klik dua kali pada ListBox hingga berwarna kekuningan sekitarnya, pada
panel Properties dan tab Common Properties pilih Advanced Property option dari
ItemSource.
10. Setelah kita pilih advanced property option dari ItemSouce, pilih Data binding. Pilih tab
Explicit Data Context, expand fileds Games, pilih Game(Array), jangan pilih finish dulu
tetapi pilih Define Data Template.
11. Secara default semua yang ada pada file XML akan di check list, kita hilangkan semua
kecuali BoxImage. Di sebelahnya terdapat sebuah drop down list yang secara default
adalah TextBlock, namun kita ganti dengan Image, pilih Ok.
12. Kalau kita lihat di workspace gambarnya akan terlalu besar sampai hanya scroll bar saja
yang terlihat. Sekarang kita akan mencoba untuk membenarkannya. Klik kanan pada
ListBox, pilih Edit Other Template, Edit Generated Item (Item Template), lalu edit
template.
13. Secara otomatis objek – objek yang ada pada panel Object and Timeline berubah, dan
kalau kita lihat terdapat sebuah objek Image. Kita pilih Image, kita set property height
dan width-nya menjadi 14 dan 9.
14. Setelah itu pilih Return scope to Window yang berada di panel Object and Timeline.
15. Tetapi jika kita lihat lagi, item yang ada di dalamnya akan memanjang ke bawah
(vertical). Ini terjadi karena secara default ListBox akan menempatkan item – item di
dalamnya secara vertical. Klik kanan kembali pada ListBox, Edit Layout of Items
(ItemsPanel), Edit a Copy.
16. Akan muncul sebuah Window yang menanyakan nama dari ItemPanel yang kita buat,
biarkan saja nama default-nya dan pilih Ok.
17. Pilih [VirtualizingStackPanel], pada panel Properties, terdapat sebuah property
Orientation dimana default-nya adalah vertical. Kita ganti dengan horizontal.
18. Kemudian pilih Return scope to Window, untuk meilihat hasilnya.
19. Item yang ada pada ListBox sudah berubah menjadi horizontal, namun jarak antara item
yang ada terlalu dekat. Maka klik kanan pada ListBox, Edit Generated Template, edit
template.
20. Kita pilih Image, lalu set margin kanannya menjadi 2.
21. Lalu pilih Return scope to Window. Pada panel Properties ListBox, expand tab Laoyut, di
sana terdapat property HorziontalScrollBarVisibility dan VerticalScrollBarVisibility. Kita
set yang tadinya Auto menjadi Disabled untuk ke dua property tersebut.
22. Coba kita lihat pada workspace, jika langkah yang diikuti sesuai maka tampilannya akan
seperti ini.
23. Dengan langkah – langkah di atas maka ListBox telah siap dipakai dan sudah di define
sebagai data template. Sekarang kita akan mem-bind image dari XML, jika kita pilih
game yang ada pada ListBox maka pada Image akan tampil ScreenShotnya. Klik Image
yang berada di dalam Grid yang ke dua.
24. Pada panel Properties, tab Common Properties, terdapat property Source, pilih
Advanced property options, lalu pilih Data binding.
25. Kemudian akan muncul sebuah Window, pilih Explicit Data Context, pada Fields expand
Games, lalu expand Game(Array), lalu pilih Screenshot: (String), dan Finish.
26. Sekarang coba jalankan aplikasi yang sudah kita buat dengan menekan tombol F5 pada
keyboard. Ketika kita pilih game yang ada pada ListBox maka Screen shotnya akan
berganti sesuai dengan jenis gamenya.
27. Sekarang kita akan mem-bind tiga buat TextBlock, TextBlock yang pertama fungsinya
untuk judul game, yang ke dua untuk pembuat game tersebut, dan yang ke tiga adalah
deskripsi dari game yang dipilih. Pilih TextBlock yang pertama (paling atas di antara yang
lainnya) hingga berwarna kuning sekitarnya.
28. Pada panel Properties, tab Common Properties, terdapat property text. Pilih Advance
property options, Data binding.
29. Pada Window Create Data binding, pilih Explicit data context, pada Fields expand
Games, expand lagi Game, pilih Title: (String).
30. Kecilkan font TextBlock hingga menjadi tujuh, agar pas dengan ukuran TextBlock.
31. Sekarang kita pindah ke TextBlock yang ke dua, langkah – langkahnya sama dengan di
atas, hanya berbeda pada ketika Create data binding saja, yaitu yang harus dipilih
adalah Publisher: (String). Kemudian pilih Finish.
32. Ubah ukuran fontnya menjadi 5. Caranya adalah ketik secara manual pada dropdown list
tersebut.
33. Dan untuk TextBlock yang terakhir sama juga caranya dengan yang di atas, namun yang
dipilih adalah Description: (String). Dan ubah ukuran fontnya menjadi 2.5.
34. Setelah ke tiga TextBlock sudah kita bind, agar tulisannya terlihat kita ganti warna font
menjadi putih. Pada panel Porperties, pilih foreground, dan ganti dengan warna putih.
35. Sekarang coba jalankan aplikasi untuk melihat jalannya data binding yang sudah kita
buat di atas.
Merubah Gambar 2D Menjadi 3D
Agar aplikasi yang kita buat menjadi lebih menarik, kita akan merubah gambar screen shot yang
sudah dibuat menjadi gambar 3D. berikut ini adalah langkah – langkahnya:
1. Kita pilih Image yang berada pada Grid yang pertama.
2. Pada Tools, pilih Make Image 3D. secara otomatis yang tadinya hanya sebuah Image,
berubah menjadi Viewport3D.
3. Expand Viewport3D tersebut sampai terlihat sebuah object yang bernama Model.
4. Pada panel Properties, expand Transform, pilih tab Rotate, dan ubah nilai Y menjadi -25.
5. Coba jalankan aplikasi dengan menkan tombol F5 pada keyboard.
Membuat Animasi 3D
Setelah kita sudah bisa membuat gambar 3D, kita akan mencoba menganimasikan gambar 3D
tersebut. Yang akan kita lakukan adalah ketika item yang ada pada ListBox di pilih maka gambar
3D tersebut akan beranimasi seperti flip atau terbalik. Untuk lebih jelasnya di bawah ini adalah
langkah – langkahnya:
1. Pada panel Object and Timeline, pilih tanda (+) untuk membuat storyboard baru, dan
beri nama dengan “Flip”.
2. Pada detik ke nol, pilih StackPanel yang berisi tiga buah TextBlock hingga berwarna
kekuningan sekitarnya.
3. Kemudian pada panel Properties ubah Opacity-nya menjadi nol.
4. Pindahkan timeline ke detik 0.5 dan ubah kembali Opacity dari StackPanel menjadi 100
lagi. Tujuannya adalah ketika item yang berada pada ListBox dipilih akan memberikan
efek fade pada judul dan deskripsi game yang dipilih.
5. Kembalikan lagi timeline pada detik ke nol. Expand Viewport3D, pilih model dan pada
panel Properties pilih Transform, pilih tab Rotate, set nilai X nya menjadi 180.
6. Masih pada Model dari Viewport3D, geser timeline menjadi detik ke 0.5, ubah kembali
nilai X menjadi 360, lalu tekan enter.
7. Pilih Close Storyboard yang berada pada panel Object and Timeline.
8. Untuk memberikan kesan lebih nyata, kita tambahkan warna pda bagian belakang
gambar 3D tersebut. Karena secara default gambar 3D tersebut tidak memiliki warna
pada bagian belakangnya. Kita pilih kembali Model, lalu pada panel Proerties terdapat
sebuah tab Materials, expand tab tersebut, klik pada BackMaterial, dan klik gambar
tanda (+).
9. Kemudian pilih Solid Color Brush pada Texture Brush, pilih warna sesuai selera, misalkan
kita ambil warna hitam.
10. Setelah kita sudah selesai membuat animasi di atas, tinggal kita mengatur Trigger pada
panel Interaction. Secara default sehabis kita membuat sebuah animasi maka aka nada
sebuah Trigger, Window.Loaded. klik Trigger tersebut, klik dua kali pada ListBox, ubah
dropdown list yang tadinya Window menjadi ListBox
.
11. Kemudian pada dropdown list berikutnya, ubah yang tadinya adalah Loaded menjadi
SelectionChanged.
12. Maka di bawahnya animasi yang akan dijalankan adalah Flip.Begin.
13. Jalankan aplikasi dengan menkan tombol F5 pada keyboard. Jika kita kecilkan window
dari aplikasi ini maka isinya pun akan menyesuaikan dengan besarknya ukuran window.
Karena kita menggunakan ViewBox, dimana secara otomatis posisi objek yang ada di
dalamanya akan menyesuaikan dengan ukuran Window yang ada.
Windowles Application & Compatibility with Visual Studio 2008
Satu hal lagi yang menarik dari WPF adalah kita dapat dengan mudah membuat Windowless
application. Yang dimaksud dengan windowless adalah aplikasi yang berjalan tidak dikelilingi
oleh kotak, dimana di pojok kanan atas terdapat tiga buah button (minimize, restore, dan
close). Dengan adanya fitur ini maka kita dapat lebih meng-customize aplikasi yang kita buat.
Langkah – langkah untuk membuat contoh aplikasi di atas adalah:
1. Klik dua kali pada objek Window yang ada di panel Object and Timeline hingga berwarna
kuning sekitarnya.
2. Kemudian lihat pada panel Properties, terdapat sebuah property AllowsTransperancy.
Centang atau klik property tersebut dan pilih none pada property WindowStyle.
3. Coba jalankan aplikasi dengan menekan tombol F5 pada keyboard, dapat dilihat tidak
ada border yang biasanya mengelilingi aplikasi pada Windows. Namun karena tidak ada
tombol close, maka kita harus mematikan aplikasi ini dengan klik kanan kemudian pilih
close.
4. Maka dari itu kita akan tambahkan sebuah button untuk menutup aplikasi ini. Di sini kita
tidak akan kembali membuat sebuah button dengan template yang menarik, tetapi di
sini akan ditunjukan bagaimana Expression Blend bisa berkomunikasi dengan baik
dengan Visual Studio 2008 Proffesional ataupun Team Suite. Klik dua kali pada Grid yang
berada paling atas, kemudian masukan button ke dalamnya, dan beri nama dengan
“close”.
5. Pada panel Properties, pilih tombol Events yang berada di sebelah nama dari button
tersebut.
6. Terdapat banyak list dari event yang ada pada sebuah button. Dalam hal ini kita akan
menggunakan event Click, beri nama misalkan “close_window”, lalu tekan enter.
7. Maka secara otomatis Micorosoft Visual Studio 2008 akan terbuka dan langsung
membuatkan method untuk event ini.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;
namespace Sample1
{
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
this.InitializeComponent();
// Insert code required on object creation below this
point.
}
private void close_window(object sender, RoutedEventArgs e)
{
}
}
}
8. Pada Visual Studio tuliskan potongan code yang berwarna kuning di bawah ini.
private void close_window(object sender, RoutedEventArgs e)
{
this.Close();
}
9. Coba jalankan aplikasi tesebut dengan menekan F5. Jika ingin menutup aplikasi tersebut
coba gunakan button yang sudah kita buat di atas.
Dengan contoh di atas kita sudah bisa membuat sebuah aplikasi yang kira – kira dapat menjadi
inspirasi kita dalam mebuat aplikasi di kehidupan sehari – hari. Contoh yang terakhir ini
merupakan gambaran penggunaan dari keseluruhan tools Expression Blend. Dan dapat dilihat
dengan menggunakan WPF, aplikasi yang dihasilkan dapat menjadi lebih kreatif dan inovatif.
Silverlight 2.0
Dalam bab ini kita akan mencoba mempelajari sedikit tentang Microsoft Silverlight 2.0 yang
dipandang atau dilihat dari sisi Expression Blend 2 Service Pack 1. Tentunya yang akan dibahas
pada bab ini tidak terlalu banyak, mengingat Silverlight 2.0 menggunakan C# sebagai code
behind (ini menyebabkan banyak yang harus dilakukan pada Visual Studio) dan tujuan dari buku
ini adalah bagaimana kita menggunakan Expression Blend untuk membuat aplikasi Silverlight.
Sehingga yang akan dibahas pada bab ini hanyalah segala sesuatu yang berhubungan dengan
Silverlight 2.0 dengan menggunakan Expression Blend.
Perjalanan Silverlight
Sebelum Sialverlight menjadi SIlverlight 2.0 Ready to Web (RTW), terdapat beberapa versi
sebelumnya. Petama kali Silverlight keluar adalah versi 1.0, dimana menggunakan Java script
untuk code behind-nya. Kemudian Silverlight kembali mengeluarkan versi terbarunya yaitu
SIlverlight 1.1 Alpha Refresh, dimana terdapat perbedaan yang cukup signifikan dibandingkan
dengan Silverlight versi 1.0.
Setelah versi Silverlight 1.1, Microsoft kembali bengeluarkan Sivlerlight 2.0 Beta 1. Pada versi ini
SIlverlight menggunakan bahasa C# sebagai code behind. Lalu keluar Silverlight 2.0 Beta 2, versi
ini cukup lama digunakan sebelum akhrinya Silverlight Release Candidate 0 keluar. Namun
Silverlight 2.0 RC 0 hanya berlangsung sebentar karena Microsoft sudah resmi mengeluarkan
Silverlight 2.0 versi released-nya.
Sayangnya adalah website yang dibangun di atas Silverlight 2 beta 2 tidak akan lagi ketika kita
sudah meng-install SIlverlight 2.0 RTW. Akan muncul seperti gambar di bawah ini, dimana kita
diminta untuk meng-install Silverlight versi yang terbaru, yaitu SIlverlight 2.0 RTW.
Install Microsoft Silverlight
Cara yang paling mudah untuk meng-install Silverlight adalah cukup mengunjungi
http://www.microsoft.com/silverlight/. Dari situ kita akan tahu versi berapa yang kita punya
dan kita bisa tahu versi terakhir yang ada, kemudian kita bisa langsung mendapatkan Silverlight
2.0 RTW Runtime. Jika kita belum meng-install sama sekali, maka akan mendapatkan seperti
gambar di bawah.
Jika kita sudah pernah meng-install Silverlight 2 beta 2 dan kita mengunjungi alamat website di
atas, maka akan tampil halaman seperti di bawah ini.
Dan kalau sebelumnya kita sudah meng-install Silverlight 2 RC 0, maka akan muncul peringatan
yang mirip dengan di atas namun berbeda pada current version Silverlightnya.
Kalau kita sudah berhasil atau sudah meng-install SIlverlight 2 RTW maka akan ada
pemberitahuan bahwa kita telah sukses meng-install versi terakhir dari Silverlight dan sudah
siap menggunakan Microsoft Silverlight. Jika merasa sudah meng-install namun ketika kita
mengunjungi alamat website di atas masih belum seperti gambar di bawah ini, coba restart
browser yang digunakan.
Untuk lebih jelasnya dapat kita kunjungi blog dari saudara Wely, dimana di sana sudah tedapat
keterangan yang jauh lebih komplit dan terdapat juga beberapa link local untuk men-download
Silverlight 2.0 RTW Runtime, Silverlight 2.0 SDK, dan Silverlight tools for Visual Studio 2008 SP 1.
Expression Blend Toolbar untuk Silverlight 2.0
Pada umumnya semua tools yang ada ketika kita membuat aplikasi SIlverlight 2.0 dengan
Expression Blend akan sama dengan cara penggunaan tools yang ada pada Expression Blend
ketika kita membuat aplikasi WPF. Coba kita buat sebuah project baru pada Expression Blend
dengan nama “BeginningSilverlight”.
Coba kita lihat toolbar yang ada setelah kita membuat project Silverlight baru, hampir tidak ada
perbedaan. Hanya saja control – control yang ada pada Silverlight 2.0 tidak sebanyak control
yang ada ketika kita memubat aplikasi WPF. Namun secara garis besar semua tools yang ada
pada Silverlight 2.0 sudah dijelaskan pada bab Expression Blend Toolbar untuk WPF. Cara
penggunaan dan prinsip dasar dari control yang ada di Silverlight 2.0 tidaklah berbeda.
Kita ambil saja contoh untuk input control yang ada pada SIlverlight 2.0, hanya terdapat dua
buah yaitu, TextBlock dan TextBox.
Ada satu hal yang berbeda antara WPF dan Silverlight 2.0 yaitu, pada WPF terdapat panel
Triggers sedangkan pada Silverlight terdapat panel States. Mengenai States pada SIlverlight
akan dijelaskan pada bab selanjutnya secara lebih detail.
Pengenalan States pada Silverlight 2.0
Di sini kita akan membahas mengenai apa itu States pada Silverlight 2.0, bagaimana cara
membuat States, dan bagaimana pengaplikasiannya pada sebuah aplikasi. Secara garis besar,
States sangatlah mirip fungsinya dengan Trigers pada WPF. Dengan States kita dapat membuat
animasi atau actions untuk aplikasi SIalverlight kita. Untuk memahaminya langsung saja kita
gunakan contoh agar dapat lebih jelas mengenai apa itu states dan bagaimana membuat
sebuah States sederhana. Berikut ini adalah langkah – langkahnya:
1. Masih menggunakan Project yang baru kita buat di atas, yaitu “BeginningSilverlight”.
2. Masukan sebuah gambar ke dalam project. Pada panel Project, klik kanan pada solution,
pilih Add existing item, dan pilih gambar yang ingin dimasukan ke dalam project.
3. Setelah gambar tersebut masuk ke dalam project, klik dua kali gambar tersebut yang
berada pada panel Project agar gambar tersebut masuk kedalam workspace. Kecilkan
gambar yang ada pada workspace.
4. Pada panel States tekan button Add State Group.
5. Rename menjadi “MouseInteraction”. Perlu diketahui bahwa nama yang kita berikan di
sini tidak akan berpengaruh kepada fungsionalitas dari states itu nantinya.
6. Pada Group States “MouseInteraction”, tambahkan state dengan menekan tombol Add
state yang berada di sebelah nama Group States.
7. Ubah namanya menjadi “normal”. Sekali lagi nama yang diberikan di sini tidak akan
mempengaruhi fungsionalitas dari states yang akan dibuat nantinya. Sekitar workspace
langsung berwarna merah, yang adtinya apapun yang kita lakukan sekarang akan
menjadi sifat si state “normal”.
8. Tambahkan lagi sebuah state pada Group States “MouseInteraction” dengan nama
“Click”. Untuk membuatnya ikuti langkah sebelumnya.
9. Kemudian kita pilih state “click” hingga pada panel Object and Timeline terdapat nama
“click”. Pilih Image yang sudah kita masukan tadi ke dalam workspace, lihat panel
Properties, pada tab Transform pilih scale, ubah nilai X dan Y menjadi 1,5.
10. Setelah kita memubat animasi seperti di atas, pilih kembali Base yang berada pada panel
States.
11. Tambahkan potongan code di Visual Studio 2008 untuk mengaktifkan states yang sudah
kita buat. Caranya adalah, pilih pada panel properties pilih Events.
12. Berikan nama pada event MouseLeftButtonDown “goCLick” dan berikan juga nama pada
event MouseLeftButtonUp “goNormal”.
13. Ketika kita selesai mengetik satu buah event, maka akan secara otomatis Visual Studio
akan terbuka dan membuatkan method dari event yang akan kita buat. Tambahkan
potongan code yang berwarna kuning di bawah ini pada Visual Studio.
private void goClick(object sender, MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this, "click", true);
}
private void goNormal(object sender, MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this, "normal", true);
}
14. Tambahkan waktu 0.3s pada panel States dengan tujuan animasi akan berjalan selama
0.3 detik atau dengan kata lain image akan mebesar dengan ukuran image yang sudah
di Transform menjadi 1.5 pada detik ke 0.3.
15. Coba jalankan aplikasi dengan menekan tombol F5 pada keyboard.
16. Agar lebih menarik kita tambahkan satu buah state lagi yaitu “over” pada Group States
“MouseInteraction”.
17. Pilih state “over”, pada panel Transofrm pilih Scale, ubah nilai dari X dan Y menjadi 1.05.
18. Tambahkan event MouseEnter dengan nama “goOver” dan event MouseLeave dengan
nama “goLeave”.
19. Tidak lupa tambahkan potongan code di bawah ini ke dalam Visual Studio yang secara
otomatis akan terbuka ketika kita selesai mengetik nama dari event.
private void goOver(object sender, MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this, "over", true);
}
private void goLeave(object sender, MouseButtonEventArgs e)
{
VisualStateManager.GoToState(this, "normal", true);
}
20. Coba jalankan aplikasi dengan menekan tombol F5 pada keyboard. Jika kita perhatikan
semua animasi dari state “over” ke state “click” atau ke state yang lainnya berjalan
dengan baik, namun animasi antar state tersebut semuanya memiliki nilai 0.3s. hal ini
terjadi karena kita memberikan waktu 0.3s pada Group States, sehingga state – state
yang ada di dalamnya mengikuti waktu yang diberikan pada Group Statez. Sekarang kita
akan mengatur waktu animasi sewaktu transisi dari “over” ke “click”.
21. Pilih Add Transition yang ada di sebelah state “over”.
22. Kemudian akan muncul seperti tampilan di bawah, pilih “over” → “click”.
23. Kemudian ubah waktu “click” yang sekarang ada di bawah state “over” menjadi 0.1s.
24. Coba jalankan aplikasi di atas dengan menekan tombol F5 pada keyboard, aplikasi
berjalan dengan sangat baik.
Case Study: Membuat Button pada Silverlight 2.0
Setelah kita sudah mengenal States pada Silverlight 2.0, sekarang kita akan mencoba membuat
sebuah button pada Silverlight 2.0. Namun button yang akan kita buat tidak akan bagus –
bagus, karena intinya adalah bangaimana kita bisa membuat sebuah button pada Silverlight.
Jadi yang akan kita lakukan berikutnya adalah dasar – dasar atau konsepnya saja. Berikut ini
adalah langkah – langkahnya.
1. Misalkan kita buat sebuah project baru Silverlight 2.0 dengan nama “ButtonSilverlight”.
2. Buat sebuah Grid pada workspace, kemudian masukan di dalamnya sebuah ellipse dan
beri warna sesuai dengan selera masing – masing.
3. Klik dua kali pada Grid yang baru kita buat hingga berwarna kuning, kemudian pada
Tools pilih Make Button.
4. Akan muncul sebuah window yang menanyakan nama dari style yang akan kita buat.
Beri saja nama “RedButton”.
5. Maka Grid yang berisi sebuah ellipse akan dibungkus menjadi sebuah button. Ubah
ukuran text menjadi 14 dan di bold.
6. Pada bagian atas workspace terdapat dropdown list yang bernama button, klik dan pilih
Edit Control Parts (template), lalu Edit Template.
7. Coba kita lihat panel States, terdapat state - state bawaan dari button. Pilih MouseOver.
8. Pilih Grid, lalu pada panel Transform pilih tab Scale, ubah nilai X dan Y menjadi 1.1.
9. Lalu kita pilih state Pressed pada panel States. Pilih ellipse dan ubah warnanya, misalkan
dari merah maka ketika di klik akan seperti gambar di bawah ini.
10. Coba jalankan aplikasi dengan menekan tombol F5 pada keyboard, maka ketika cursor
masuk ke dalam button, button akan membesar, dan letika di klik, warnanya akan
berubah menjadi seperti kuning di atas.
11. Jika kita ingin menggunakan style yang tadi pada sebuah button baru maka cukup pilih
Apply Resource dan cari “RedButton”.
Deep Zoom dengan Deep Zoom Composer
Deep Zoom adalah sebuah sebutan aplikasi yang menggunakan teknologi Silverlight 2.0, dimana
kita bisa melakukan zoom in dan zoom out terhadap sebuah gambar. Microsoft mengeluarkan
sebuah tools yang interfacenya mirip sekali dengan Expression Blend yaitu, Deep Zoom
Composer. Untuk mendapatkan aplikasi Deep Zoom Composer, dapat di download pada alamat
ini.
Dengan menggunakan Deep Zoom Composer kita dapat dengan mudah membuat aplikasi
SIlverlight 2.0 yang berisikan gambar – gambar yang dapat kita zoom in dan zoom out secara
bebas. Bahkan cukup dengan melakukan scroll pada mouse, kita sudah dapat melakukan zoom
in dan zoom out. Berikut ini adalah langkah – langkah untuk mebuat aplikasi deep zoom.
1. Buka aplikasi Deep Zoom Composer dan buat project baru dengan nama misalkan
“Wow”.
2. Pada tahap satu kita masukan terlebih dahulu gambar – gambar yang ingin dimasukan
kedalam aplikasi deep zoom.
3. Kemudian kita pilih tahap ke dua yaitu, Compose.
4. Pada tahap ini lakukan drag and drop dari panel sebelah kanan ke area kosong yang
berada d tengah secara satu persatu. Misalkan untuk gambar pertama kita masukan
satu gambar dulu.
5. Kemudian untuk gambar ke dua akan kita letakan terpencil di pojok kanan bawah,
caranya adalah scroll mouse hingga gambar menjadi ter-zoom, lalu masukan gambar ke
dua.
6. Lalu untuk gambar ke tiga akan kita masukan pada gambar ke dua yaitu, dengan kita
zoom dahulu gambar ke dua baru kita masukan gambar ke tiga.
7. Kemudian pilih tahap ke tiga yaitu Export.
8. Kemudian pilih tab Silverlight Export, berikan nama misalkan “Pertamax” dan pilih
settingan seperti di awah ini.
9. Setelah selesai di export maka akan muncul sebuah Window yang menanyakan empat
hal, lihat hasilnya di browser sekarang, lihat folder gambar yang dihasilkan, lihat folder
tempat project itu ada, dan learn more. Langsung saja pilih Preview in Browser.
10. Untuk zoom in dan zoom out cukup dengan scrolling pada mouse, atau juga untuk zoom
in dapat dilakukan dengan klik. Jika kita drag maka gambar tersebut akan bergeser juga.
Untuk aplikasi yang tadi kita buat dalam sebuah gambar SIlverlight kita masukan sebuah
gambar boneka, lalu kalau kita zoom pada bagian perutnya terdapat sebuah gambar
yang ke tiga.
Contoh di atas merupakan penutup dari bagian Silverlight 2.0 ini. Diharapakan dengan contoh –
contoh yang ada dapat mengembangkannya lebih lanjut lagi, karena sebenarnya masih banyak
sekali bagian Silverlight 2.0 yang dapat dipelajari lebih dalam, namun mengingat tujuan dari
buku ini adalah kita dapat membuat aplikasi dengan Expression Blend maka hanya inilah
cakupan yang dapat dituliskan.