user experience in wpf and silver light with expression blend

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

http://expression.microsoft.com/en-au/cc136523.aspx

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.

http://www.live.com/

http://www.live.com/

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*"/>


</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>



</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



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"








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



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>


Projects\dataBinding2\dataBinding2\Images\codbox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\pesbox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\wwebox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\nfsbox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\fifabox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\tonybox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\fearbox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\tombox.jpg

</BoxImage>


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>


Projects\dataBinding2\dataBinding2\Images\deadbox.jpg

</BoxImage>


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.

http://www.microsoft.com/silverlight/

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”.

http://geeks.netindonesia.net/blogs/wely/archive/2008/10/14/silverlight-2-0-has-released.aspx

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.

http://blogs.msdn.com/expression/archive/2008/10/14/deep-zoom-composer-updated-for-silverlight-2-and-more.aspx

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.