1

I want to create a custom pushButton without any styling which just displays a .png image.

I have tried creating a pushButton with the setIcon method but this uses the pushButton silver styling I just want to display the image and have it be a button.

Also, I tried using QAction

newAct = new QAction(QIcon(":/new/prefix1/images/appbar.close.png"),

But this does not display anything without a toolbar.

Any ideas how I can get this to work?

DomX23
  • 867
  • 5
  • 13
  • 26

4 Answers4

2

maybe this code helps you. Create a QPushButton, Set an icon for it and use this code :

YourQPushButton->setFlat(true);

Update :

MyPushButton.h:

#ifndef MYPUSHBUTTON_H
#define MYPUSHBUTTON_H

#include <QLabel>

class MyPushButton : public QLabel
{
    Q_OBJECT
public:
    explicit MyPushButton(QWidget *parent = 0);

signals:
    void clicked();

protected:
    void mouseReleaseEvent(QMouseEvent *ev);

};

#endif // MYPUSHBUTTON_H

MyPushButton.cpp

void MyPushButton::mouseReleaseEvent(QMouseEvent *ev)
{
    emit clicked();
}

How to use :

MyPushButton btn;
btn.setPixmap(QPixmap(":/rm.png"));
QObject::connect(&btn, SIGNAL(clicked()), qApp, SLOT(quit()));
btn.show();

You can even add this function to MyPushButton class to be more productive :)

void MyPushButton::setIcon(QPixmap px, int w, int h)
{
    setPixmap(px.scaled(w, h));
}
s4eed
  • 7,173
  • 9
  • 67
  • 104
  • This does work but when I click on it, it displays the style. Can I remove the styling when clicked on as well? – DomX23 Apr 18 '13 at 10:01
  • @DomX23 : So you want a clickable QLabel with an Icon, right ? – s4eed Apr 18 '13 at 10:04
  • I don't need any text to be displayed, just an image. Just trying to create a custom button from a .png image. – DomX23 Apr 18 '13 at 10:06
  • 1
    `mousePressEvent(QMouseEvent *ev)` i think, mouseReleaseEvent(QMouseEvent *ev) a bit better simulates mouse click – Shf Apr 18 '13 at 10:27
  • How can I use this in a MainWindow class? – DomX23 Apr 18 '13 at 10:27
  • oh boy.. create these two files, put them near your mainwindow.h and mainwindow.cpp, in your mainwindow.h add line at top `#include "mypushbutton.h"` and create MyPushButton and use it, like you would use QLabel – Shf Apr 18 '13 at 10:33
  • @DomX23 ~> Do you have a ui file? – s4eed Apr 18 '13 at 10:33
  • @Shf: Only reason I ask is when I try the include statement I get an error even though it's in the same directory... – DomX23 Apr 18 '13 at 10:41
  • 1
    @DomX23 ~> As Shf said place MyPushButton.cpp and MyPushButton.h beside your mainwindow.cpp and add a normal **QLabel** in your form. Right click on your QLabel and click **Promote to...** . Fill **Promoted class name** with "MyPushButton" and click add. At the run time your MyPushButton will be in the place of QLabel ! – s4eed Apr 18 '13 at 10:43
  • @saeed: Directory not found. – DomX23 Apr 18 '13 at 10:47
  • I guess, he didn't added it to .pro file. In creator right click on the project folder and select "Add existing files" or something like this, when dialogbox is opened, select mypushbutton.h and mypushbutton.cpp. Or you can manually add them to headers and sources in your .pro file. After relaunch of creator they should be visible – Shf Apr 18 '13 at 10:49
  • @DomX23 ~> Shf is right. How did you add these files to your project? – s4eed Apr 18 '13 at 10:50
  • Looks like they are in the .pro file and a relaunch didnt help. I added them by going file->new file selecting source and header file. SOURCES += main.cpp\ mainwindow.cpp \ mypushbutton.cpp HEADERS += mainwindow.h \ mypushbutton.h FORMS += mainwindow.ui RESOURCES += \ Images.qrc – DomX23 Apr 18 '13 at 10:54
  • @DomX23 ~> mail (sa.dadkhah@gmail.com) your project for me. I'll fix it for you. – s4eed Apr 18 '13 at 10:58
2

There is 2 solutions:

  1. Sub class QLabel to emit clicked() signal and load your image to that subclass
  2. You can set your stylesheet to QPushButton something like this How to change QPushButton icon using stylesheets in Qt app

If you are willing to subclass QLabel though - here is a class for that:

Header qspoilerlabel.h:

#ifndef QSPOILERLABEL_H
#define QSPOILERLABEL_H

#include <QLabel>
#include <QEvent>

class QSpoilerLabel : public QLabel
{
    Q_OBJECT
public:
QSpoilerLabel( const QString & text, QWidget * parent = 0 );
QSpoilerLabel(){}

signals:
    void clicked();

public slots:
    void slotClicked();

protected:
    void mouseReleaseEvent ( QMouseEvent * event );
};

#endif // QSPOILERLABEL_H

Source qspoilerlabel.cpp:

#include "qspoilerlabel.h"
QSpoilerLabel::QSpoilerLabel( const QString & text, QWidget * parent )
:QLabel(parent)
{
    connect( this, SIGNAL( clicked() ), this, SLOT( slotClicked() ) );    
}

void QSpoilerLabel::slotClicked()
{
//qDebug()<<"Clicked";
}

void QSpoilerLabel::mouseReleaseEvent ( QMouseEvent * event )
{
    emit clicked();
}

You can load image to label with setPixmap method. It can look something like this:

label->setPixmap((QPixmap::fromImage(QImage(":/new/prefix1/images/appbar.close.png"));
Community
  • 1
  • 1
Shf
  • 3,463
  • 2
  • 26
  • 42
0

In QtCreator you can try this:

  1. You make a label with your png image.
  2. On top of the label you put a QPushButton with stylesheet "background:transparent; border: none;"

Works like a button, looks like an image ;)

ariwez
  • 1,309
  • 17
  • 20
  • When editing the stylesheet and copying {background:transparent; border: none;} into it, it says it's invalid. – DomX23 Apr 18 '13 at 10:11
0

First of all , add a resource file, create a prefix and add files that you need. In the designer, right click the button and change style sheet. 

    background: url(":\filePath");

alternatively, you can do this, add resource (yes it will show that it is an invalid stylesheet, but fear not) : then edit the code by adding the keyword background before the url to make it look like this

    background: url(":\filePath");

where file path is the path to your resource file which is automatically detected when you decide to use the add resource option.