[Qt-interest] How to customize Buttons

Alessandro Portale alessandro.portale at trolltech.com
Mon Jan 11 11:35:33 CET 2010


Efan... wrote:
> Hi,
> 
> Can any one please let me know how can I customize the buttons to looks 
> like the one attached in image.
> I have to make some buttons like that for touch screen application.
> I will really appreciate if some one share some code for this.

This looks like a good candidate for StyleSheet usage.
You can define a border image, which gets splitted into 9 parts in order to make the styling resize properly with the widget.
See http://doc.qt.nokia.com/qq/qq20-qss.html#creatingscalablestyles for an example.

Here an example for your case as a starter. The 20px really depends on how the image is laid out by your designer. The pressed state needs to be added, separately. And the image here is taken from resources but could also come from the file system, I assume.

QPushButton {
  border-width: 20px;
  border-image: url(:/buttons.jpg) 20 20 20 20 stretch stretch;
}

On a side note I really suggest using PNGs in order to have transparency around the corners and non of the Jpeg artifacts.

Good luck,
Alessandro



More information about the Qt-interest-old mailing list