ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Window
  • Overview
  • How to?
  • Remarks and tips
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
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. Example: the main menu of the application can be located 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,...
  • Static: name of connected user, ...
  • Image: avatar, notification bell, number of messages...
  • Button: undo/redo, frequent actions...
  • Link
  • ...
Creating a "burger" menu in the title bar is very easy: simply create a button with a "burger" icon in the title bar. This button will open a popup window or context menu, for example.
CAUTION: 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. In the "Style" tab, check "Customize title bar".
    Customize title bar
    You can:
    • Set the title bar height: by specifying the height in pixels, you can increase the size of the title bar to insert the desired controls.
      Remark: This height can also be changed programmatically 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 main menu is located at a standard position (X and Y values) 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. Validate the description window.
  4. In the window editor, you can now position controls on the title bar or make them "overflow" the title bar: these controls 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.
Remark: If your window contains a main menu and you have changed its position, it will appear 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, you can hide the Close button: in this case, the window must be closed via a custom menu, (e.g., custom menu with 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).
  • CAUTION: The 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: 03/10/2023

Send a report | Local help