[Solved] How to add Graphic with transparency as Button
-
[quote author="McLion" date="1348136708"]... excuse me to ask ... and how am I going to do this "resource thing" ?[/quote]
Well, did you look in the documentation under, eh... I don't know, "resource"? Did you locate the page called "The Qt Resource System" there? No? Please look (again) then. Otherwise: what is it you don't understand from that page?
Also note that Qt Creator makes adding, modifying and using resources trivial. Ctrl + N -> choose Qt under "Files and Classes", and choose "Qt Resource File" from the list on the right. Then start adding your files. The files you added, will then be available from designer as well when you need to set an icon.
-
OK. Got the icon on the button. With a style sheet I even got the transparency.
What I am stuck with is to disable the border. I can set the "flat" property and that removes the border, as long as the button is not pressed. When it is pressed, the border is back.- How do I get rid of the border permanently?
- Changing the icon on like "mouseOver" events are not available in Creator and need to be done in code, right?
I need the button to have its defualt icon, changing to a different one when/as long as selected by tab (found this, works) or a mouseOver event, and having a third one as long as it is pressed (probably the pressed slot).
Thanks
McL -
You are probably better off subclassing, and doing your own painting, then (see "QWidget::paintEvent()":http://qt-project.org/doc/qt-4.8/qwidget.html#paintEvent). To enable hovering, you need to turn on mouse tracking (::setMouseTracking), otherwise it will not get "mouse move events":http://qt-project.org/doc/qt-4.8/qwidget.html#mouseMoveEvent.
-
I forgot to mention mouse "enterEvent":http://qt-project.org/doc/qt-4.8/qwidget.html#enterEvents and mouse "leaveEvent":http://qt-project.org/doc/qt-4.8/qwidget.html#leaveEvents.
-
Buuuh ... I am new to Qt, C++ and CSS ... I only have some years of experience in C.
So, I'm still trying step-by-step to get an idea.
This got me the transparency and removed the border (except for the dotted one from the indication where the focus currently is):
@ui->IconPushButtontest->setStyleSheet("background-color: transparent;");
ui->IconPushButtontest->setStyleSheet("border: 0;");
@To have a different image while the button is pressed I tried this:
@void QTGUI_MainWindow::on_IconPushButtontest_pressed()
{
ui->IconPushButtontest->setIcon(QIcon(":/ab "));
}
@but this is not working, and the GUI in the Creator does not allow to set for events like pressed or hover.
So, I am still not sure what's the best way to have this implemented for a couple of buttons which all have different images.
-
The two setStyleSheet lines overwrite onanother. You set a stylesheet as one huge string. Selecting different images to put on top is also possible in a style sheet, as you can change any property of the widget you are styling in the stylesheet, and you can refer to images by path (I would suggest to use a resource for that).
-
Thanks .. got that ..
ui->pushButtonIcon1->setStyleSheet("background-color: transparent; border: 0;");
worked.Can I apply a stylesheet to all items like QPushButtons, or a Subclass like
class GraphicButton : public QPushButton instead of applying to every button?
I also could not find a way to make Pushbuttons created in the Designer to be part of class GraphicButton instead of the the default QPushButton.Is there a way to get rid of the dotted line around the button?
Thanks
Franz -
What you want to do is very simple - just overload a QWidget's paint event to draw a QImage according to the state of the "button" which you control through the different mouse events. Don't do it any harder than it needs to be just because it is technically possible.
-
Overloading is not specific neither to QWidget nor to Qt, it is a C++ feature that allows you to replace a method of a given object. You just inherit from QWidget, reimplement the paintEvent so that instead of doing whatever QWidget does to paint what you want - an image based on the state of your button.
