[PyQt] Custom Scrollbar design {SOLVED}

Jun33

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 :)

SGaist

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

jazzycamel

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)

Jun33

@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 :)

jazzycamel

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)