My DokuWiki

You've loaded an old revision of the document! If you save it, you will create a new version with this data.

**Telerik & Dev Notes**

==== * RadRibbonBar – rrb  ====

http://www.telerik.com/help/winforms/ribbonbar-overview.html

http://www.telerik.com/community/forums/winforms/ribbonbar.aspx\\
Video: [[http://tv.telerik.com/winforms/radribbonbar/radribbonbar-overview|Overview Video]]

With the RadRibbonBar control you can build user interfaces similar to those used in Microsoft Office.

{{vertopal_daaeffda7d704b80a16bba19fb3588e8/media/image39.png?383x309|A screenshot of a computer Description automatically generated}}

//**Consider adding a [[#_RadRibbonForm|RadRibbonForm]] to the Solution rather than adding a RadRibbonBar to a regular RadForm.**//

* The StartButtonImage property specifies an image to use for the <Start> button in the upper left corner of the control.
 * **‘CommandTabs’ collection defines the ‘RibbonTab’ tabs across the top**
 * ‘contextualTabGroup’ collection defines areas across the top of the form. I assume to control tab visibility by context.
 * ‘QuickAccessToolbarItems’ collection defines QAT items
 * ‘StartMenuItems’ collection defines the items under the round <Start> button.
 * ‘StartMenuRightColumnItems’ collection defines the items in the right column under the round <Start> button.

> RadRibbonTab – rrbt

* ‘Items’ collection defines ‘RadRibbonBarGroup’ items - button container groups on the current RadRibbonTab

> RadRibbonBarGroup – rrbg

<HTML><ul></HTML>
<HTML><li></HTML>> <HTML></HTML>‘Items’ collection defines ‘RadMenuItems’ (controls - buttons, etc) or ‘RadRibbonBarButtonGroup’ containers which include a border and allow vertical orientation.<HTML></HTML>
<HTML></li></HTML>
<HTML><li></HTML>> <HTML></HTML>Set Buttons for AutoSize = False, TextWrap = True and set Size/Width = narrower so the text will wrap<HTML></HTML>
<HTML></li></HTML>
<HTML><li></HTML>> <HTML></HTML>I’m not sure how to center buttons in a group when the group name is wider than the list of buttons.<HTML></HTML>
<HTML></li></HTML><HTML></ul></HTML>

> RadRibbonBarButtonGroup – rrbbg

* ‘Orientation’
    * ‘Horizontal’ default. Controls side by side.
    * ‘Vertical’ Allows you to stack controls vertically
  * ‘Items’ collection defines ‘RadMenuItems’ (controls - buttons, etc)

**RadButtonElement - rbe - Position text to BottomCenter, enable TextWrap and config an icon**

* Select one or more buttons and set ‘TextAlignment’ = ‘BottomCenter’
 * By default the text sets the button width, but you probably should set size manually. These are good defaults:
 * AutoSize = False
 * TextWrap = True
 * Size/Width = small enough to wrap the text to 2 lines (assuming you also want a small icon). <del>Good values are 64, 74 for a button with 2 lines of text and 61, 60 for buttons with one line of text. These will align the top of the top lines.</del>
 * Size/Height = 66 is a good default. 68 starts to push down the ButtonGroup label but is an acceptable max. <del>Set the ‘Height’ to force single text to line up with the top of the text on 2 line text buttons. Good options are 74 high for buttons with 2 lines of text and 60 for buttons with one line. All this assumes you use in icon on the buttons as well.</del>
 * TextImageRelation – ImageAboveText
 * TextAlignment = BottomCenter.
 * Dealing with buttons with both 1 and 2 lines of text. Maybe better than above, use bottom padding to push single line text up from the bottom. Turn on TextWrap. Set button size to X,66, where x is the width that forces any required text wrap. Set Padding.Top to 2-8 to push the icon down and Padding.Bottom to 0 for buttons with 2 lines of text and 15 for buttons with 1 line of text.
 * ‘Image’ = ??? to set the icon graphic image. Choose “Local resource” | <Import> | browse for graphic and finish. RibbonBar icons should be 32x32 pixels.
 * ‘ImageAlignment’ = TopCenter
 * Padding/Top = 8 (or so) to push the graphic down to the center of the button (assuming the above sizes)

**Hide elements of the Ribbon Bar**

Add the following code right under ‘InitializeComponent();’ in frmMain() (or whatever the form is called).

%%//%% Stick this right after “InitializeComponent();” on the form

%%//%% Hide the AppButton (Office Start button or 'File' tab) on the RadRibbonBar

radRibbonBar1.RibbonBarElement.ApplicationButtonElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;

%%//%% Hide the QAT (Quick Access Toolbar) on the RadRibbonBar

radRibbonBar1.RibbonBarElement.QuickAccessToolBar.Visibility = Telerik.WinControls.ElementVisibility.Hidden;

%%//%%Hide Title Bar - collapse all 3 elements to hide this bar

richTextEditorRibbonBar.RibbonBarElement.QuickAccessToolBar.Visibility = ElementVisibility.Collapsed;

richTextEditorRibbonBar.RibbonBarElement.ApplicationButtonElement.Visibility = ElementVisibility.Collapsed;

richTextEditorRibbonBar.RibbonBarElement.RibbonCaption.Visibility = ElementVisibility.Collapsed;

%%//%% Hide any RibbonBar tab with 'Name' = "Hidden" or where 'Text' contains "Hidden" (just the tab, not content)

foreach (Telerik.WinControls.UI.RibbonTab item in radRibbonBar1.CommandTabs) {

if (item.Text.ToLower().Contains("hidden") == true || item.Name.ToLower().Contains("hidden") == true)

item.Visibility = Telerik.WinControls.ElementVisibility.Hidden; %%//%% sometimes ‘Collapsed’

}

%%//%% Shift Tab Groups to the left when the AppButton (Office Start button or 'File' tab) is collapsed

radRibbonBar1.RibbonBarElement.ApplicationButtonElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

Padding p = radRibbonBar1.RibbonBarElement.TabStripElement.ItemContainer.Padding;

radRibbonBar1.RibbonBarElement.TabStripElement.ItemContainer.Padding = new Padding(0, p.Top, p.Right, p.Bottom);

%%//%% Hide the ‘ribbonTab1’ tab on the RadRibbonBar\\
ribbonTab1.Visibility = Telerik.WinControls.ElementVisibility.Hidden; %%//%% sometimes ‘Collapsed’

%%//%% Hide the Caret button in the upper right that collapses the RibbonBar

this.radRibbonBar1.RibbonBarElement.ExpandButton.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;

%%//%% Select the 1st tab [0] on the RadRibbonBar by default

((Telerik.WinControls.UI.RibbonTab)radRibbonBar1.CommandTabs[0]).IsSelected = true;

Use the ‘Document Outline’ view (<Ctrl>+W, U) to [[#_RadRibbonForm|manage a RadRibbonForm]].

**Managing & Reordering RibbonBar Groups**

* Select the RadRibbonBar, and click the <...> on the CommandTabs Property to open RadRibbonBarCommandTab Collection Editor.
 * Select a RadRibbonBarTab on the left, then click the <...> on the Items property to open the RadItem Collection Editor. <Add> and reorder Groups.
 * Select a RadRibbonBarGroup on the left, then click the <...> on the Items property to open the RadItem Collection Editor. <Add> and reorder buttons, etc.

> NOTE: Reordering CommandTabs in the wizard doesn’t seem to work. You can use this code instead:
> 
> %%//%%The RibbonGroups 'rrbctArchives' and 'rrbctNotes' should be in the 1st and 2nd positions from the left. Telerik support ticket: 1453535 
> 
> this.richTextEditorRibbonBar.CommandTabs.Remove(this.rrbctArchives);
> 
> this.richTextEditorRibbonBar.CommandTabs.Insert(0, this.rrbctArchives);
> 
> richTextEditorRibbonBar.CommandTabs.Remove(this.rrbctNotes);
> 
> richTextEditorRibbonBar.CommandTabs.Insert(1, this.rrbctNotes);

**Set default selected CommandTab**

%%//%%Set Default Startup Tab
 
SetSpecifiedPageViewByText(radPageView, ((richTextEditorRibbonBar.SelectedCommandTab.Text == "Archives") %%?%% "Archives" %%:%% "Notes"));

Edit summary