Proportions of elemnts like Sliders

Flaming Moe

Hi Ho,

is it possible to adjust the proportion of elements?
As an example when taking a slider. Is there a way to determine the size of the knob, the thickness of the "slideway"?

The point is, depending on resolution the elements become very small.
Target OS is Android.

Cheerio!

Asperamanca

@Flaming-Moe
You can create your own style class, and manipulate all those settings.

Things have change a bit since I last did this, and it seems the way to do it now is to derive from QProxyStyle, and overload methods where you want to modify style settings and metrics.
Have a look here

You can then set this style either for the whole application (via QApplication), or for single widgets.

For a full description on what you can do with styles, see here

Chris Kawa

Or you can use stylesheets to set sizes.

Flaming Moe

So,

is it possible to with stylesheets what i symbolized in the picture?
The sliders are equally long in both, pixels and value range.
https://www.dropbox.com/s/qns7x2xuwqipp5m/slider.jpg?dl=0

And if so:
Do i get it right, that with stysheets i can influence the proportions, but when it comes to real custom appearance i would have to follow Asperamanca´s hint?

Chris Kawa

A quick playing around and I managed to get this result:

Sliders image

Style for slider 1:

QSlider::groove:horizontal {
border: 6px solid #AAA;
height: 4px;
background: #9AD9EB;
margin: 2px 0;
}

QSlider::handle:horizontal {
background: orange;
border: 1px solid gray;
width: 36px;
margin: -16px 0;
border-radius: 18px;
}

And slider 2:

QSlider::groove:horizontal {
border: 10px solid #AAA;
height: 8px;
background: #9AD9EB;
margin: 2px 0;
}

QSlider::handle:horizontal {
background: orange;
border: 1px solid gray;
width: 50px;
margin: -24px 0;
border-radius: 25px;
}

As for the second question - it depends. You can go pretty far with stylesheets and some have. Just google "qt styleshets" and see the images. Some are pretty wild. Something that looks like Adobe Creative Suit or Qt Creator are no problem for stylesheets.

It's true that creating your own style will give you the ultimate control over pretty much anything that gets drawn, but I would go with stylesheets first, and then resort to custom style only if you hit some wall. Creating a good style is no cupcake. A lot of details to take care of.

Flaming Moe

I´m stoned...
you tell me, you made up working sliders that look like my picture? OMD...
Where did you place the code snippets?
To me it looks like, you have backround knowledge i´m suffering.
For example:
QSlider::handle:horizontal
Of course i can figure out what it means. But what is the "qt topic" describing that this is possible?

"Creating a good style is no cupcake. A lot of details to take care of."
Yes, that was the essence of what i read so far. Looks like that topic is something for a one or even two week "doing nothing else" job in conjunction with ordered literature.

Chris Kawa

There are number of ways to apply stylesheets. In this case I just edited the "stylesheet" property of both sliders in the designer, but that's just a quick hack and not what I'd suggest in general.
From code you can apply a stylesheet with setStyleSheet() method of QWidgets and globally on QApplication object. I suggest doing that at the start of the app.
You can create a file with all your qss styles and place it in the resources and load it at the app start.

As for stylesheet documentation this page has everything you need. Detailed description of what properties and sub-controls are supported by which widget with handy examples for each.

Flaming Moe

Thank you, i´m doing steps forward.
Although i´m still confused.
I called the page
http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qslider
but i don´t understand where to put these lines
QSlider::groove:horizontal {
border: 1px solid #999999;
height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
margin: 2px 0;
}

QSlider::handle:horizontal {
background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
border: 1px solid #5c5c5c;
width: 18px;
margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */
border-radius: 3px;
}

groove and handle are not recognized as keywords.
Never the less, if i write
slider1->setStylesheet("""QSlider::groove:horizontal{border: 20px solid #800000; heigth: 6px; background: red; margin :5px 0;}""");
it works out.
Unfortunately i wasn´t able to find the syntax of the stylesheets.

Chris Kawa

The qss stylesheet code is a string. It's not c++ code.
Here are a couple of ways to do it:

Embed in the widget code directly:

 QString myStyle = "QWidget { color: red; }";
 someWidget -> setStylesheet(myStyle);

Or read it from file and use:

QFile file(":/mystylesheet.qss");
if(file.open(QFile::ReadOnly) {
    QString myStyle = file.readAll();
    someWidget->setStylesheet(myStyle);
}

Or, if you're using the designer:

Stylesheet property

Unfortunately i wasn´t able to find the syntax of the stylesheets.

What do you mean you couldn't find it? It's right there in the link I gave you. A whole long page of it.
It's a minimally modified CSS language. The basic syntax is:

ControlName::SubcontrolName:StateName {
    Property1: value1;
    Property2: value2;
}

ControlName, SubcontrolName and StateName are optional. For more advanced usages browse through that docs page.

For list of subcontrols supported by each widget go here
For list of properties scroll to here
For lists of subcontrols and states scroll even further down.