Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Bars
   [Collapse]Ribbon
    [Expand]The Ribbon UI
    [Expand]Visual Elements
    [Expand]Items and Item Links
     Ribbon Styles
    [Expand]Galleries
    [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
    [Expand]Miscellaneous
     Known Issues
   [Expand]Popup Menus
    Radial Menu
   [Expand]Common Features
   [Expand]Examples
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

How would you rate this topic?​​​​​​​