PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
  • This lesson will teach you the following concepts
  • Overview
  • Choosing the resolution according to the device
  • Window orientation
  • Practical example
Lesson 6.2. Interface (GUI)
This lesson will teach you the following concepts
  • Choosing the resolution according to the device.
  • Window orientation.

Estimated time: 30 mn

Express

Creating and generating a Universal Windows project is not available in Express version.

Previous LessonTable of contentsNext Lesson
Overview
The Universal Windows 10 applications are available on a PC (in tile mode), on tablets and on phones. WINDEV Mobile allows you to easily create interfaces that adapt to the device used.
Choosing the resolution according to the device
When creating a project, you will have to choose the resolution that will be used for the project windows. Two cases may occur:
  • You are using a single target device: in this case, all you have to do is select this device (PC/Tablet or Phone) in the wizard.
  • You are using several target devices with different screen resolutions: in this case, you must choose the smallest resolution common to all devices. Via the anchoring of controls in the window, the content will be adapted to the resolution.
Window orientation
In Universal Windows 10, a window can have one of the following orientations:
  • Free: the window follows the device orientation,
  • Locked in portrait mode,
  • Locked in landscape mode.
This orientation is defined in the "GUI" tab of the description window of window ("Description" from the popup menu of window).
In the two last cases, no specific operation is required.
For a free window, the organization of controls and their size must adapt to the orientation. The anchoring mechanism must be used to get a proper result.

Practical example

  • Open (if necessary) the "My_UWA_Project" project that was created in the previous lesson.

Answer

A corrected project is available. To open this project, in the WINDEV Mobile home page (Ctrl + <), click "Tutorial" and select "My UWA project (Answer)".
In our example, the project was created for a phone, and we have tested it in portrait mode in the simulator.
We are now going to run its test in landscape mode in the simulator.
  • Run the project test ( among the quick access buttons).
    1. The window is displayed in portrait mode.
    2. In the simulator, click the menu in the shell ( ).
    3. A popup menu is displayed. Modify the window orientation with the "Rotation" option.
    4. The window orientation changes on the screen. In our example, the button location does not change: it does not adapt to the screen orientation.
  • We are now going to modify our window in order for the "Display" button to be centered in the window and to remain centered regardless of the device orientation.
  • Stop the test and go back to the editor.
  • To center the button in the window:
    1. Select the button (click the button).
    2. On the "Alignment" pane, in the "Centering and distribution" group, click "Center in the parent (horz)".
  • In order for the button to remain centered in the window, we are going to use the control anchoring:
    1. Select the button (click the button).
    2. Display the popup menu (right mouse click).
    3. Select "Anchor": the window for defining anchors is displayed:
    4. Select "Horizontally centered" and validate (green button).

      Note

      In the window displayed in the editor, you will notice the little red arrows in the control. These arrows indicate that the control is anchored.
  • Run the project test ( among the quick access buttons):
    • The button is centered in portrait mode.
    • Change the orientation of simulator.
    • The button remains centered in landscape mode.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment