Tuesday, December 16, 2014

Menu Control in C# WPF - Basic

Berikut akan dipelajari dasar-dasar menambahkan menu control ke main window menggunakan c# wpf di visual studio 2010. Pertama-tama akan dibuat project baru seperti terlihat pada gambar di bawah :


Kemudian pada toolbox, drag 1 biji menu control ke main window :


Next, tambahkan submenu pada menu control tersebut dengan klik item collection :



Disitu ditambahkan 1 biji menu dengan nama File. Nah terlihat pada window tersebut kita bisa menambahkan icon pada menu, ataupun membuat menu tersebut berbentuk checkable. Dapat pula ditentukan konfigurasi-konfigurasi yang lain. Untuk project ini ditambahkan jumlah menu seperti terlihat di bawah :


Next, untuk membuat menu tersebut berada pada bagian atas. Ganti konfigurasinya seperti terlihat di bawah :


Setelah itu kita menambahkan menu baru di dalam "file". Caranya klik file tersebut kemudian tambahkan item collection sesuai keinginan, Caranya seperti diilustrasikan pada gambar di bawah :


Akan muncul menu :


Sampai disini, kita bisa menambahkan submenu yang lain sesuai dengan kebutuhan. Untuk menu file, submenunya sederhana saja seperti terlihat pada gambar di bawah :


Next, akan ditambahkan submenu untuk menu "Edit", pada menu edit ini akan ditambahkan juga icon untuk tiap-tiap submenunya. Langkah-langkahnya sama seperti di atas, cuman diisikan aja gambar di bagian icon, :


Coba kita lihat hasilnya jika dikompile :


Iconnya terlalu besar, jadi sebaiknya cari icon yang ukurannya kecil sesuai dengan ukuran textnya. Namun disini size image tersebut akan diubah. Efeknya tar gambarnya agk blur. Cara meresize bisa langsung menambahkan di file xml-nya atau lewat menu properti seperti terlihat di bawah :


Hasilnya :


Nah ukuran iconnya paling tidak sudah agak lebih baik dari yang sebelumnya :D
Untuk menambahkan submenu yang lain, dapat dilakukan dengan cara yang sama seperti diatas. Untuk menu edit tersebut hanya ditambahkan 3 biji, moga sudah dapat mewakili yang lain.


Berikutnya untuk menu "View". Pada menu view ini akan ditambahkan submenu dengan tipe "checkable". Caranya juga sangat mudah, tinggal klik item collection untuk view, kemudian tambahkan submenu dan beri tanda centang pada "isCheckable", seperti terlihat pada gambar di bawah :


Nah yang ini akan membuat submenunya dapat beri tanda centang oleh user, seperti terlihat :


Selanjutnya silahkan tambahkan submenu yang lain sesuai dengan kebutuhan, disini cuma ditambahkan 3 biji.


Next, untuk menu help. Pada menu help ini akan ditambahkan submenu dengan text yang warnanya berbeda-beda dan juga dipisahkan oleh separator. Caranya silahkan klik menu item collection untuk help. Kemudian masuk kebagian brushes, dan ganti warna buat foregroundnya, seperti terlihat di bawah :


Jika dikompile, hasilnya adalah :


Terlihat textnya berubah menjadi biru. Sebagai catatan, pada saat mengubah warna color foregroundnya, disini kita tidak dapat menggunakan color picker, jadi harus di ketik sendiri, kayak misalkan pengen warna merah, jadi textnya diubah menjadi "Red", atau mungkin kuning, berarti "Yellow", "Green", dsb atau bisa juga langsung menggunakan format hex RGB, contohnya #FF23E5D6, #FF000000 dst. Kemudian tambahkan separator untuk dibagian bawah about program, carannya tinggal tambahkan 1 baris kode tepat dibawah about program,


Sebenarnya dapat pula ditambahkan melalui items collection, Ganti menu item menjadi "separator", kemudian tekan tombol add:



Nggg... kemudian boleh ditambahkan tooltip pada about program ini caranya kembali ke item collection, kemudian masuk ke bagian other, dan isi sesuatu dibagian tooltipnya, seperti terlihat di bawah :


Jika dikompile, hasilnya adalah :


Nah terlihat tooltipnya dan garis separator dibawahnya. Silahkan tambahkan submenu yang lain untuk menu help ini sesuai dengan kebutuhan. Pada project ini ditambahkan submenu seperti terlihat dibawah :


Berikutnya kita akan menambahkan satu buah handle untuk satu buah submenu, soalnya untuk menambahkan handle pada submenu yang lain caranya sama saja. So, disini dipilih submenu untuk "open" pada menu file, Caranya silahkan pindahkan kursor ke dalam "file" tersebut kemudian klik event, dan masukkan nama fungsi pada bagian "click" :


Tanda garis merah itu maksudnya tempatkan kursor disitu, terus klik "Events", Nah masukkan nama fungsi dibagian "Click" seperti yang ditunjukkan panah merah. Setelah masukkan nama fungsinya, tekan "enter" kemudian VS akan secara otomasi membaca kita ke fungsi tersebut untuk mengisikan kode apa saja yang dibutuhkan, seperti terlihat pada gambar di bawah :


Nah disitu saya menggunakan nama fungsi "onOpen". Nggg... Isinya sederhana saja :D


Sip, jadi ketika submenu open di-klik, akan muncul pesan "Anda telah menekan submenu OPEN...", seperti terlihat pada gambar di bawah :


Ok... saya pikir cukup demikian permainan dengan menucontrol ini. Eeeeeh... mungkin warna background menucontrolnya bisa diubah dulu, biar g' default gitu, caranya juga simpel banget, klik bagian menunya terus masuk kebagian brushes, dan pilih warna background sesuai keinginan :


Terusss.... warna text-nya juga diubah dengk... :D
Sow, ganti warna black dibagian foreground :


Hasilnya :


Sekian.... Moga bermanfaat... :-)

Monday, December 15, 2014

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... :-)