Clipping the window according to an image

WINDEV, WEBDEV AND WINDEV MOBILE
ONLINE HELP

Version:

Home | Sign in | English

Overview
Clipping the window according to the background image
The main steps
Notes
Creating the image that defines the window shape
Using a clipped window

WINDEV

WEBDEV

WINDEV Mobile

Others

See also

Clipping the window according to an image

Overview

An image can be used to easily define the shape of a window. WINDEV analyzes this image and it is using 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:

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 top left corner of the image.
  See the next paragraph for more details.
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).
  Note: You also have the ability to configure the transparency options of the windows. See Translucent effect of windows for more details.
Validate. The window is automatically clipped in the editor.

Notes

WDClip can also be used to clip a window according to a background image.
See the help about WDClip for more details.
Caution: Some specific shapes (hole for example) cannot be performed via "Clip the window". Only WDClip enables you to create some windows that use these specific shapes.
See the help about WDClip for more details.
The project RAD or the window RAD proposes several skin templates of clipped windows (the Halo skin template for example).

Creating the image that defines the window shape

The image that defines the shape of the window is created via a drawing software.

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.