Transformations allow changing the shape, size and/or position of an element on screen at runtime.
Transformations are applied to elements in the UI through classes.
A transformation is created in the theme and associated with a class; then, the transformation is automatically applied to the elements that use that class.
This makes it possible to transform elements both at design time and at runtime since classes can be assigned at any of these times.
How is a transformation created?
Transformations are in the theme, grouped under the Transformations node. They are added and changed in the same way as classes, and then they are referenced by classes in their Transformation property.
If a theme-class has a transformation and the Animated property enabled, the transformations will be animated -- to the extent that the platform supports it. Also, it's possible to indicate its duration.
All transformations have the properties below, which allow defining the changes to be made when it is applied:
|
Property
|
Values
|
|
Name
|
Name of the transformation
|
|
Anchor Point X
|
left, center, right, xx %, xx dip
|
|
Anchor Point Y
|
top, middle, bottom, xx %, xx dip
|
The values of properties Anchor Point X and Anchor Point Y indicate the point at which the transformation functions start to be applied.
In this way, points can be indicated such as {left, top} which is the same as {0%, 0%}, {center, middle} = {50%, 50%}, or any arbitrary value with percentages.
The default value is always {center, middle} = {50%, 50%}.
* xx % values are relative to the initial size of the control when the transformation is applied.
Translate group of properties
The properties in this group allow changing the position of an element on screen.
|
Property
|
Values
|
|
Type
|
TranslateBy / TranslateTo
|
|
Value X
|
xx %, xx dip
|
|
Value Y
|
xx %, xx dip
|
|
Relative To
|
Explained below
|
The Type property indicates the reference framework to interpret the values:
TranslateBy indicates that the control will be moved the distance calculated by value from the source point of the control.
TranslateTo indicates that the movement is absolute to the point indicated by the values X/Y (and relative to).
Examples:
"TranslateBy X 20% relative to form" moves the control to the right 20% of the form width in relation to its original position.
"TranslateTo X 20% relative to form" will move the control (to the left or right) so that its left border is placed on the point located at 20% of the screen size.
TranslateTo and TranslateBy relative to control are equivalent.
The values for Value X and Value Y in a translation are percentages or dips. If the translation is to be made in only one coordinate, the other one must be set to zero.
The Relative To property will be explained below.
Scale group of properties
|
Property
|
Values
|
|
Value X
|
xx %, xx dip
|
|
Value Y
|
xx %, xx dip
|
|
Relative To
|
Explained below
|
The values for Value X and Value Y are percentages or dips. If the scaling is to be made in only one coordinate, the other one must be set to 100%.
The Relative To property will be explained below.
Resize group of properties
The properties are the same as for Scale and they have the same meaning.
The Resize transformation is similar to Scale, but their effects are different in that Scale makes the scaling at the content and control level, while in Resize the scaling is made at the control level only.
The visual difference is that when a control is scaled, the size of its content also changes proportionally; when a control is resized, its content remains unchanged. Therefore, 'resizing' a control may imply that certain contents are no longer displayed. 'Scaling' a control may distort it or make it loose definition.
Rotate group of properties
|
Property
|
Values
|
|
Angle
|
xxx º
|
It indicates the angle of the rotation in degrees.
Relative To properties
This property indicates the size to be taken into account when the transformation is applied.
The values that can be used by this parameter are as follows:
Current control
Parent control
Form
This value applies to dimensions. However, it doesn't apply to angles.
For example, if I have a layout with a table of 400x300 which contains an image of 100x100, if I scale (100%, 100%) the image, the final size will be:
100x100 if relative-to = Current control
400x300 if relative-to = Parent control
The default value is Current control.
Available for iOS as of GeneXus Tilo Beta 2.
Available for Android as of GeneXus X Evolution 3 Upgrade 4.
NOTE: Resize is not implemented in Android yet.