Elements for Building RibbonBar User Interface in C#
KetticRibbonBar control for Windows Forms contains various elements for the users to design and customize the user interface of ribbon bar. By using these elements, the users can easily customize the KetticRibbonBar control using C# code for their Windows applications. In the following tutorial, we are going to demonstrate how to add the various elements to the RibbonBar and customize them.
Add ImageList to KetticRibbonBar on WinForms
- In your current .NET project, click Add New Item to create a KetticRibbonForm, or change the base C# class of a standard Windows Forms to KetticRibbonForm.
- And the open the KetticRibbonForm designer and drag and drop the ImageList on the form.
- Open the Images Collection Editor, select the desired images for the ImageList
Add Tabs and Groups to KetticRibbonBar
- Create a new tab by clicking Add New Tab... in your .NET project
- Input the text Write to the newly created tab and then release the selection of the tab.
- Choose the Write tab once again and create a new group by clicking Add New Group...
- Set the Text property to Clipboard for the new group.
Add Elements to RibbonBar in Windows Forms
- After adding the tab and group to ribbon bar, we are able to add item to the group.
- Select the Clipboard group twice by right clicking and choose Add an item to add a KetticButtonElement and a Vertical Button Group successively.
- In the Properties window of KetticButtonElement, enable the ShowBorder property for the element.
- In the smart tag of Vertical Button Group, execute the Edit Items action, and add three KetticButtonElement instances in the button group.
Customization of KetticButtonElement for RibbonBar
- When the KetticButtonElement are created, we can customize the button element now.
- Choose the KetticButtonElement outside the Button Group, and set the TextImageRelation property to ImageAboveText.
- Customize the Image property to set a suitable image and assign the ImageAlignment property to MiddleCenter.
- Assign the Text property to Paste and set the TextAlignment property to MiddleCenter.
- In the KetticRibbonBarButtonGroup, select the first KetticButtonElement and assign the DisplayStyle property to Image, set the ImageAlignment property to MiddleCenter, and add a suitable image to the Image property.
Add KetticGalleryElement to RibbonBar
- When we want to add KetticGalleryElement to RibbonBar, add a new KetticRibbonBarGroup and assign it as Styles in the Write tab, and then right click it to add a KetticGalleryElement.
- Open the Items collection of the KetticGalleryElement, add six KetticGalleryItem instances and assign the suitable images to these instances.
- Hide the text of image by changing the DisplayStyle property to Image for the KetticGalleryItem.
- Set the MaxColumns property and MaxRows property of the KetticGalleryElement to 3 and 6 respectively.