• Overview of Ribbon control
  • Creating a Ribbon control
  • Characteristics of Ribbon control
  • Description of a Ribbon control
  • Using buttons in a Ribbon control
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WindowsLinuxPHPWEBDEV - Browser code
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Stored procedures
Overview of Ribbon control
The Ribbon control proposes an additional feature regarding the menus found in your applications. It is used to present in a small surface a large number of controls arranged logically in order to perform choices.
For example, the different menus of the "Sales Management" application presented in ribbon:

In this example, the different elements of the Ribbon control are buttons but any type of control can be used.
At runtime, more or less elements of the ribbon are displayed according to the size of the window. If some elements cannot be displayed, a little arrow is used to "expand the ribbon" and to display all the elements in a popup window:
  • The TAB key pressed on an edit control found in the Ribbon control is used to go to the next control (according to the tabulation order).
  • The ENTER key pressed on an edit control found in the Ribbon control has no effect.
Creating a Ribbon control
To create a Ribbon control:
  1. On the "Creation" tab, in the "Containers" group, expand "Tab and associated" and click "Ribbon".
    Another possibility: On the "Window" tab, in the "Bars and menus" group, expand "Other bars" and select "Ribbon".
  2. Click at the desired location to create the control. The control appears in the editor.
  3. Define the characteristics of the Ribbon control. To view the characteristics of the control, select "Description" in the context menu.
  4. Insert the desired controls into the different groupings. All types of controls can be included in a grouping.
To transform the context menu of a window into a Ribbon control:
  1. Open the window containing the main menu.
  2. On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Main menu to Ribbon".
Caution: To use this option, the Ribbon control must not exist in the window.
Characteristics of Ribbon control
The Ribbon control includes panes and groups.
Each pane is represented by an icon and a caption.
Each pane contains one or more groups separated by a vertical line.

Description of a Ribbon control

The description window of a Ribbon control allows you to:
  • define the different panes of the Ribbon control ("General" tab). For each pane, you have the ability to define:
    • the caption of the pane,
    • its initial status,
    • the image displayed beside the caption.
      The position of this image can be modified in the "Style" tab ("Caption of active pane" and "Captions of inactive panes" elements).
    • the tooltip of the pane.
  • define the different groupings displayed by each pane ("General" tab). For each grouping, you have the ability to define:
    • the caption of the grouping. This caption will be displayed at the bottom of the grouping when this one is opened.
    • whether the pane displays a specific button ("With button (click process)").
      In this case, the click process of grouping will be run when this button is clicked by the user.
      This allows you to display a popup menu or a specific window for example, ...
    • the image that will be displayed when the grouping is reduced. The dimensions of this image must be set to 32 x 32.
  • The image used for the drawing of the panes can be customized in the control description window ("Details" tab).
  • Several options used to customize the panes and the groupings are available in the control description window ("Style" tab).

Using buttons in a Ribbon control

If a Button control is in the group of a Ribbon control, the "UI" tab of the Button control allows you to configure how the button will behave when the ribbon is reduced.
You can:
  • avoid reducing the control.
  • reduce it to display the button image and text.
  • reduce it to display the button image.
The last two options are useful for buttons that show a specific icon and label.
Remark: You have the ability to use buttons with arrow in a Ribbon control, allowing for example to classify the actions for perform hierarchically.
Related Examples:
WD Flowchart Training (WINDEV): WD Flowchart
[ + ] This example is used to create organization charts.
An organization chart is used to indicate the repartition of the managers within a company and the relationships that exist between these managers.
Minimum version required
  • Version 17
Click [Add] to post a comment