Customising a button to look similar to a file in windows explorer

Timmoth

Hi i have been trying to customize a QPushButton to have a similar look and feel to those used in windows explorer.

so basically a QIcon ontop of some text with a transparent background. where the Qicon and text are both centered.

i also tried using a QToolButton which did work better but did not give the desired look.
(Also this control must be added from within the code at runtime)
any suggestions on how i might achieve this would be greatly appreciated.

raven-worx

show us what you have so far. QToolButton in conjunction with stylesheets is your way to go.

Timmoth

Thanks.
I am very new to QT so not much.

@ QToolButton *b = new QToolButton();
b->setText(f.fileName());

    QFileIconProvider ip;
    b->setIcon(ip.icon(f));
    b->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);@

raven-worx

ok all fine so far ... when you do the following is this already what you had in mind?
@
b->setStyleSheet("border: 0; background: white;");
@

Timmoth

   @ b->setStyleSheet("border: 0; background: transparent;");@

is very close to what i want.

The only real problem is that some of the text is not shown (the first few and last few characters are too big to fit on.)

Is it possible to allow the text to fill multiple lines?

Regards, Tim.

raven-worx

[quote author="Timmoth" date="1375275327"]
Is it possible to allow the text to fill multiple lines?
[/quote]
AFAIK this is not possible, since buttons are not designed to hold much text.

You can elide the text set on the button or do the following rather dirty thing with a QPushButton (not tested though):
@
QVBoxLayout* buttonLayout = new QVBoxLayout;
buttonLayout->setContentsMargins(0,0,0,0);

QPushButton *button = new QPushButton;
button->setLayout(buttonLayout);
button->setStyleSheet("border: 0; background: white;");

QLabel* iconLabel = new QLabel(button);
iconLabel->setTextInteractionFlags(Qt::NoTextInteraction);
iconLabel->setPixmap(...);

QLabel* textLabel = new QLabel(button);
textLabel->setTextInteractionFlags(Qt::NoTextInteraction);
textLabel->setWordWrap(true);
textLabel->setText(...);
@

Timmoth

Ok thanks for the help.
Is it possible to setPixmap using a QIcon?

raven-worx

QIcon::pixmap()

Timmoth

Awesome i think what you have given me is pretty much exactly what i wanted. i just have an issue using it...

@ QDir drives;
QVBoxLayout *driveBox = new QVBoxLayout();
foreach(QFileInfo d, drives.drives())
{
QFileIconProvider ip;

    QVBoxLayout* buttonLayout = new QVBoxLayout;
    buttonLayout->setContentsMargins(0,0,0,0);

    QPushButton *button = new QPushButton;
    button->setLayout(buttonLayout);
    button->setStyleSheet("border: 0; background: transparent;");

    QLabel* iconLabel = new QLabel(button);
    iconLabel->setTextInteractionFlags(Qt::NoTextInteraction);
    iconLabel->setPixmap(ip.icon(d).pixmap(24,24,QIcon::Normal, QIcon::On));

    QLabel* textLabel = new QLabel(button);
    textLabel->setTextInteractionFlags(Qt::NoTextInteraction);
    textLabel->setWordWrap(true);

    textLabel->setText(d.fileName());
    driveBox->addWidget(button);

}@

thats my code but this is what happens:
http://tinypic.com/r/33wb7dx/5

Basically i can see the top of my icons and im pretty sure the text is there under them.. its just not being shown

raven-worx

hmm...strange.
you may need to play around and set min and max sizes of the labels and the buttons.