Adding and Customizing Elements
A RibbonBar group may contain button groups or elements. Button groups in turn can contain other button groups or elements. You can add, remove, and customize any of these building blocks by code.
Customizing Button Groups
To customize a RadRibbonBarButtonGroup object, you can use these properties:
Orientation property can be set to System.Windows.Forms.Orientation.Horizontal or System.Windows.Forms.Orientation.Vertical. This determines how elements within the button group will be laid out.
ShowBorder property can be set to True or False to turn the border of the button group to on or off.
MinSize property determines the minimum size of the button group.
In order to add button groups or elements to a button group, use RadRibbonBarButtonGroup.Items.Add or RadRibbonBarButtonGroup.Items.AddRange methods.
Customizing Elements
You can add a variety of elements to RadRibbonBarGroup.Items or RadRibbonBarButtonGroup.Items collection:
Button elements
Check box elements
Drop-down button elements
Repeat button elements
Split button elements
Toggle button elements
Image button elements
Customizing Button Elements
The button element represents a simple button displaying text, an image, or both. To customize the RadButtonElement, you can use these properties:
| DisplayStyle property can be set to Text , Image , or ImageAndText to determine the visual appearance of the button. | |
| Text property sets the caption displayed on the button. | |
| Image , ImageIndex , and ImageKey properties determine the image displayed on the button. | |
| TextImageRelation property sets the relative position of the text and the image if DisplayStyle is set to ImageAndText . | |
| ImageAlignment property sets the alignment of the image displayed on the button. | |
| TextAlignment property sets the alignment of the text displayed on the button. | |
| TextOrientation property can be set to either to Horizontal or Vertical . |
Customizing Check Box Elements
The check box element represents a check box with a caption. To customize the RadCheckBoxElement, you can use these properties:
DisplayStyle property can be set to Text, Image, or ImageAndText to determine the visual appearance of the control.
Text property sets the caption displayed next to the check box.
Image, ImageIndex, and ImageKey properties set the image displayed next to the check box.
TextImageRelation property sets the relative position of text and the image if the DisplayStyle is set to ImageAndText.
ImageAlignment property sets the alignment of the image displayed in the control.
TextAlignment property sets the alignment of the text displayed in the control.
CheckAlignment property sets the alignment of the check box in the control.
TextOrientation property can be set to Horizontal or Vertical.
IsChecked property sets the initial state of the check box if the IsThreeState property is False.
ToggleState property sets the initial state of the check box if the IsThreeState property is True.
IsThreeState property controls whether the check box will display the indeterminate (gray) state.
Customizing Drop-down Button Elements
The drop-down button element represents a button with a drop-down list of items that appear when the button is pushed. To customize the RadDropDownButtonElement, you can use these properties:
DisplayStyle property can be set to Text, Image, or ImageAndText to determine the visual appearance of the button.
Text property sets the caption displayed on the button.
Image, ImageIndex, and ImageKey properties set the image displayed on the button.
TextImageRelation property sets the relative position of text and image if the DisplayStyle is set to ImageAndText.
ImageAlignment property sets the alignment of the image displayed on the button.
TextAlignment property sets the alignment of the text displayed on the button.
TextOrientation property can be set to Horizontal or Vertical.
ClickMode property specifies when the button Click event should fire.
Items collection contains the items to display in the drop-down list.
Customizing Repeat Button Elements
The repeat button element represents a button whose Click event fires repeatedly when the button is pushed and held. To customize a RadRepeatButtonElement object, you can use these properties:
DisplayStyle property can be set to Text, Image, or ImageAndText to determine the visual appearance of the button.
Text property sets the caption displayed on the button.
Image, ImageIndex, and ImageKey properties set the image displayed on the button.
TextImageRelation property sets the relative position of text and the image if the DisplayStyle is set to ImageAndText.
ImageAlignment property sets the alignment of the image displayed on the button.
TextAlignment property sets the alignment of the text displayed on the button.
TextOrientation property can be set to either Horizontal or Vertical.
Delay property sets the number of milliseconds before the first Click event is fired.
Interval property sets the number of milliseconds between the Click events.
Customizing Split Button Elements
The split button element represents a button with a menu of items that appear when the arrow of the button is clicked. To customize the RadSplitButtonElement, you can use these properties:
DisplayStyle property can be set to Text, Image, or ImageAndText to determine the visual appearance of the button.
Text property sets the caption displayed on the button.
Image, ImageIndex, and ImageKey properties set the image displayed on the button.
TextImageRelation property sets the relative position of text and image if the DisplayStyle is set to ImageAndText.
ImageAlignment property sets the alignment of the image displayed on the button.
TextAlignment property sets the alignment of the text displayed on the button.
TextOrientation property can be set to Horizontal or Vertical.
ClickMode property specifies when the button Click event is fired.
Items collection contains the items to be displayed in the drop-down menu.
Customizing Toggle Button Elements
The toggle button element represents a button that toggles between two states. To customize the RadToggleButtonElement, you can use these properties:
DisplayStyle property can be set to Text, Image, or ImageAndText to determine the visual appearance of the button.
Text property sets the caption displayed on the button.
Image, ImageIndex, and ImageKey properties set the image displayed on the button.
TextImageRelation property sets the relative position of text and the image if the DisplayStyle is set to ImageAndText.
ImageAlignment property sets the alignment of the image displayed on the button.
TextAlignment property sets the alignment of the text displayed on the button.
TextOrientation property can be set to either Horizontal or Vertical.
ToggleState property sets the initial state of the button.
Customizing Image Button Elements
The image button element represents a button that displays multiple images. To customize a RadImageButtonElement object, you can use these properties:
The DisplayStyle property can be set to Text, Image, or ImageAndText to determine the visual appearance of the button.
The Text property sets the caption to display on the button.
The Image, ImageIndex, and ImageKey properties set the image to display on the button.
The ImageClicked, ImageIndexClicked, and ImageKeyClicked properties set the image to display on the button when it is clicked.
The ImageHovered, ImageIndexHovered, and ImageKeyHovered properties set the image to display on the button when the mouse is hovered over it.
The TextImageRelation property sets the relative position of text and image if the DisplayStyle is set to ImageAndText.
The ImageAlignment property sets the alignment of the image displayed on the button.
The TextAlignment property sets the alignment of the text displayed on the button.
The TextOrientation property can be set to Horizontal or Vertical.