Edit this page

Using Different Elements on a RadRibbonBar

You can build the user interface with a RadRibbonBar using a variety of different elements. In this tutorial, you will see how some of these elements can be placed and customized.

Prepare an ImageList to be Used in the Telerik RadRibbonBar

  1. Create a RadRibbonForm control by adding it by clicking on the 'Add New Item...' option in the context menu of the project or by changing the base class of a standard Windows Form to RadRibbonForm.

  2. Open the designer of the RadRibbonForm

  3. Drag a WinForms ImageList component from the Toolbox to the form. In the area below the design surface, you will see imageList1.

  4. Using the Images Collection Editor, add the desired images to the ImageList. For more help with this task, see How to: Add or Remove ImageList Images with the Designer in Visual Studio documentation.

note

A predefined list of images has been prepared for the purpose of this example.

Adding a Tab and a Group

  1. Click Add New Tab... to create a new tab.

  2. Type the word Write and press Enter.

  3. Click off the Write tab to deselect it.

  4. Select the Write tab again.

  5. Click Add New Group... to create a new group.

  6. Set the Text property of the new group to Clipboard.
    ribbonbar-using-different-elements-on-a-radribbonbar 001

Add Elements

  1. Right-click the Clipboard group and select Add an item, and then RadButtonElement.

  2. Select the Clipboard group again and by right-clicking on it add a Vertical Button Group.

  3. Select the group and open the Properties window. Find the ShowBorder property and set it to true.

  4. Select the Vertical Button Group and from its SmartTag execute the Edit Items action.

  5. Add three RadButtonElement instances in the button group:
    ribbonbar-using-different-elements-on-a-radribbonbar 002

Customize the RadButtonElement

  1. Select the RadButtonElement which is outside the Button Group.

  2. Set the TextImageRelation property to ImageAboveText.

  3. Set an appropriate image by modifying the Image property.

  4. Set the ImageAlignment property to MiddleCenter.

  5. Set the Text property to Paste and the TextAlignment property to MiddleCenter.

With an appropriate Image the RadRibbonBar should look similarly:
ribbonbar-using-different-elements-on-a-radribbonbar 003

Customize the RadButtonElements in the RadRibbonBarButtonGroup

  1. Select the first RadButtonElement in the RadRibbonBarButtonGroup.

  2. Set the DisplayStyle property to Image

  3. Set the ImageAlignment property to MiddleCenter

  4. Set the Image property with an appropriate image

  5. Do the same for the rest elements in the RadRibbonBarButtonGroup so that the result looks similar to this:
    ribbonbar-using-different-elements-on-a-radribbonbar 004

Adding a RadGalleryElement

  1. Select the RadRibbonBar control and add another RadRibbonBarGroup called Styles in the 'Write' tab.

  2. Select the Styles group, right-click on it and add a RadGalleryElement.

  3. Select the RadGalleryElement and open the Properties window of Visual Studio. Find the Items collection and add 6 RadGalleryItem instances.

  4. Set appropriate images to all of the RadGalleryItem instances.

  5. For each RadGalleryItem set the DisplayStyle property to Image so that no text appears.

  6. Find the MaxColumns and MaxRows properties of the RadGalleryElement and set their values to 2 and 5 respectively. The result should be similar to this:

note

For the purpose of this demonstration Office 2007 like images for the gallery have been used.

ribbonbar-using-different-elements-on-a-radribbonbar 005

See Also