WinForms Ribbon – Office 2019 Inspired Capabilities

WinForms Team Blog
15 July 2019

As you may know, Microsoft Office 2019 introduced multiple enhancements to its Ribbon UX. With our most recent release (v19.1), we’ve added a number of new features to the DevExpress WinForms Ribbon control to keep pace with changes made by the Microsoft Office team.

To use the Ribbon features listed in the blog post, make certain that you are using v19.1 or later. You will also need to enable the new “Office2019” style using the RibbonControl.RibbonStyle property.

Simplified View

Users can click the expand/collapse button in the Ribbon’s bottom right corner to switch between normal and simplified views. To switch the view in code, use the RibbonControl.CommandLayout property.

WinForms Ribbon Simplified View

The Simplified view displays all commands within a single row. Large items and galleries are displayed using the "SmallWithText" style. Commands that do not fit into the view are available in the “More commands” overflow list. This compact presentation style allows end-users to free form space for other controls.

WinForms Ribbon 2019 Overflow List

You can specify the items that must be moved to the overflow menu first and those that must remain visible for as long as the current container width allows. To learn more, please read the documentation on the AllowCollapseInSimplifiedRibbon command option.

Search Box

A Ribbon control can include dozens of commands across multiple pages. Without prior experience with an app, users can struggle to locate the actions they need. To simplify this task, the newest Office 2019 style introduces a command search box. You can enable such a box in your app by setting the ShowSearchItem property to true.

WinForms Ribbon Search Box

The Ribbon compares the search string to command captions to build its result list. You can also use the BarItem.SearchTags property to supply synonyms and make it even easier for users to locate what they need.

itemExit.Caption = "Exit";
itemExit.SearchTags = "Close, Quit";

WinForms Ribbon Search Box Synonyms and Tags

As you would expect from a DevExpress control, you have full control over the items in the search list. First, you can disable an item’s VisibleInSearchMenu option to exclude it from search operations.

itemExit.VisibleInSearchMenu = false;

The CustomizeSearchMenu event allows you to fine-tune the menu. Read the event’s e.SearchString parameter to obtain the text entered by a user. To access and modify the list, use the e.Menu parameter. Note that regardless of the search string, the e.Menu.ItemLinks collection contains all item links currently displayed in a Ribbon: the search query affects item visibility only.

The sample below illustrates how to make the “Help” command always visible.

private void RibbonControl_CustomizeSearchMenu(object sender, RibbonSearchMenuEventArgs e)
{
    e.Menu.ItemLinks.Where(x => x.Item == iHelp).First().Visible = true;
}

Appearance

While the Microsoft Office 2019 suite was available as a Preview version, we’ve added four color palettes to the vector Bezier skin.

Bezier Skin Office 2019 Imitation

After the official release, we also added a dedicated Office 2019 vector skin. It includes seven color schemes that imitate different Microsoft Office applications.

Office 2019 Skin with multiple palettes

Your Feedback Matters!

Please take a minute to answer to the following poll question so we can better understand your needs. If you have any questions or comments about the new Ribbon UI, please use the Comments section below. We’d love to know what you think.


11 comment(s)
Rustamer
Rustamer
Very good and helpful. Particularly pleased with the presence of the search. But at the moment your SVG icons obviously do not match the style of MS Office 2019.
We are looking forward to the appearance of a new set for switching to SVG, for example, such as https://www.axialis.com/icongenerator/stock-icons/office-pro/. Your current SVG icons cause users to reject, so stay on raster sets.
 
15 July, 2019
Jens Havelberg 1
Jens Havelberg 1
XAF Support with searchtags for actions?
16 July, 2019
Svetlana (DevExpress Support)
Svetlana (DevExpress Support)

@Customer37575

Although, at present, we are not planning to extend our SVG icon set, you are free to use any 3rd party SVG icons in your app. To adjust their size and color settings to match DevExpress guidelines, try our SVG Icon Builder.

17 July, 2019
Dennis (DevExpress Support)
Dennis (DevExpress Support)

@Jens Havelberg: This option is disabled in WinForms and XAF apps by default. It is easy to enable it as described in How to: Access the Ribbon Control - this worked fine in simple tests (additional adjustments may be required in tabbed MDI to filter out duplicate items).


Optionally, you can extend IModelAction with SearchTags and customize the corresponding bar items as per How to: Extend the Application Model.

18 July, 2019
Robert Dytmire
Robert Dytmire
Just wanted to 2nd the use of www.axialis.com icons in our product as well.  Your icon style needs to have thinner strokes in order to match Office 2019 fluent styles and tend to clash a bit with the fluent icons we purchase.
18 July, 2019
Rustamer
Rustamer

@Svetlana

It is disappointing. You do not hear users. Your SVG-set does not correspond to the current fashion trends at all. I have to constantly replace your new icons with my own. Frankly, there are currently no SVG icons from your set that I could use. And each time in your components of the terrible SVG-icons becomes more and more. Then you need a global option, which in all components returns the old amazingly beautiful raster icons.
And your SVG Icon Builder is only suitable for quickly creating icons and is more likely an attempt to demonstrate technologies. I see no reason to use it to complete the work in the presence of more powerful tools. If it became a full-fledged tool for the selection of icons with the library and search, it would be meaningful. Thank you.
 
18 July, 2019
Ray Navasarkian (DevExpress)
Ray Navasarkian (DevExpress)

@Customer37575

Here is a perfect opportunity for you to be heard. No reason to post anonymously - we don't bite. Please email me your information and I will personally call you and listen to all your concerns.

My email is rayn@devexpress.com

Thanks so much.

19 July, 2019
Rustamer
Rustamer

@Ray Navasarkian

Sorry, this is not a secrecy, this is a banal laziness) From Russia with love. Somehow I'll do it. There are a lot of bugs about which I have to write, but laziness. I express my opinion. And not for the first time talking about it. I just think your raster icons are among the best. You need to sell them! And the important thing is that I can use in my programs as a client of DevExpress. But after switching to SVG, I am simply deprived of this supplement. I asked the opinion of colleagues and users - no one liked the current style of SVG. This is not the Web, damn it. This is a desktop. Nobody likes criticism, all the more unfounded. I understand that. But there is a fact.
I know perfectly well that you do not bite. Believe me, you have good support. And we appreciate it.
P.S. I will think about your proposal to write to you, perhaps you are the Author. Maybe I will create a question.
P.P.S. And I am a clone) You yourself have created us so)
 
19 July, 2019
Ray Navasarkian (DevExpress)
Ray Navasarkian (DevExpress)

@Customer37575

Please email rayn@devexpress.com and include your customer ID. I'll take a look at your account and your previously posted support tickets and will follow up immediately. 

If you've reported an issue and we've not addressed it, I want to know why. So - please do email me at rayn@devexpress.com and let's figure out what went wrong.

23 July, 2019
renejdm
renejdm
Personally I think the SVG icons that come with DevExpress look great. I also like  SVG Icon Builder. Keep up the good work and keep adding new icons.
26 July, 2019
Callon Campbell
Callon Campbell

In your 19.1 WPF Ribbon demo, it shows 4 Office 2019 themes (Office 2019 Colorful, Black, Dark Gray and White). It's not obvious from the source how you access these themes from other DX applications. 

Why is there only a single Office 2019 Colorful theme in all other instances?

Is this only applicable to WPF?

How can we light up these themes in our own apps (WinForms and WPF)?

13 August, 2019

Please login or register to post comments.