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.
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%}.
Note: xx % values are relative to the initial size of the control when the transformation is applied.
Allows changing the position of an element on the screen.
| Property |
Values |
| Type |
TranslateBy / TranslateTo |
| Value X |
xx %, xx dip |
| Value Y |
xx %, xx dip |
| Relative To |
Refer here. |
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.
When a control is scaled, the size of both control and content changes proportionally.
| Property |
Values |
| Value X |
xx %, xx dip |
| Value Y |
xx %, xx dip |
| Relative To |
Refer here |
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%.
When a control is resized, the size of it changes proportionally. Unlike Scale, the control's content remains unchanged (only changes the size of the control).
Resize the control at control level only (unlike Scale properties group).
| Property |
Values |
| Value X |
xx %, xx dip |
| Value Y |
xx %, xx dip |
| Relative To |
Refer here |
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%.
Notes:
- When resizing a control, may imply that certain contents are no longer displayed. On the other hand, when scaling a control, may distort it or make it loose definition.
- Angular doesn´t support it. CSS doesn't offer a native way of scaling an element without scaling its contents.
It indicates the angle of the rotation in degrees.
| Property |
Values |
| Angle |
xxx º |
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 (default)
- 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 property is Current control
- 400x300 if Relative To property is Parent control
Note for Angular: Only "Current Control" is supported. CSS only supports this value natively.
Generators: Android, Angular, Apple
See Also