[SOLVED] Best way to create image based button with variable size

Binary91

Hi,

I'm trying to create a button (background is an image with ROUND corners) that streches over the whole horizontal of a mobile device.

As I also have practice in web designing, I know that this is solved with three images:

the left part of the button with its two round corners (about 5 pixels, not strechable)
the main part of the button --> a 1 pixel extract of the button that is repeated as often as needed
the right part of the button with its two round corners (also about 5 pixels, not strechable)

My question now:
Is this also the most comfortable solution for QML?
If not, how can I manage variable image sizes when simple streching would result in horrible look (like ellipse buttons --> not the wanted effect) ?

Thank you in anticipation!

sierdzio

Take a look at "BorderImage":http://doc.qt.io/qt-5/qml-qtquick-borderimage.html QML component.

Binary91

Hi sierdizio,
thank's for that hint, that is a great functionallity!!

I have to play a bit with the border widths, because I use different button sizes with the same image, so it looks a bit dirty while using the same settings for every button...

Thank's :-)

sierdzio

You are welcome, happy coding! :-)