Ribbon Form DevExpress

Anda pernah melihat tampilan Mic. Office 2007 atau 2010 ? nah tampilan yang seperti itu yang di sebut Ribbon, sekarang kita akan mencoba membuat Ribbon form sederhana menggunakan form bawaan dari DevExpress.
Kita masih melanjutkan Project yang sudah ada, sekarang kita hanya menambahkan / Add Windows From seperti gambar di bawah :

Pilihlah DevExpress Ribbonform (versi tergantung anda menggunakannya), pastikan namanya anda telah menganti filename yang telah di sesuaikan, setelah itu tekan Add.

Kira2 akan tampak seperti, kenapa warnanya menjadi hitam seperti itu, karena Skins yang aktif pada saat saya mendevelop program memakai Skin Darkroom, tak masalah Skins apa tapi pasti akan mirip seperti di atas.
Masukkan Control DefaultLookAndFeel dan XtraTabbedMdiManager kedalam form tersebut.
Perhatikan keterangan merah di atas, ada yang namanya PAGE dan PAGE GROUP, nanti akan ada yang namanya PAGE CATEGORY. Jika PAGE di klik kanan maka akan muncul ContextMenu seperti berikut :

Jadi jika kita Klik kanan pada mouse di bagian PAGE maka akan muncul menu tersebut, fungsi untuk menambah PAGE, PAGECATEGORY atau PAGEGROUP.
Jika kita klik kanan mouse di PageGroup maka akan muncul menu seperti berikut :

Fungsinya untuk menambahkan Control ke dalam PageGroup. sekarang kita akan mencoba untuk menambahkan Page, PageCategory dan menambahkan Control kedalam PageGroup.

Kita akan mencoba membuat Menu Utama seperti gambar di atas.
Kita mulai dari angka 1 (satu) terlebih dahulu:
Caranya :
a. Klik kanan mouse pada area sebelah kanan bawah (kalo pada gambar ada garis putus2)
b. Akan muncul ContexMenu seperti berikut :

c. pilih Add StaticText, biarkan apa adanya tidak perlu di rubah.

Kemudian kita akan buat yang dilingkaran nomor dua (2) kiri bawah di RibbonStatusBar
Caranya :
a. Klik kanan mouse pada area sebelah kiri bawah RibbonStatusBar (kalo pada gambar ada garis putus2)
b. Akan muncul ContexMenu seperti berikut :

c. pilih Add StaticText, anda bisa langsung rubah textnya menjadi udinsofyan.blogspot.com atau terserah anda. atau di properties pada Captionnya bisa rubah.


Sekarang pada lingkaran nomor satu (1) pada RibbonControl
Caranya :
1. Klik mouse pada RibbonPage1, kemudian ke Properties , rubah pada Text-nya dengan File
2. Klik kanan mouse pada PageGroup1, kemudian pada ContextMenu pilih Add Button
3. Lakukan kembali langkah pada point 2 sehingga akan terbentuk 2 button pada pada PageGroup
4. Rename/Rubah nama BarButtomItem1 menjadi Show Form dan BarButtomItem2 menjadi Exit Program. Cara merubahnya ada pada Properties masing-masing di Caption
5. Klik kanan mouse pada Page File, kemudian pilih Add Page, maka akan terbentuk RibbonPage2
6. Klik atau pilih RibbonPage2, ganti namanya di Properties--> Text dengan Skins
7. Klik kanan mouse Page Skins , pilih/tambahkan Add PageCategory maka akan muncul Ribbon PageCategory1
8. Pilih RibbonPageCategory1, rename/rubah namanya di Properties --> Text Skins Gallery
9. Klik mouse kiri pada Page Skins, tahan dan pindahkan kedalam area PageCategory/Skins Gallery
10. Tambahkan Control Timer bawaan dari Visual Studio kedalam form, kemudian setting di properties timer

Sekarang kita telah selesai untuk setting form melalui Properties, selanjutnya kita akan setting beberapa control melalui Script.
Sebelum ke Scripts, tadi kita telah menambahkan 3 control kedalam form yaitu DefaultLookAndFeel , XtraTabManager dan Timer. untuk penjelasan mengenai DefaultLookAndFeel sudah ada di blog ini, ada bisa lihat lagi di sini. Untuk XtraTabbedMdiManager fungsinya untuk mengatur agar form utama ini menjadi MDI secara otomatis, nanti tampilannya akan berbentuk Tab walaupun bisa juga untuk Windows, tergantung selera.

Berikut Scripts untuk form Utama :

Untuk Timer dan BarButtonItems (Show Form dan Exit Program) , anda bisa langsung klik 2 kali mouse, sehingga bisa langsung ke even masing-masing control tersebut.
Jika sudah selesai Run program dengan menekan tombol F5, maka akan tampak tampilan seperti berikut :

Jika Show Form di klik makan akan muncul seperti ini :

Anda bisa berkreasi lebih luas lagi , saya hanya menampilkan yang sederhana saja..



Salam