View::Frame or Bitmap Frame does not scale assigned bitmap nicely

asked Mar 9, 2018 in GUI Development by martin


when i assign gradient button bitmapthis bitmap to the view frame, the scaled output is like distorted background

It seems that it does not scale in the vertical. If i disable vertical scaling the output is ok but it cannot be taller than the height of the assigned bitmap.

Actually this image is scaled in qml without a problem..

Resources::ButtonGray for instance does scale nicely but it does not have any gradient in the interior.

(but actually i want a gradient but i don't know how i can add it as an overlay)

Thanks for a hint, maybe i should not use a gradient in the image, which would be ok if i knew a straight forward method to add a gradient (or make

colorTL,TR,BL,BR work too....




1 Answer

0 votes
answered Mar 9, 2018 by Manfred Schweyer

Hi Martin,

let me refer to the documentation of the Frame view and the 9-slice image scaling.

The resizing of the image is not done by scaling (which is quite slow on many targets) it is done by repetition of the different slices.

This means, when you stretch an image with a gradient in vertical direction, the inner part of the gradient is drawn several times until the desired height is reached. As a result you get this steps within the gradient.

If you really want to scale an image, you can use the property Alignment of the Image view. Please be aware, that scaling is not hardware accelerated on many targets (e.g. MCUs) - same as with qml ;-)

Best regards,


commented Mar 9, 2018 by martin
Thanks Manfred for pointing me to the documentation. I was not aware of how the interior is generated.

Image view is not what i wanted, because of the resolution loss. Obviously qml BorderImage does behave differently here, i.e.

specifies a tiling mode which is scaling or stretch by default.

So this can be seen as a tradeoff...

Actually how do you add a gradient here. I could use Resources::ButtonGray in View::Frame

and then add a gradient Filled Rectangle on top of it, but it did not work ;-)

because of the hard edges against round edges from the button. Actually i have to override paint then.

Is there maybe something else?

commented Mar 9, 2018 by Manfred Schweyer
As soon as you do some scaling/streching with the inner area you will have a scale operation instead of a copy operation. Same with qml.

Considering embedded systems I would recommend to design the button in a size so that it will match to the design of the entire application, without scaling or streching. Maybe it is sufficient to have two or three buttons in different heights and resizing is only done in horizontal direction. But this depends on the entire design of your UI applicaton.

The idea of Frame views is not always applicable to frames with a gradient content.

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint