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



  • 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.


  • Moderators

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



  • 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);@
    

  • Moderators

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



  •    @ 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.


  • Moderators

    [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(...);
    @



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


  • Moderators

    QIcon::pixmap()



  • 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


  • Moderators

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.