[PyQt] Custom Scrollbar design {SOLVED}



  • Hi!

    I really really REALLY don't like the Windows' scrollbars, that's why I was wondering if I could change them out and place another ones.

    I've been reading around and I found a lot of information about "Style Sheets" but, in the case of the RadioButton's you can change the images (the apparence) of the button with a .jpg or a .gif . Can I do the same with scrollbars? Can I create my own scrollbars and put them in my widget? Also, how much parts would need the scrollbar? Because the TreeView needs 5 or 6 ones, example here: http://qt-project.org/doc/qt-4.8/stylesheet-examples.html#customizing-qtreeview

    Thanks for reading :)


  • Lifetime Qt Champion

    Hi,

    In the same document you have the styling of the scrollbars. Setting a style sheet for the scrollbar will also modify those from the QTreeView.

    Hope it helps



  • You can use style sheets to customise almost every element of a QScrollBar, the following is an excerpt from a previous project where I did just that:

    @
    ...
    class ScrollBar(QScrollBar):
    def init(self, parent=None, **kwargs):
    QScrollBar.init(self, parent, **kwargs)

        self.setStyleSheet("""QScrollBar:vertical {
                            width: 45px;
                            margin: 45px 0 45px 0;
                          }
    
                          QScrollBar::handle:vertical {
                            min-height: 10px;
                          }
    
                          QScrollBar::add-line:vertical {
                            background: none;
                            height: 45px;
                            subcontrol-position: bottom;
                            subcontrol-origin: margin;
                          }
    
                          QScrollBar::sub-line:vertical {
                            background: none;
                            height: 45px;
                            subcontrol-position: top;
                            subcontrol-origin: margin;
                          }
    
                          QScrollBar::up-arrow:vertical { 
                            image:url('./icons/up_48.png'); 
                            height: 40px; 
                            width: 40px 
                          }
    
                          QScrollBar::down-arrow:vertical {
                            image:url('./icons/down_48.png'); 
                            height: 40px; 
                            width: 40px                              
                          }""")
    

    ...
    @

    It's not exhaustive, but it shows changing the size of most of the key elements and using your own images for the buttons. There's a section on QScrollBar in both the "Style Sheets Reference":http://qt-project.org/doc/qt-4.8/stylesheet-reference.html and "Style Sheets Examples":http://qt-project.org/doc/qt-4.8/stylesheet-examples.html#customizing-qscrollbar documents.

    Hope this helps ;o)



  • @Sgaint Of course I know there are examples but there was any with a scrollbar edited with imatges and that's what I was wondering.

    @jazzycamel Thanks for the example, that's what I wasn't sure about: if I could use imatges and how much parts/images needs a complete scrollbar. That last one, if you could make a simple post with the parts, I would love it :)



  • Try the following:

    @
    import sip
    sip.setapi('QVariant',2)
    sip.setapi('QString',2)

    from PyQt4.QtCore import *
    from PyQt4.QtGui import *

    class ScrollBar(QScrollBar):
    def init(self, parent=None, **kwargs):
    QScrollBar.init(self, parent, **kwargs)

        self.setStyleSheet("""
            QScrollBar:horizontal {
                border: none;
                background: none;
                height: 26px;
                margin: 0px 26px 0 26px;
            }
    
            QScrollBar::handle:horizontal {
                background: lightgray;
                min-width: 26px;
            }
    
            QScrollBar::add-line:horizontal {
                background: none;
                width: 26px;
                subcontrol-position: right;
                subcontrol-origin: margin;
                
            }
    
            QScrollBar::sub-line:horizontal {
                background: none;
                width: 26px;
                subcontrol-position: top left;
                subcontrol-origin: margin;
                position: absolute;
            }
    
            QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
                width: 26px;
                height: 26px;
                background: none;
                image: url('./glass.png');
            }
    
            QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
                background: none;
            }
    
            /* VERTICAL */
            QScrollBar:vertical {
                border: none;
                background: none;
                width: 26px;
                margin: 26px 0 26px 0;
            }
    
            QScrollBar::handle:vertical {
                background: lightgray;
                min-height: 26px;
            }
    
            QScrollBar::add-line:vertical {
                background: none;
                height: 26px;
                subcontrol-position: bottom;
                subcontrol-origin: margin;
            }
    
            QScrollBar::sub-line:vertical {
                background: none;
                height: 26px;
                subcontrol-position: top left;
                subcontrol-origin: margin;
                position: absolute;
            }
    
            QScrollBar:up-arrow:vertical, QScrollBar::down-arrow:vertical {
                width: 26px;
                height: 26px;
                background: none;
                image: url('./glass.png');
            }
    
            QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
                background: none;
            }
    
        """)
    

    class Widget(QWidget):
    def init(self, parent=None, **kwargs):
    QWidget.init(self, parent, **kwargs)

        self.setWindowTitle("Custom Scroll Bar Example")
    
        l=QVBoxLayout(self)
    
        self._scrollArea=QScrollArea(self)
        self._scrollArea.setVerticalScrollBar(ScrollBar(self))
        self._scrollArea.setHorizontalScrollBar(ScrollBar(self))
    
        w=QWidget(self)
        ll=QGridLayout(w)
    
        for i in xrange(20):
            for j in xrange(10):
                ll.addWidget(
                    QPushButton(
                        "Button ({0},{1})".format(i,j),
                        self
                    ), i, j
                )
    
        self._scrollArea.setWidget(w)
        l.addWidget(self._scrollArea)
    
        self.resize(250,400)
    

    if name=="main":
    from sys import argv, exit

    a=QApplication(argv)
    w=Widget()
    w.show()
    w.raise_()
    exit(a.exec_())
    

    @

    It should look something like:

    !http://s24.postimg.org/rhcr4uzs5/Screen_Shot_2014_05_06_at_12_21_29.png(Custom Scroll Bar Example Screenshot)!

    You'll just have to find an image to substitute for my 'glass.png'.

    Hope this helps ;o)


Log in to reply
 

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