- Images associated with a Button control in a window
- Special case: images to manage the Button control states
- Animations in the Button control
- Image and text positioning
- Customize the shape of the Button control via the style options
- Images associated with a button in a page
- Image of button and CSS style
- Image of button and specific options
- Advanced configuration of images
- Configuring the display mode (button in a window)
- Image of multilingual button
WINDEV, WEBDEV and WINDEV Mobile include many features to improve the appearance of applications and sites.
In a page, you can define images to be used in the control from the CSS style options. You can also use different types of images for the control.
Most of these options can be defined in the "General" and "Style" tabs of the control description window.
Images associated with a Button control in a window
In a window, you have two options to define the image associated with a Button control:
- image: this image will appear over the button, regardless of its shape.
Example: Button control with an image and without border: Tip: For best results, the image should be 5 pixels smaller than the Button control (horizontally and vertically).
- image of button border: this image is used to easily redefine the button shape. For example:
These images are selected in the control description window ("General" tab):
- The image library included with WINDEV or WINDEV Mobile allows you to choose the images (border and image) associated with the control. To open this library, expand the button and select "Catalog".
- To edit the image options (display mode, symmetry, ...), expand the button and select "Display options, transparency, symmetry" (see Configuring the display mode (button in a window)).
- You can only set the image of the button border.
Special case: images to manage the Button control states
WINDEV and WINDEV Mobile allow you to manage the different button states: normal, pressed, grayed out, focused and hover. For more details, see States of a Button control
If the states of a Button control are defined using images, you can:
- use two images (image displayed in the control and image in the frame), each with 5 states. With this solution, you can use the same border image for multiple Button controls and use another image on top.
- include the image displayed in the control directly in the border image. In this case, specify only the border image in the control description.
Idle, pressed, grayed out, selected, hovered button
For a border image (and/or image displayed in the button) with multiple states, WINDEV allows you to:
- stretch the image (if the Button control is larger than the image, for example). Several possibilities are available:
- No stretching.
- Stretch horizontally (3 images). The following criteria are used:
- the image is divided into three sections
- section 1 corresponds to the left area
- section 3 corresponds to the right area
- section 2 corresponds to the middle area. The size of this section is equal to 16 pixels. This section will be repeated as many times as necessary until the button image reaches the desired size.
- Stretch horizontally and vertically.
- Custom stretch with 9-slice scaling.
- a halo around the Button control.To avoid display problems when multiple buttons are positioned side by side, the halo size must be defined in pixels (horizontally and vertically).
Animations in the Button control
You can also animate the images of Button controls. To do so, the Button control can:
- use an animated image. In this case, the image displayed in the control will be animated (e.g., animated GIF). The animation is automatically managed.
- use an image that will be animated by WINDEV or WINDEV Mobile. In this case, the image displayed in the control contains a set with 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 Button control.
Image and text positioning
When an image contains a caption and an icon (image), you have the ability to configure the relative position of image and text in the control style:
- Display the description window of Button control ("Description" in the context menu).
- Display the "Style" tab.
- Select the "Caption" element and configure the caption position via the "Position" option.
The "Free positioning" option allows you entirely manage the position of 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 can:
- Configure one of the button states or all button states.
- Specify the exact position of image and caption (to the pixel).
- Specify a different anchoring for the image and caption.
- the free positioning can only be used if the button used a specific icon. If the icon is included in the background image, the free positioning is not available.
- Once the free positioning is defined for a button, you can open the position settings by selecting the "Edit caption and icon position" option (context menu of the button).
- The arrow buttons propose several options allowing you to easily handle the image or caption: Snap up, Snap down, Center, ...
Images associated with a button in a page
In a page, the images associated with a button can be defined in the style of button:
- via the CSS style ("CSS button" element of "Style" tab in the control description).
- via the image options ("Button (Images)" element of "Style" tab in the control description).
Image of button and CSS style
To define the image associated with the button via the CSS style:
- Go to the "Style" tab of the control description window.
- Select the "Button (CSS)" element.
- Display the advanced options ("More options" link).
- In the "Background" tab, you have the ability to define the image used and its characteristics.
Image of button and specific options
To define the image associated with the button via the WEBDEV options:
- Go to the "Style" tab of the control description window.
- Select the "Button (Images)" element.
- Two types of images can be used:
- An image set.
This image set contains:
- horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
- vertically: the different states for the button animation (5 or 6 steps are recommended).
- Independent images. In this case, only the normal state and hovered state images are supported.
- Normal: this image will be used to represent the button.
- Hover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no hover effect will be available.
- The "Catalog" option of the button allows you to choose the two types of images from a library of images provided with WEBDEV. To do so:
- Click the button and select "Catalog".
- Select the "<All>" theme.
- Select "Graphic buttons".
- Select the desired button.
- Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
- The "Merge images in a set" option avoids the blinking effect when the image changes on mouse hover.
Remark: The "Stretch" option is used to manage the stretching of images associated with the button when the button is resized in the editor. You can:
- stretch the image in width,
- stretch the image in width and height,
- use the 9-slice scaling to configure the stretching.
Advanced configuration of images
Image of multilingual button
If your site or 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 multilingual images:
- Display the description of Button control.
- Click the button found beside the image path.
- Select "Multilingual".
- The window for managing multilingual images is displayed. By default, the same file is associated with all the languages supported by the window or by the page.
- For each language, click the button. You can:
At runtime, the corresponding button image will be displayed depending on the language selected by Nation.
- Select the image corresponding to the language on your computer ("Browse" option).
- Select the image corresponding to the language in the image catalog ("Catalog" option).
- Validate. The "Multilingual value" caption appears in the image name.
This page is also available for…