ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

  • Overview
  • Implementation
  • Create an drop-down Button control
  • Characteristics and operating mode of drop-down buttons
  • Arrow position
  • Drop-down button that opens a popup window
  • Split button that opens a menu and saves the selected option
  • Drop-down button used in a Ribbon control
  • Drop-down button appearance
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
The drop-down button is a Button control used to expand:
  • a popup menu.
  • a "Popup" window.
This type of Button control is used to propose a set of actions in a single button.
  • The click on the button runs the default choice.
  • The click on the arrow expands the menu or the popup window.
Implementation

Create an drop-down Button control

To crate a drop-down Button control:
  1. Create a Button control.
  2. Open the "UI" tab in the control description window and select the type of arrow. The available options are:
    • No arrow (default value): the Button control is a standard button.
    • Drop-down button: the button and the arrow perform the same action.
      You can:
      • run the click code of the Button control.
      • expand the context menu associated with the Button control.
      • display one of the application windows (a popup window presenting a specific menu for example).
    • Split button: the Button control and the arrow run two different actions.
      • The button runs its code.
      • The arrow runs:
        - the arrow click code.
        - the specified action:
        You can:
        • run the click code of the Button control.
        • expand the context menu associated with the Button control.
          In this case, it is possible to check the option "The click on the button will automatically run the last menu option selected via the arrow".
        • display one of the application windows (a popup window presenting a specific menu for example).
  3. Validate the description window.
Characteristics and operating mode of drop-down buttons

Arrow position

According to the button label size and position, or if there is an icon in the Button control, the arrow can be positioned on the right or below the Button control.

Drop-down button that opens a popup window

If your button must open a window, we recommend that you use a window:
  • without titles,
  • without menu,
  • with a mall size,
  • that uses a simple border.
Remark: You have the ability to create a popup window directly ("Blank for popup" in the "Standard" tab of the New window wizard).

Split button that opens a menu and saves the selected option

When you create a split button and select the option "The click on the button will automatically run the last menu option selected via the arrow", the Button control will have the following behavior:
  • the first time the window that contains the button is opened, the button label will show the first option of the context menu (option label and image).
  • when the user expands the popup menu and selects an option:
    • the option label and the associated image automatically appear in the button.
    • the code of the selected option is run.
Remark: if the menu option contains an image, WINDEV automatically manages the different states on the image displayed in the button at runtime.

Drop-down button used 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.

Drop-down button appearance

The "Style" tab of a drop-down button description window allows you to define the characteristics of the divider. You can set:
  • the opacity,
  • the type of arrow (Triangle or chevron),
  • the divider color.
    The "Transparent" option defines a drop-down button without divider.
These options can be set for a single button state or for all button states.
Minimum version required
  • Version 17
Comments
Click [Add] to post a comment