Seite 1 von 1

[gelöst] QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 10:16
von reinki0013
hallo zusammen,

ich möchte gerne ein QWidget ein wenig modifizieren, sprich ich würde gerne die Ecken abrunden und den Hintergrund des QWidget verändern.
in weiter folge habe ich dann in diesem QWidget auch noch eine QScrollArea, bei der ich ebenfalls die Ecken abrunden möchte und den Hintergrund verändern.

jetzt hätte ich versucht, den stylesheet anzupassen.
ich habe mittels

Code: Alles auswählen

border-image: url(....
den hintergrund mal auf ein bild gesetzt, das funktioniert auch prächtig. allerdings bekommt jetzt alles was ich in dieses qwidget hinzufüge den selben hintergrund -> z.B. ein QLineEdit hat jetzt den selben hintergrund wie mein QWidget.

kann ich das verhindern oder wie soll ich da am besten vorgehen ?

lg reinki

Re: QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 10:48
von archer
Schau dir mal den Abschnitt "Selector Types" in der StyleSheet Doku unter "The Style Sheet Syntax" an.

Man kann z.B. ".QWidget { border-image: url(.... ); }" verwenden. Dann wird der SyleSheet nicht an die Kinder weitergegeben.

Re: QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 11:39
von reinki0013
archer hat geschrieben:Schau dir mal den Abschnitt "Selector Types" in der StyleSheet Doku unter "The Style Sheet Syntax" an.

Man kann z.B. ".QWidget { border-image: url(.... ); }" verwenden. Dann wird der SyleSheet nicht an die Kinder weitergegeben.
habs mir gerade angesehen...
aber was gehört vor dem Punkt "?.QWidget{...}" ??

Re: QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 12:10
von reinki0013
ich stehe jetzt vor noch einem kleinen problem...

und zwar möchte ich mein QWidget gerne ohne Rahmen anzeigen.
Das ist ja soweit kein Problem dank

Code: Alles auswählen

setWindowFlags(Qt::FramelessWindowHint)
.
jetzt ist das problem, das mein QWidget wieder eckig ist, ich möchte aber dieses QWidget gerne an den Ecken abrunden...

weiß da jemand einen rat für mich bzw. einen tipp ?

lg

Re: QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 13:20
von archer
aber was gehört vor dem Punkt "?.QWidget{...}" ??

Code: Alles auswählen

pMyWidget->setStyleSheet(".QWidget { border-image: url(.... ); }");

Re: QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 13:55
von reinki0013
archer hat geschrieben:
aber was gehört vor dem Punkt "?.QWidget{...}" ??

Code: Alles auswählen

pMyWidget->setStyleSheet(".QWidget { border-image: url(.... ); }");
alles klar, das hab ich eh so gemacht :-)

ich stehe jetzt vor noch einem kleinen problem...

und zwar möchte ich mein QWidget gerne ohne Rahmen anzeigen.
Das ist ja soweit kein Problem dank

Code: Alles auswählen

setWindowFlags(Qt::FramelessWindowHint)
jetzt ist das problem, das mein QWidget wieder eckig ist, ich möchte aber dieses QWidget gerne an den Ecken abrunden...

wie kann ich das machen ?

Re: QStyleSheet Design anpassen

Verfasst: 12. Oktober 2011 14:28
von ceumern
Das Problem ist, dass ein Fenster immer rechteckig ist. D.h. um den gewünschten Effekt zu erzielen muss man mit Transparenzen arbeiten. Da das in der Form nicht mit style sheets möglich ist, muss man selber Hand anlegen, indem man eine eigene Klasse erstellt, die von QWiget ableitet und dort den paintEvent(...) überschreibt.

Wichtig: Transparenz aktivieren

Code: Alles auswählen

MyWidget::MyWidget(QWidget *parent)
	: QWidget(parent, Qt::FramelessWindowHint)
{
    setAttribute(Qt::WA_TranslucentBackground);
}
paintEvent:

Code: Alles auswählen

void MyWidget::paintEvent( QPaintEvent * event )
{
	QPainter painter(this);
	painter.drawPixmap(rect(), fancyBackgroundImage); // hier das "border-image" malen
}
So in der Art sollte das möglich sein.

Re: QStyleSheet Design anpassen

Verfasst: 19. Oktober 2011 11:53
von reinki0013
ceumern hat geschrieben:Das Problem ist, dass ein Fenster immer rechteckig ist. D.h. um den gewünschten Effekt zu erzielen muss man mit Transparenzen arbeiten. Da das in der Form nicht mit style sheets möglich ist, muss man selber Hand anlegen, indem man eine eigene Klasse erstellt, die von QWiget ableitet und dort den paintEvent(...) überschreibt.

Wichtig: Transparenz aktivieren

Code: Alles auswählen

MyWidget::MyWidget(QWidget *parent)
	: QWidget(parent, Qt::FramelessWindowHint)
{
    setAttribute(Qt::WA_TranslucentBackground);
}
paintEvent:

Code: Alles auswählen

void MyWidget::paintEvent( QPaintEvent * event )
{
	QPainter painter(this);
	painter.drawPixmap(rect(), fancyBackgroundImage); // hier das "border-image" malen
}
So in der Art sollte das möglich sein.
Super super super...genau das war es - funktioniert perfekt...
besten dank ceumern :D

lg