PC SOFT

WINDEV的在线文档

  • Overview
  • Images associated with a button in a window
  • Overview
  • Special case: the button's states are managed via images
  • Animation
  • Positioning of the image and text
  • Images associated with a button in a page
  • Advanced configuration of images
  • Configuring the display mode (button in a window)
  • Image of multilingual button
文档页面当前正在翻译。对于此延迟我们深表歉意。
您可以自愿地帮助我们翻译您想要的文档段落,然后只需通过以下地址与我们联系:info@cn.windev.com
产品
WinDevWebDev-服务器代码WebDev-浏览器代码WinDev Mobile报表和查询
平台
WindowsLinuxWindows MobileWindows PhoneWindows Store appsAndroidAndroid Widget iPhone/iPad
语言
JavaPHPAjax用户代码(MCU)外部语言
数据库
HFSQLHFSQL Client/Server存储过程HF 5.5OLE DBODBC本地访问

Images and buttons

Overview
To optimize the appearance of your screens or sites, you have the ability to use images in your buttons.

Images associated with a button in a window
WinDevWindows Store apps

Overview

In a window, two types of images can be used to define the image associated with a button:
  • image: this image will be stacked on the button regardless of its shape. Example: button with an image and without border:
    Tip: For better results, the image must be 5 pixels smaller than the size of the button (in width and in height).
  • image of the button border: this image is used to easily redefine the shape of the button. For example:
These images are selected during the description of the button ("General" tab):

Notes:

  • The "Catalog" button allows you to choose the images (border and pictograms) among a library of images supplied with WinDev or WinDev Mobile.
  • The buttonis used to edit the options of the image (see Configuring the display mode (button in a window)).

WinDevWindows Store apps

Special case: the button's states are managed via images

WinDev and WinDev Mobile allow you to manage the different states of the button: normal, pressed, grayed, current and rollover. See The states of a button for more details.

If the states of the button are managed by images, you can:

  • use two images (a border image and an image) each containing 5 states . This solution allows you to stack the image on the border image and to re-use the border image with another image.
  • include the image in the border image. Only the border image will be specified in the description of the image control.
Normal button, button pressed, grayed, selected, hovered
Normal button, button pressed, grayed, selected, hovered

If the image contains several states, WinDev allows you to manage:

  • the enlargement of the image (if the size of the button is greater than the image for example). Several possibilities are available:
    • No stretching
    • Stretching in width (3 images). The dividing rule is as follows:
      • the image is divided into three sections
      • the section 1 corresponds to the left area
      • the section 3 corresponds to the right area
      • the section 2 corresponds to the middle area. The size of this section is equal to 16 pixels. This part will be repeated as many times as necessary in order for the image of the button to have the requested size.
    • Stretching in width and in height.
    • 16版本和更高版本
      Adaptation of the image via the 9-image mode.
      16新版本
      Adaptation of the image via the 9-image mode.
      Adaptation of the image via the 9-image mode.
  • WinDevWindows a halo around the button.
    To avoid display problems when several buttons are positioned next to each other, you must define the size of the halo in pixels (width and height).

WinDev

Animation

You also have the ability to animate the images of buttons. To do so, the button can:
  • use an animated image. In this case, the image of the button corresponds to an animated image format (animated Gif for example). The animation is managed automatically.
  • use an image that will be animated by WinDev or WinDev Mobile. In this case, the image contains all the drawings of the animation (the horizontal drawings represent the states of the button). The number of steps in the animation must be specified in the "General" tab of the description window of the Button control.

WinDev

Positioning of the image and text

When an image contains a caption and a pictogram (image), you have the ability to configure the relative position of the image and text in the control style:
  1. Display the description window of the Button control ("Description" from the popup menu).
  2. Display the "Style" tab.
  3. Select the "Caption" element and configure the position of the caption via the "Position" option.
19版本和更高版本
WinDev The "Free positioning" option allows you entirely manage the position of the image and caption. The arrow beside the option allows you to access the configuration window:
The red section corresponds to the caption area and the blue section corresponds to the image area. You have the ability to:
  • Configuring one of the button states or all the button states.
  • Specify the exact position of the image and caption (to the pixel).
  • Specify a different anchoring for the image and caption.
Notes:
  • the free positioning can only be used if the button used a specific pictogram. If the pictogram is included in the background image, free positioning is not available.
  • Once the free positioning has been set for a button, the "Edit the position of the caption and pictogram" option (popup menu of the button) lets you display the positioning configuration window.
  • The arrow buttons propose several options allowing you to easily handle the image or the caption: Snap up, Snap down, Center, ...
19新版本
WinDev The "Free positioning" option allows you entirely manage the position of the image and caption. The arrow beside the option allows you to access the configuration window:
The red section corresponds to the caption area and the blue section corresponds to the image area. You have the ability to:
  • Configuring one of the button states or all the button states.
  • Specify the exact position of the image and caption (to the pixel).
  • Specify a different anchoring for the image and caption.
Notes:
  • the free positioning can only be used if the button used a specific pictogram. If the pictogram is included in the background image, free positioning is not available.
  • Once the free positioning has been set for a button, the "Edit the position of the caption and pictogram" option (popup menu of the button) lets you display the positioning configuration window.
  • The arrow buttons propose several options allowing you to easily handle the image or the caption: Snap up, Snap down, Center, ...
WinDev The "Free positioning" option allows you entirely manage the position of the image and caption. The arrow beside the option allows you to access the configuration window:
The red section corresponds to the caption area and the blue section corresponds to the image area. You have the ability to:
  • Configuring one of the button states or all the button states.
  • Specify the exact position of the image and caption (to the pixel).
  • Specify a different anchoring for the image and caption.
Notes:
  • the free positioning can only be used if the button used a specific pictogram. If the pictogram is included in the background image, free positioning is not available.
  • Once the free positioning has been set for a button, the "Edit the position of the caption and pictogram" option (popup menu of the button) lets you display the positioning configuration window.
  • The arrow buttons propose several options allowing you to easily handle the image or the caption: Snap up, Snap down, Center, ...

Images associated with a button in a page

Advanced configuration of images
WinDevWindows Store apps

Configuring the display mode (button in a window)

When describing the images used for a button, the display mode of the images can be configured via. You have the ability to manage:
  • the display mode of the image
  • its rotation
  • its transparency
  • its symmetry.
Note: If the image is a multilingual image, the configuration of the display mode applies to all the selected image files.

Image of multilingual button

If your site or your application is multilingual, a different button image can be selected for each language. This option is useful when the images associated with the button contain the caption of the button.

To manage the multilingual images:

  1. Display the description of the Button control.
  2. Click. The window for managing the multilingual images is displayed. By default, the same file is associated with all the languages supported by the window or by the page.
  3. For each language, click the [...] button and select the image corresponding to the language. At run time, the corresponding button image will be displayed according to the language chosen by Nation.
  4. Validate. The "Multilingual value" caption appears in the name of the image.