Accessing a UI element's dimension (width/height) from code is not so very intuitive?

Hi all,

one thing I found a bit tricky, is changing the width/height of a UI element from code. I really didn't know which property is relevant but I noticed in the RectTransform sometimes there's 'width'/'height' written or bottom/right - There was no width/height properties code-wise - So I wanted to know what values they're displaying in their editor so I took at a peek at their RectTransform editor and saw that it's 'deltaSize' - It turns out that depending on your anchor configuration, this size could act as width/height or an offset. Not very straight forward, nor counter-intuitive. I'd be nice if there's a straight-forward way to manipulate the width/height directly.

Am I missing something? - What is the proper way to access (get&set) a UI element's (say Image) dimensions (width/height) from code regardless of anchor settings?

Cheers.

 

sizeDelta is always the width/height: Depending on your anchor configuration will change how increasing/decreasing the width/height moves the element, but it will still be the width/height. Same for anchoredPosition: Use that to change the "x/y" value of the element.

If you stick to sizeDelta and anchoredPosition, and set up your anchors properly, moving things on the UI will become easy and consistent.

 

In the RectTransform component in the Inspector, just above the Anchors tab there is an anchor presets button. If you set this one to the middle centre option (the one with the red lines through it horiz and vert) then the
GetComponent<RectTransform>().rect.width works fine, whereas with the stretch options it gives weird results probably due to the anchors positioning changing.