Layout of user interface elements
User interface frameworks may provide an environment for developers to design and arrange user interface elements within a design layout to create a user interface. Many times UI elements comprise non-integer size values (e.g., height, width, position, etc.) due to text, user specified data, and/or centering, for example. Rendering UI elements at non-integer size values may create display artifacts because of sub-pixel rendering. Accordingly, as provided herein, a set of rules may be applied during design layout to non-integer size values to create integer size values (e.g., non-integer size values may be rounded to the nearest integer). Using integer size values in arranging UI elements within a design layout, allows undesirable display artifacts to be mitigated during rendering.
1. A method for arranging a user interface (UI) element within a user interface design form in a user interface programming environment at design time, comprising:
responsive to a developer placing a UI element within a user interface design form in a user interface programming environment at design time:
identifying a non-integer size value corresponding to the UI element, the non-integer size value comprising a non-scaled value specified at design time;
applying a set of rules to the non-integer size value to produce an integer value; and
updating the non-integer size value with the integer value to create an updated integer size value; and
arranging the UI element within the user interface design form at design time based upon the updated integer size value, the arranging not bound to a low level rendering layer.
2. The method of claim 1 , comprising:
calculating a centering parameter for the UI element based upon a horizontal centering parameter and a vertical centering parameter;
identifying the centering parameter as comprising a non-integer centering value;
applying the set of rules to the non-integer centering value to produce an integer centering value; and
updating the centering parameter with the integer centering value to create an updated centering parameter.
3. The method of claim 2 , comprising:
arranging the UI element within the user interface design form based upon the updated centering parameter.
4. The method of claim 1 , comprising:
determining that the UI element comprises a child UI element;
identifying a child non-integer size value corresponding to the child UI element;
applying the set of rules to the child non-integer size value to produce a child integer value; and
updating the child non-integer size value with the child integer value to create an updated child integer size value.
5. The method of claim 4 , comprising:
arranging the child UI element within the user interface design form at design time based upon the updated child integer size value.
6. The method of claim 1 , the non-integer size value comprising at least one of a width size value, a height size value, a margin size value, or a padding size value.
7. The method of claim 1 , the non-integer size value comprising a non-user specified size value.
8. The method of claim 1 , the non-integer size value comprising a user specified size value.
9. The method of claim 1 , the set of rules comprising a rounding rule that rounds a non-integer value to a nearest integer value.
10. The method of claim 4 , comprising:
creating a tree comprising the UI element and the child UI element.
11. A system for arranging a user interface (UI) element within a user interface design form in a user interface programming environment at design time, comprising:
one or more processing units; and
memory comprising instructions that when executed by at least one of the one or more processing units perform operations comprising:
responsive to a developer placing a UI element within a user interface design form in a user interface programming environment at design time:
identifying a non-integer size value corresponding to the UI element, the non-integer size value comprising a non-scaled value specified at design time;
applying a set of rules to the non-integer size value to produce an integer value; and
updating the non-integer size value with the integer value to create an updated integer size value; and
arranging the UI element within the user interface design form at design time based upon the updated integer size value, the arranging not bound to a low level rendering layer.
12. The system of claim 11 , the operations comprising:
calculating a centering parameter for the UI element based upon a horizontal centering parameter and a vertical centering parameter;
identifying the centering parameter as comprising a non-integer centering value;
applying the set of rules to the non-integer centering value to produce an integer centering value; and
updating the centering parameter with the integer centering value to create an updated centering parameter.
13. The system of claim 12 , the operations comprising:
arranging the UI element within the user interface design form based upon the updated centering parameter.
14. The system of claim 11 , the set of rules comprising a rounding rule that rounds a non-integer value to a nearest integer value.
15. The system of claim 11 , the operations comprising:
determining that the UI element comprises a child UI element;
identifying a child non-integer size value corresponding to the child UI element;
applying the set of rules to the child non-integer size value to produce a child integer value; and
updating the child non-integer size value with the child integer value to create an updated child integer size value.
16. The system of claim 15 , the operations comprising:
arranging the child UI element within the user interface design form at design time based upon the updated child integer size value.
17. A computer-readable storage device comprising instructions that when executed perform a method for arranging a user interface (UI) element within a user interface design form in a user interface programming environment at design time, comprising:
responsive to a developer placing a UI element within a user interface design form in a user interface programming environment at design time:
identifying a non-integer size value corresponding to the UI element, the non-integer size value comprising a non-scaled value specified at design time;
applying a set of rules to the non-integer size value to produce an integer value; and
updating the non-integer size value with the integer value to create an updated integer size value; and
arranging the UI element within the user interface design form at design time based upon the updated integer size value, the arranging not bound to a low level rendering layer.
18. The computer-readable storage device of claim 17 , comprising:
calculating a centering parameter for the UI element based upon a horizontal centering parameter and a vertical centering parameter;
identifying the centering parameter as comprising a non-integer centering value;
applying the set of rules to the non-integer centering value to produce an integer centering value; and
updating the centering parameter with the integer centering value to create an updated centering parameter.
19. The computer-readable storage device of claim 18 , comprising:
arranging the UI element within the user interface design form based upon the updated centering parameter.
20. The computer-readable storage device of claim 17 , the set of rules comprising a rounding rule that rounds a non-integer value to a nearest integer value.