[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Collapse]Ribbon, Bars and Menu
    [Expand]The Ribbon UI
    [Expand]Visual Elements
    [Expand]Items and Item Links
     Ribbon Styles
    [Expand]Main Menus
    [Collapse]Ribbon Control Designer
      Ribbon Items Page
      Quick Access Toolbar Page
      Ribbon Page Header Items
      Status Bar Page
      Categories Page
      Sub Menus and Popup Menus Page
      Gallery Page
      Key Tips
      Repository Editor Page
      Reduce Operations Page
    [Expand]Runtime Capabilities
     Known Issues
   [Expand]Popup Menus
    Radial Menu
   [Expand]Common Features
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Reduce Operations Page

If the form that hosts your Ribbon Control is sizable, an end-user might compress the ribbon so that it no longer has enough space to display all of its elements in the way it was originally designed. Instead of simply hiding items, the RibbonControl will first try to adapt to its new size. This includes the following steps.

By default, a ribbon shrinks its elements from right to left. If you are not satisfied with how the ribbon rearranges its layout when an end-user resizes the form, use the Reduce Operations designer tab. This tool allows you to set the order in which ribbon items are resized, so that crucial items can remain unchanged for as long as possible. The figure below illustrates how the Reduce Operations ribbon designer page appears.

This tab allows you to create a list of reduce operations performed consecutively upon form resize. Each operation determines the element to be resized and when it should be resized. In fact, you can manually specify the order in which elements are resized. To create your own custom reduce operations sequence, follow the steps below.

  • First, select the ribbon page that contains the required items. To do so, select the required page in the Ribbon Page Selector.
  • Create a reduce operation for the selected ribbon page. Click the operation selector below the Add button and select the required item type (e.g., large buttons or button groups). If you need to create more operations with the same item type, simply click the Add button without re-invoking the operation selector. This step creates a new reduce operation and specifies which items it will affect. For instance, if you select Small Buttons With Text, this operation will only transform small buttons with text to small items with no text at all. Each operation affects only one related item type, so if you need to resize multiple items within one page (page group), add a separate operation for each item type. The Operation Selector also allows you to add a Collapse Group operation - this operation collapses the entire group at once instead of resizing individual items within the group.
  • Select the page group in the Operation Options section below.
  • Once the page group is selected, you can select the first item that should be resized when this operation is performed (Start Link). You can also set the number of items that will be resized (Link Count). If none of these options are set, the operation will do nothing. The Preview section in the designer's top right corner will show you how the ribbon will appear when this operation is performed.
  • The Behavior option only makes sense if your operation resizes galleries. This option specifies whether the gallery should be resized once (made one row narrower) or make this gallery narrower row after row, until there is only one item row left and the next step would be to hide this gallery entirely.
  • Click the 'Move Up' and 'Move Down' buttons to move the currently selected operations up and down, respectively. Operations are performed starting with the topmost on the list.

Following these simple steps, you can create detailed instructions for the order in which the Ribbon Control items should be resized. For example, the animation below illustrates a Ribbon Control resized without any custom reduce operations. Items and groups are resized and minimized starting from the right edge. Note that ribbon resizing is very intuitive even without any custom operations. For instance, the 'Make' group is not minimized since it will not occupy less space compared to another group containing three vertically arranged items without captions.

The following animation illustrates ribbon resizing with custom reduce operations involved. Notice that elements are now minimized starting with the left edge. The Output page group remains unchanged for as long as possible.

Is this topic helpful?​​​​​​​