Textbox dan Button Silverlight dengan Microsoft Expression Blend 3

Hi, guys.. Pada tutorial kali ini, kita akan belajar tentang dasar-dasar Textbox dan Button Silverlight. Tool yang akan kita gunakan adalah Microsoft Expression Blend 3 (pastikan sudah terinstal di komputer kamu) dan tentunya .Net Framework 3.5 SP1 dan pastikan juga browser default kamu sudah terinstal plug-in Silverlight. Kalau semua bahan sudah tersedia, baru kita mulai memasak. Siap? Ayo buka Expression Blend 3 kamu dan kita mulai ngoprek sama-sama..

1. Setelah Expression Blend terbuka, pilih New Project, lalu pilih Silverlight 3 Application + Website. Silahkan pilih nama file yang kamu suka, pilih Visual C# dalam drop-down-list Language (lihat lingkaran merah di Gambar 1), dan tekan OK.

Gambar 1. New Project.

2. Kemudian muncullah MainPage.xaml dengan sebidang ruang kosong yang bisa kita gunakan untuk berekspresi. Sekarang klik tab Assets di sebelah kiri layar (di sebelah tab Project) lalu cari TextBox (Gambar 2). Ketemu? Nah, sekarang drag-drop saja TextBox itu ke bidang kerja kita dan atur ukurannya sesuka hati.

Gambar 2. Tab Assets, cari TextBox.

3. Pastikan TextBox yang telah kita buat dalam keadaan terseleksi. Kemudian pada tab Properties di sebelah kanan layar, masukkan nama TextBox pada kolom Name. Misalkan kita beri nama TextBoxSatu (Gambar 3).

Gambar 3. Ubah nama TextBox.

4. Sekarang, kita akan membuat button. Cari button di tab Assets (seperti langkah 2), kemudian drag-drop ke bidang kerja. Ubah tulisan pada tombol dengan cara klik kanan pada button dan pilih Edit Text (dapat dilakukan juga pada TextBox).

5. Beri nama button seperti pada langkah 3. Beri nama ButtonGue.

6. Cari TextBlok pada tab Assets (seperti langkah 2), drag-drop ke bidang kerja dan ubah nama TextBlok kita (seperti langkah 3) menjadi BoxHasil.

7. Klik button yang telah kita buat tadi, kemudian pada tab Properties (lihat gambar 3), klik gambar petir di bagian paling kanan. Tombol tersebut akan membuka property event tombol kita.

8. Klik dua kali pada input box Click (Gambar 4), maka akan terbuka MainPage.xaml.cs.

Gambar 4. Double Click di sini.

9. Berikutnya, ketikkan kode ini

private void ButtonGue_Click(object sender, System.Windows.RoutedEventArgs e)
{
String IsiTextBox = TextBoxSatu.Text;
/*
Baris di atas ini fungsinya untuk menyimpan
isi text box yang udah kita bikin ke dalam
sebuah variabel string.
*/
BoxHasil.Text = "Halo "+IsiTextBox+"... \nApa kabar?";
/*
Baris berikutnya fungsinya untuk menampilkan kata-kata (string) tertentu
ke dalam text block yang udah kita bikin tadi. Yang dalem tanda
kutip itu adalah string trus tanda plus (+) itu untuk
ngegabung string satu (misalkan "Halo") dengan string IsiTextBox.
*/
}