Membuat Animasi ChildWindow pada Silverlight

Nah, kali ini kita akan mencoba membuat animasi sederhana dengan menampilkan ChildWindow pada Silverlight. Sebelumnya pastikan dulu bahwa di komputer/laptop Anda telah terinstall Microsoft Expression Studio 3/ Microsoft Expression Studio 4.

1. Langkah pertama, buka Expression Studio lalu klik Expression Blend (kali ini saya menggunakan Blend 3). Setelah terbuka klik File, New Project, pada kolom Name isi sesuai keinginan Anda . Namun untuk menyamakan saja, kita namai dengan Silverlight1. Jangan lupa pada Languge pilih Visual C#, karena bahasa yang akan kita gunakan adalah C#. Klik OK.

2. Pada window MainPage.xaml kita buat user interface project kita dengan Rectangle. Biar kelihatan lebih bagus kita beri warna dengan cara pilih warna pada Properties yang ada pada sebelah kanan Window kita. Pada RadiusX dan RadiusY isi saja 20 biar pojoknya terlihat lebih menarik.

3. Tambahkan sebuah button dengan cara Drag N Drop button yang ada pada Assets (di sebelah kanan Window). Dan ganti nama button tersebut menjadi Nama pada Properties, Content.

4. Pada Project (sebelah kanan), klik kanan Silverlight1, Add New Item.., dan pilih ChildWindow, dan OK.

5. Klik button Nama pada MainPage.xaml, arahkan pointer ke Properties dan klik Events, lalu double klik click.

6. Lalu ikutilah codingan seperti dibawah ini.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Silverlight1
{
  public partial class MainPage : UserControl
  {
     public MainPage()
     {
        // Required to initialize variables
        InitializeComponent();
     }

     private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
     {
        ChildWindow1 saya= new ChildWindow1();
        saya.Show();
     }
  }
}

7. Kemudian jalankan dengan cara tekan F5. Setelah project kita ditampilkan pada browser, klik button Nama. Anda bisa mengisi tampilan ChildWindow Anda sesuai kreativitas Anda misal ditambah foto, teks, dsb dengan memasukkan foto, teks, dsb ke dalam ChildWindow1.xaml .

Selamat mencoba... ^_^