VIsual element doesn't have exact size?

I have 4 child elements like this (.test):

They all have the same size 150x150, however, when i see the debugger their bounding box aren’t exactly 150.

some has 150.43x149.57, some has 150.43x150.43

I’m new to ui-toolkit so do i need to understand anything first ?

This is most probably because of the scaler and the rounding the float I believe. I think in the end they’re being rendering at 150x150, but the real size values are 150.43 (150 as rounded), and 149.57 (150 as rounded).

The pixels dimensions in UI toolkit are not screen pixels, but more like points, and the layout engine does align things up so that the border of 1 pixels are rendered accurately on screen (and not blurred).

I you are using the editor with a monitor having a scaling factor different than 100%, the values will be adjusted on screen. At runtime, the scaling is driven by the panelSettings options: I would personally go with constantPixelSize if dimensions are really critical to you, and drive the scaling factor using whole numbers. The default of “scale with screen size” is probably the worst options in this regard…

The bounding box in the UI debugger does not necessarily reflect the exact dimension of the element, as they are the one used internally for speeding the picking of element when dispatching events. It may be larger especially when rotations are involved but are correct as long as everything is contained inside. Look for the layout field instead (it should be the same in most cases).

If you have any question related to the rounding, don’t hesitate to ask. I am not sure anything related to that is present in the documentation.

Thanks, now I understand.