WinForms Ribbon - Office 2019 Inspired Capabilities

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.

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.

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.

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";

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.

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

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.

Free DevExpress Products - Get Your Copy Today