Basic TabControl di C# WPF VS2010

Pada postingan kali ini akan dipelajari dasar-dasar penggunaan TabControl di C#-WPF. Pertama-tama, mari kita buat project baru di visual studio 2010 :

Tekan OK untuk masuk ke main project. Setelah itu tambahkan 1 buah TabControl,

Kemudian ganti properti dari TabControl tersebut seperti terlihat :

Kemudian tambahkan tabItem lain dalam TabControl dengan menggunakan klik item(collection) :

Klik tombol "Add" dan beri nama sesuai dengan keinginan :

Di sini ditambahkan 2 biji tab lagi seperti terlihat di bawah :

Kemudahan diberikan oleh C# adalah setelah kita menambahkan tabnya, kita bisa langsung memberi kontrol-kontrol diatas tab tersebut. Hal ini berbeda jauh jika menggunakan MFC. Nah jadi sebenarnya basicnya boleh dibilang sampai disini saja. Langkah selanjutnya terserah kita mau diarahkan kemana aplikasi yang dibuat. Misalnya dengan mengubah settingan lain pada tab, atau menambahkan element-element lain sesuai keinginan. Untuk project ini, pada tab pertama :

Di TabItem pertama ini digunakan 1 biji button dan imaje kontrol dan telah diisi dengan gambar bunga hehe.. :-). Nah untuk tabItem pertama ini kita bisa langsung men-drag item dari toolbox dengan mudah. Karena secara otomatis VS telah menambahkan element "grid" dalam tabItem ini. Namun untuk tabItem berikutnya kita harus menambahkan sendiri element grid-nya. Caranya bisa langsung diketik dibagian file xml :

Selain element grid, ditambahkan juga identitas untuk masing-masing tabItem tersebut yaitu second & third.
Next, kita bisa langsung drag element untuk tabItem kedua :

Untuk tabItem terakhir :

Nggg... berikutnya kita set visibility tabItem kedua dan ketiga ke "hidden" :

Jadi tabItem kedua dan ketiga tidak terlihat ketika pertama kali aplikasi di running, contohnya seperti terlihat

Oleh karenanya, ketika tombol next ditekan, maka tab kedua akan terlihat. Nah mari kita isi kode program di dalam button next tersebut. Double klik tombol next, kemudian tambahkan kode di bawah :

Line pertama dari kode tersebut membuat tabItem kedua menjadi visible dan membuat tabItem tersebut dipilih didalam tabControl. Jadi tar kita akan otomatis melompat ke tabItem berikutnya ketika tombol next dipencet. Ilustrasi seperti ini :

Next, kita akan menambahkan handle buat tombol "prev" dan "next" di tabItem kedua. Caranya juga sederhana, untuk tombol "prev" :

Jadi ketika tombol prev ditekan, tabControl cuma kembali ke tabItemb pertama. Kemudian untuk tombol "next", selain beralih ke tabItem terakhir, tabItem pertama dan kedua juga akan dihidden. Kodenya seperti terlihat di bawah :

Ilustrasi, jika programnya dijalankan :

Jadi terlihat, ketika kita berada di tabItem ketiga, maka tabItem pertama dan kedua menjadi hidden. Yang terakhir, kode untuk tombol prev di tabItem ketiga. Kodenya hampir sama dengan tombol prev di tabItem kedua, yaitu kembali ke tabItem kedua dan tabItem ketiga kembali di-hidden. Kemudian tabItem pertama kembali dibuat visible, kodenya seperti terlihat :

Ilustrasi jika kita menekan tombol "prev" di tabItem terakhir :

Cukup demikian permainan di tabControl ini. Moga bermanfaat... :-)