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

No comments:

Post a Comment