ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

This content has been translated automatically.  Click here  to view the French version.
Help / Developing an application or website / Controls, windows and pages / Window
  • Overview
  • How to?
  • Remarks and tips
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
Custom title bar with menus and controls
Overview
There is a new trend in UI design: application menus in the title bar!
In version 26, you can use any type of control in the title bar of a window.
Interfaces are cleaner and have a modern look. An example: the application's main menu can be displayed in the title bar..
Positioning controls in the title bar also saves space.
You can position the controls in the editor, in WYSIWYG mode.
All types of controls can be positioned in the title bar:
  • Menu,
  • Edit control: search,...
  • Label: logged-in user name, ...
  • Image: avatar, notification tick, number of messages...
  • Button: undo/redo, frequent action...
  • Link
  • ...
Creating a "burger" menu in the title bar is very simple: simply place a "burger"-look button in the title bar.. This button will open a popup window or context menu, for example.
ATTENTION: To use this feature:
  • the computer running the application must run Windows 8 or higher. If the computer uses an earlier version, the controls placed in the title bar will not be displayed.
  • in TSE mode, the computer must use at least Windows Server 2016.
How to?
To allow the use of a custom title bar in a window:
  1. Open the window description.
  2. On the "Style" tab, check "Customize title bar".
    Customize title bar
    It is possible to:
    • Set title bar height: the height, given in pixels, can be used to simply increase the size of the title bar to easily insert the required fields..
      Note: This height can also be programmed using the TitleHeight property.
    • Show title: If this option is checked, the window title will be displayed in the custom title bar.
    • Customize position of the main menu: By default, the position of the main menu (X and Y values) corresponds to the natural position of the menu in the title bar.. These values can be modified (title bar height, menu X and Y position) to customize the title bar.
    • Set the background color of the window for active/inactive states,
    • Set the color of the text and icons for active/inactive states,
    • Define the font used.
  3. Confirm changes and close the description window.
  4. In the window editor, you can now position your fields on the title bar or have them "overflow" the title bar: these fields will be displayed at runtime..
    • These controls can be programmed in the same way as the controls in the window client area.
    • It is recommended to use controls that are "global" to the window or application, or to propose options that are frequently used.
Note: If your window contains a main menu and you have customized its position, the main menu appears at the specified position..

Remarks and tips

  • You can define a specific color for inactive windows (windows without focus). If two very different background colors are set for the active/inactive states of the window, it is important to make sure that the labels of the controls added in the title bar are readable, regardless of the background color applied.
  • Depending on the desired UI, you can also hide the icon and system menu via the "Show icon and system menu" option in the "Style" tab of the window description.
  • If you position a ribbon in the title bar, and if the system icon is not displayed, don't forget to reposition the first pane of the ribbon if necessary (using the sizing handles).
  • If the title bar is customized, the window close icon can be omitted: in this case, window closing must be handled by the custom menu (in the case of a custom menu using a Ribbon control)..
  • To perfectly integrate a custom menu into the title bar, it is recommended to set the same color for:
    • the background color of the title bar (active),
    • the background color of the bar option (normal).
  • WARNING: StrikeOut title bar customization is not compatible with the MDI standard.. It is not possible to customize the title bar of a "parent" or "child" MDI window because this customization does not support all the properties necessary to respect MDI constraints.
Minimum version required
  • Version 26
Comments
Click [Add] to post a comment

Last update: 09/21/2024

Send a report | Local help