Interface aplikasi kadang menentukan kualitas suatu aplikasi. Interface yg tidak user friendly merupakan contoh interface yg jelek. Kadang untuk membuat interface yg bagus khusus-nya untuk .net programming cukup susah, mau membuat yg lebih bagus pasti berbayar (pakai components)...mau yg free eh ternyata tampilannya seadanya alias jelek...maklumlah free component.
Tampilan diatas ini menggunakan aplikasi Ribbon lho.. mau tanya caranya :
1. Download source code Ribbon Component berikut beserta .dll yang dah jadi.
Download ComponentRibbonSource.zip (1,5Mb)
2. Pilih menu Project dan "Add Reference...", browse lalu pilih System.Windows.Forms.Ribbon.dll dan ok.
3. Untuk menempatkan Ribbon ke form, drag dari toolbox ke form
4. Untuk menambahkan Tab ke Ribbon, gunakan command pada Properties bar. anda bisa juga pakai smart tag untuk hal ini.
5. Sekarang kita dah mempunyai tab pertama, kita harus menambahkan sebuah panel dengan cara menggunakan Properties bar.
6. Kalau udah, dengan cara yang sama tambahkan RibbonItems ke panel.
7. Untuk step berikutnya :
* Tambahkan 2 panel dengan 3 button setiap panel
* Set large icon dari Button menggunakan Image property.
* Set small icon dari Button menggunakan SmallImage property.
* Hasilnya begini :
Direkomendasikan menggunakan 32 x 32 px images untuk large icons dan 16 x 16 px images untuk small icons.
8. Berikutnya :
* Pilih Button kedua dan set Style property ke DropDown
* Lalu klik link "Add Button" pada the Properties bar untuk menambahkan Button ke Button.
* Pilih Button kedua lagi dan lihat perubahannya.
Adapun arsitektur keseluruhan Ribbon sebagai berikut :
RibbonTab
RibbonPanel
RibbonItemGroup
RibbonButton
Jadi ntar anda semua tinggal pilih event click-nya aja pada bagian mana, misal ribbonPanel1_ButtonMoreClick, ribbonButton1_Click dll...
Berikut behaviour Ribbon saat Resize Form
Jika ruang cukup untuk semuanya, button akan memiliki maksimum size yg bisa dijangkau dan icon menjadi 32 x 32
Jika ruang menyempit. Button pada panel yg lebih luas akan menyusut untuk menampilkan smaller icon (16 x 16), dan menyesuai pada single column.
Jika ruang lebih menyempit, button tidak lagi menampilkan textnya, hanya iconnya saja.
Sedangkan jika ruang menjadi minimum. Panel pertama collapsed dan hanya popup button yg terlihat dan akan menpilkan isinya jika di klik.
Untuk mengubah menjadi style warna hitam tinggal ketik code berikut (Bisa pakai C# atau VB.Net) :
code:
public Form1()
{
InitializeComponent();
(ribbon1.Renderer as RibbonProfessionalRenderer).ColorTable =
new RibbonProfessionalRendererColorTableBlack();
}
sumber belajar : kaskus.us (id : newbiebanget)
