In this video we’ll go over the basics of the RibbonControl, starting with its General
Settings and moving on to specific elements.
I already have an application with the NavBarControl on the left and the RichEditControl here in
the middle.
Let’s Drop a RibbonControl and RibbonStatusBar from the Navigation & Layout tab from the
toolbox onto the form.
The RibbonControl is automatically docked to the form's top and the status bar is at
the bottom.
Next, I’ll click the RibbonControl's smart tag and convert its parent form to Ribbon
Form.
This form is specially designed to display RibbonControl-based UIs.
For example, you’ll notice the form's Maximize-Minimize-Close buttons are located within the Ribbon's header,
not within the form's header.
You can also change the Ribbon Style from the smart tag.
Let's change it to the modern Office 2013 style.
Find out more about different Ribbon Styles in our documentation center.
A RibbonControl’s elements are divided into PageCategories, Pages, PageGroups, Items,
and ItemLinks.
If you right-click on the ribboncontrol, you’ll see here that you can choose which element
you want to add.
Pages are tabs with headers, and clicking a header activates a corresponding page.
Pages contain PageGroups.
And PageGroups contain Item links, which take you to items.
You may notice this concept if you’ve used the BarManager in the past.
Each item within a RibbonCotnrol can have several links to itself.
To add an ItemLink to a PageGroup, select the group, right-click it and choose your
menu item.
Here, I’ll choose “Add Button”.
Quickly modify each element by clicking its smart tag.
Let’s rename our Pages and Page Groups.
I’ll name the pages “Insert” and “Home”.
In the Home page, I’ll create two Page Groups named “Clipboard” and “Alignment”.
In the item link’s smart tag we can name each item, select the Ribbon Style, and choose
glyphs for images.
I just created the “cut” item.
Now I’ll do the same and create one for “Copy” as well.
Now I’ll create a menu item, name it “Paste”, Select a large Ribbon Style, and choose the
appropriate image.
With menus, you can also create sub-menus.
Here, I’ll create two sub-menus and include the appropriate images.
I’ll name them “Paste” and “Paste Special…”.
Let’s take a look at these menu items at runtime.
You can re-arrange item links and copy them at design-time.
Simply drag and drop it to the new destination.
To create additional links to this item, drag it with the control key pressed.
That’s what I’ll do here with the “Cut” item.
I’ll drag it over to the Quick Access Toolbar and down to the status bar.
Now, I’ll set some code to handle the Click event for the “cut” item.
Let’s run the app now and you’ll see from this demonstration that our click event works
for all “cut” items.
Next let’s look at Galleries.
I’m going to show you how to use a gallery to include options for the Alignment Page.
Right-click and choose “Add RibbonGalleryBarItem”.
This creates our Gallery.
And inside this gallery, I’ll add a group.
Inside that group, let’s add three items.
Each item will align text to the left, center, and right.
Click the image glyph to include the appropriate image for each selection.
I’ll add two more Items, and notice here how the items keep expanding columns.
We can fix this by selecting the Gallery and choosing a number for the column count.
I’ll set it at 3.
You can see the changes reflected in the designer.
I’ll right-click on the gallery and add one more Gallery Item.
And then include images for top, middle, and bottom alignment as well.
It’s good to note here that you can also choose to show the Item’s Text . And you’ll
see that it can create larger items and take up more space in the gallery.
I’ll take the text away and show you how to hover images now.
I’ll select the first “Left” item and click its smart tag.
From the menu, I’ll select the “Hover Image” glyph.
In the image picker, I’ll choose the larger size and select the appropriate image.
I’ll do the same for the other five alignment options as well.
Next, select the Gallery and set its AllowHoverImages property to True.
Now when we run the app, you can see the larger images appear when I hover over them.
I’ll go back to Visual Studio and set its ItemCheckMode to SingleCheck.
Run the app again and you’ll see that the item is now selected when I click on it.
Now Iet’s look at button groups.
They’re great for displaying a group of similar options.
I’ll create a new “Font Style” Page Group where users can change the font to bold,
italics, and underline.
For this, I’ll add a button group with three buttons.
Right-click on the Button Group to add the buttons.
For each button, I’ll choose the appropriate image.
Next, set the ButtonStyle for all links to check.
Now when we run the app, you can see how each button remains highlighted once its clicked.
Next, the top-left of each Ribbon contains an Application Button which displays a menu
when you click it.
The Office 2007-styled Ribbon displays an Application Menu, while the Office 2010 & 2013
styles collaborate with the BackStageViewControl.
This control can display tabs, buttons, and Seperators.
I’ll add two tab items and a button command.
I’ll set the button to act as the close option.
The tabs are selectable items which display their content in the right pane.
You can drag any control into this pane and when the tab gets selected, its content is
displayed.
For this video, I’ll place a User Control as the “Recent” Tab’s content.
I’ll set the docking property to the middle.
Next I’ll show you a couple ways you can connect the BackStage View to the Application
Menu.
You can select it here in the RibbonControl’s Smart tag or you can set it from the properties
window.
Now, if I run the app and click on the application menu button, you’ll see our BackStageView
Control appears exactly the way we set it up.
Now let’s look at the runtime features of the RibbonControl.
End-Users can minimize the ribbon, Add or remove item links to the Quick Access Toolbar.
And Display the toolbar above or below the Ribbon.
The Office 2013 Style features a full-screen mode.
In this mode, the Ribbon automatically hides when it’s not focused.
This helps save workspace.
I’ll go back into Visual Studio and set the Ribbons AllowCustomization property to
True.
This Allows end-users to customize the ribbon at run-time with the Ribbon Customization
form.
Here, I’ll create a new Tab called “Format”.
And I’ll rename the first group “Main”.
Then I’ll place the paste command inside the main group.
End-Users can also export their changes to an XML file.
And then import them anytime for quick and consistent changes.
And there you have it.
Some basicsRibbonControl Concepts.
To learn more, please check out our online documentation.
Thanks for watching, and thanks for choosing DevExpress.