User Tools

Site Tools


telerik_test

This is an old revision of the document!


Telerik & Dev Notes

* RadRibbonBar – rrb

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

http://www.telerik.com/community/forums/winforms/ribbonbar.aspx
Video: Overview Video

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

A screenshot of a computer Description automatically generated

Consider adding a 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

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

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). 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.
    • Size/Height = 66 is a good default. 68 starts to push down the ButtonGroup label but is an acceptable max. 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.
    • 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 32×32 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

1);

1)
Telerik.WinControls.UI.RibbonTab)radRibbonBar1.CommandTabs[0]).IsSelected = true; Use the ‘Document Outline’ view (<Ctrl>+W, U) to 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”
telerik_test.1707612158.txt.gz · Last modified: 2024/02/10 19:42 by admin

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki