PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • How to proceed?
  • Step 1: Creating the image that defines the shape of the window
  • Step 2: Using WDClip to generate the clip code
  • Step 3: Code generated by WDClip
  • Step 4: Including the code in the window
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
Warning
From version 16, WDClip is not supplied with WINDEV anymore.
How to proceed?
To easily define the shape of a window, WDClip uses a shape defined by an image.
This image will be used to specify the visible and invisible sections of the window.
WDClip studies the image and generates the WLanguage code that will be inserted into the different processes of the window.
The different steps:
  1. Creating the image that defines the shape of the window.
  2. Using WDClip.
  3. Generating the clip code with WDClip.
  4. Including the code generated by WDClip in the window.
Step 1: Creating the image that defines the shape of the window
With a drawing software or an image touch-up software, create an image used to define the shape of the window.
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:
Step 2: Using WDClip to generate the clip code
To generate the clip code:
  1. Start WDClip ("Tools .. WDClip - Window clipping").

  2. Select the transparency color ("Invisible color"). This color is "Light magenta" by default.
  3. Then, select the path of the image defining the shape of the window. The generation of the clip code is proposed.
  4. Validate. WDClip generates the clip code.
A preview of the clipped window is automatically displayed (press the [ESC] key to exit from the preview).
Step 3: Code generated by WDClip
When generating the clip code, WDClip creates:
  • several WLanguage processes,
  • a WLanguage procedure.
Click the "Copy the procedure" button to display the code generated by WDClip.
  1. This code must be copied into the "Declaration of global variables" process of the window.
  1. This code must be copied into the "Resizinge process of the window. This code is useful if you are using the 9-image mode (see Using the 9-image mode with a clipped window).
  1. This code must be copied into the "Closing" process of the window.
  1. This code must be copied into a new local procedure named "ClipWindow".
Note: A "Copy the code" button is available for each WLanguage process.
Step 4: Including the code in the window
To include the clip code of the window:
  1. Open WINDEV if necessary.
  2. Create the window to clip if necessary ("File .. New .. Window").
  3. Copy the different codes generated by WDClip into the processes of this window ("Declarations of global variables", "Resizing" and "Closing" processes).
  4. Create a new procedure local to the window (F4 key). This procedure is named "ClipWindow". The code window of this procedure is displayed.
  5. Replace the existing code by the one generated by WDClip ("Local procedure to create in the window" code).
  6. In the window editor, display the window to clip and display the description of the window ("Description" from the popup menu of the window).
  7. Select the "Image" tab and specify the image used for clipping in the "Background image" option.
  8. Select the "Details" tab and check "Move by background".
  9. Select the "Style" tab and select the "<None>" element in the "Border type" combo box.
  10. Validate the description of the window ("OK" button).
  11. Resize the window according to the image.
Note: If your window has a complex shape, don't forget to add a button or a process for intercepting the keys with KeyPressed to close the window (the [ESC] key for example).
Minimum required version
  • Version 9
Comments
Click [Add] to post a comment