Dahulu untuk membuat animasi sebuah objek yang bergerak mengikuti sebuah path di Silverlight adalah sebuah pekerjaan yang cukup rumit. Dalam Blend tidak ada dukungan path animation seperti yang ada di kakaknya (WPF). Namun jangan khawatir di API Silverlight 4 telah ada sebuah tipe layout baru bernama PathListBox yang dapat kita gunakan untuk membuat animasi tipe ini. Bagaimana caranya? cukup mudah silahkan ikuti step-by step dibawah ini:
1. Buka Blend 4 Beta dan buat sebuah proyek Silverlight biasa
2. Tambahkan sebuah PathListBox kedalam proyek anda. Anda dapat melakukannya dengan cara menekan tombol Asset yang ada dibagian paling bawah dari toolbox dan kemudian ketik path lalu pilih PathListBox dan lakukan double click untuk secara otomatis menambahkan elemen tersebut.
3. Kemudian buat jalur animasinya yang dapat berupa eclipse, rectangle, line atau path. Mari kita coba yang path saja, silahkan pilih Pen dan gambarkan sembarang path seperti contoh dibawah ini :
4. Pilih kembali PathListBox yang tadi ditambahkan dilangkah pertama dan perhatikan bagian Layout Paths. Tekan tombol bundar berwarna putih yang ada disana dan arahkan ke Path yang tadi dibuat pada langkah ketiga.
5. Langkah selanjutnya adalah menambahkan sebuah objek kedalam PathListBox yang ada, silahkan tambahkan sebuah eclipse ke dalam pathlistbox tersebut
6. Buat sebuah storyboard baru, storyboard inilah yang akan menganimasikan pergerakan objek kita.
7. Pilih objek pathlistbox dan pindahkan timeline animasi ke detik kedua dan tekan tombol “Record Keyframe”
8. Perhatikan kembali bagian Layout Paths dan ubah bagian Start menjadi 100%.
Sekarang silahkan mainkan storyboard ini dan perhatikan bahwa pergerakan ellipse telah mengikuti path yang tadi dibuat!
cheers
ronald