Our WinForms Ribbon Control is a replacement for traditional toolbars.
It features multiple tabs (or Pages) divided into sections (or PageGroups).
They contain buttons, sub-menus, editors, and labels that have multiple display styles like Large, Small, and Small with Text.
Pages can be always visible, or only visible when a certain event happens.
We call these pages Contextual Pages.
For instance, here in the “Ribbon Simple Pad” demo, I can select any text and the “Selection” page appears.
The Ribbon includes an Application Button which opens the main application menu.
There are three external controls that allow you to create this menu
The BackstageViewControl, RecentItemControl, and ApplicationMenu.
The Ribbon also provides a Quick Access Toolbar that you can populate with your most frequently used commands.
By default, it’s located above the Ribbon, but you can place it below as well.
It ships with multiple Ribbon Styles. As you select the style, the Ribbon Control’s appearance changes.
And it can gain certain unique features.
For example, in the Office 2019 style, the Ribbon can collapse into a single-line Simplified state.
In Tablet Office, Page headers are middle-aligned.
And in Office Universal the Application Button appears as the File page.
The quickest way to create a Ribbon-based application is to use the template from our Template Gallery.
Here you can choose from .NET Framework and .NET Core.
For this demo, I’ll choose .NET Framework and you’ll see we have a number of templates set up to use with the Ribbon.
Like the Rich Editor, Scheduler, Spreadsheet, Map, and Grid. I’ll select Grid.
You can easily modify the Ribbon layout.
Start by selecting a DevExpress skin.
Right-click the project in the Visual Studio Solution Explorer and click DevExpress Project Settings.
This page is the only recommended place to set up global application skins.
Next, choose a Ribbon Style – to do that, use the RibbonStyle property.
To add more Pages, Page Groups, and Commands, use the plus icons on the Ribbon surface.
Note that each Ribbon element is selectable and has a smart tag menu
Which allows you to quickly set up main properties like caption, image, item style, alignment, and so on.
For this example, I will begin to set up a Main Page Tab with edit and file groups.
And I’ll add some button items as well. For the Edit group, I’ll add Cut, Copy, and Paste.
File will have New, Open, and a Save As Button.
I’ll set the File items to large using the Ribbon Style dropdown in each item’s task menu.
The Save As button is set up as a Menu Item with BarSubItems. I’ll add two sub items, DOCX File and DOC File.
If you prefer vector icons, there’s a great way to quickly assign them to Ribbon commands
Click the form’s smart tag and choose “Image Picker”
Then dock this panel anywhere within Visual Studio.
You can search for the icons you want and drag them onto Ribbon commands.
Here’s another cool feature
Click any Ribbon command and the Image Picker will read its title and suggest matching icons under the Suggested category.
Double-click an icon and it will be instantly assigned to the selected element!
If you need a copy of a button, just drag-and-drop it with the Control key pressed.
In DevExpress terminology, these clones are called Bar Item Links, copies of the real elements that are called Bar Items.
This concept allows you to set up an item’s appearance and behavior only once
And then add links to that item to multiple places such as the Quick Access Toolbar
or context menus without duplicating the item itself.
Also, every link can have its unique appearance, but still refer to the same core item.
To delete an element, select it and press the Delete key.
For commands, the Ribbon will ask whether you want to remove this specific link and leave the core item be
or remove the item together with all its links.
You can check an option that remembers your choice so that the message doesn’t pop up again.
Should you change your mind, edit this registry key.
To create a modern application menu, find the BackstageViewControl component in VS Toolbox and drop it onto the form.
You can design it as needed and test it at runtime.
For this example, I’ll add two Commands and two tabs.
When it’s done, assign it to the Ribbon’s ApplicationButtonDropDownControl property
And it won’t be visible on form anymore.
Now end-users will only see it when they click a Ribbon’s Application Button.
The basic Ribbon set-up is over.
Now let’s look at how you can quickly convert an existing menu within a project to a ribbon form.
Here in this example we have a basic application with a menu control.
Search for the BarManager Control in the DX Toolbox and add it to the form.
From its task menu, choose Convert Standard Menus.
I’ll select All and then make sure to delete the selected items after conversion.
Now the existing menu system has been replaced by the bar manager.
Click Convert to Ribbon and now you can see its changed here in the form.
And we’ve kept all the same items from before. There’s two tabs with a number of groups.
If you want to know more about Ribbon features, such as Runtime Customization, Ribbon Merging, or Galleries
Make sure to check out the documentation on our website.
That’s it for this video, if you liked it please give us a thumbs up, if you have any questions, please comment below.
And don’t forget to subscribe and ring the bell so you get notified anytime we release new content.
Thanks for watching, and thank you for choosing DevExpress.