ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Window
  • Overview
  • Clipping the window according to the background image
  • The main steps
  • Creating the image that defines the window shape
  • Using a clipped window
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
An image can be used to easily define the shape of a window. WINDEV analyzes this image and uses the shape defined by the image. This image will be used to specify the visible and invisible sections of the window.
This allows you to create outstanding interfaces.
Clipping the window according to the background image

The main steps

WINDEV allows you to use an image directly from the editor to define the shape of the window. To do so:
  1. Create the image that will be used as background image of the window. The transparency color of this image must be defined. This color can be:
    • magenta.
    • the color of the first pixel found in the upper-left corner of the image.
      For more details, read the following paragraph.
  2. In the description of the window:
    • check "Clip the Window" in the "Image" tab. WINDEV proposes to automatically adapt the style options of the window in order to get a better result.
    • specify the transparency options corresponding to the background image used (use magenta as transparency color for example).
      Remark: You also have the ability to configure the transparency options of the windows. For more details, see Translucent effect of windows.
  3. Validate. The window is automatically clipped in the editor.
Creating the image that defines the window shape
The image that defines the shape of the window is created via a drawing or image editing tool. The different areas that make up the shape of the window must be together: there should be no "gaps".
In this image, define the color that will be used as transparency color when clipping the window ("Light Magenta" for example). All the areas containing this color will be made invisible when the clipped window is displayed.
Caution: The borders should be as sharp as possible (no gradient, ...) in order to avoid the unexpected display effects when the clipped window is previewed or opened. Indeed, a single color is used to define the transparency for the entire image.
Example:

  • An image whose borders are very sharp will produce a perfectly clipped window:

  • An image whose borders are smoothed will produce a window that will not be perfectly clipped:
Using a clipped window
WINDEV allows you to:
  • use a drop-down menu in the clipped windows. To do so, specify the position of the main menu in the "Details" tab of the description window.
  • associate a context-sensitive help with the window (via the mechanism of advanced tooltips). To do so, create a button whose preset action is "Context-sensitive help".
  • manage the translucent effect of windows.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help