How to customize the looking of scrollbar?
-
I need a scrollbar with following look.
!http://i.imgur.com/FSy28.jpg(scrollbar effect)!I have tried following stylesheet,
@
"QScrollBar:vertical { background: url(:client/img/common/vertical_scrollbar_bg.fw.png) repeat-y; width: 13px; margin: 0px 0 0px 0; }"
"QScrollBar::handle:vertical { background: url(:client/img/common/vertical_scrollbar.fw.png); min-height: 20px; margin: 0 1px 0 2px; border-radius: 3px; border: none; }"
"QScrollBar::add-line:vertical { background: url(:client/img/common/vertical_scrollbar_bg.fw.png); height: 0px; subcontrol-position: bottom; subcontrol-origin: margin; }"
"QScrollBar::sub-line:vertical { background: url(:client/img/common/vertical_scrollbar_bg.fw.png); height: 0px; subcontrol-position: top; subcontrol-origin: margin; }"
"QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical { border: 1px solid grey; width: 3px; height: 3px; background: white; }"
"QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical { background: none; }""QScrollBar:horizontal { background: url(:/client/img/common/horizontal_scrollbar_bg.fw.png); height: 13px; margin: 0px 0 0px 0; }"
"QScrollBar::handle:horizontal { background: url(:/client/img/common/horizontal_scrollbar.fw.png); min-width: 20px; margin: 2px 0px 1px 0px; border-radius: 3px; border: none; }"
"QScrollBar::add-line:horizontal { border: 0px solid grey; background: #32CC99; width: 0px; subcontrol-position: right; subcontrol-origin: margin; }"
"QScrollBar::sub-line:horizontal { border: 0px solid grey; background: #32CC99; width: 0px; subcontrol-position: left; subcontrol-origin: margin; }"
"QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal { background: none; }"@I could change the background of the scrollbar, but I do not know how to create a customized handle, since the setting the background-image of the handle failed and the handle's width/height is dynamic changed.
Here are vertical scrollbar background and handle images:
!http://i.imgur.com/r7eyH.png(vertical scrollbar background)!
!http://i.imgur.com/NC2RW.png(vertical scrollbar handle)! -
Hi, ~jcyangzh!
Your QSS code look strange. Can you markup it, please?
Let's be honest, QSS in Qt is not very good now. For example it's very hard to style some elements like QTabBar, QScrollBar, etc. Now it's impossible to use custom QSS features with custom widgets (e.g. MyWidget::cooker). I have never tried to do it but the best practise in the common case is to make your own style (a child from QCommonStyle) and work with it. It's more low-level, but it allows to do anything with widgets and to create unique style for every application. I use this way.
I hope I've helped you.
-
Hi, tucnak. Thanks for your help.
My QSS removes all the arrows from the scrollbar with setting height or width to zero and show only the background and the handle.
But I could not customize the handle itself, since background-image could not work.And it is possible to stylesheet own customized Widget if you overload the paintEvent method to draw the QStyle::PE_Widget.
Anyway, I have never made my own style and now I'll give it a try.