×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Transparent QDialog and QListWidget in Qt

From Nokia Developer Wiki
Jump to: navigation, search
jimgilmour1 (Talk | contribs)
m (minor spelling)
copyeditor (Talk | contribs)
m
Line 1: Line 1:
 +
{{KBCS}}
 
__NOTOC__
 
__NOTOC__
 
__NOEDITSECTION__
 
__NOEDITSECTION__
 
{{CodeSnippet
 
{{CodeSnippet
|id=
+
|id=CS001614
 
|platform=S60 5th Edition
 
|platform=S60 5th Edition
 
|devices=Nokia N97
 
|devices=Nokia N97
 
|category=Qt
 
|category=Qt
 
|subcategory=
 
|subcategory=
|creationdate=May 24, 2010
+
|creationdate=July 6, 2010
 
|keywords= QDialog, QListWidget
 
|keywords= QDialog, QListWidget
 
}}
 
}}
Line 13: Line 14:
 
==Overview==
 
==Overview==
  
This code snippet demonstrates how to create transparent QDialog that has QPixmap picture as background and has transparent QListWidget on center of the screen.
+
This code snippet demonstrates how to create a transparent <tt>QDialog</tt> that has a <tt>QPixmap</tt> picture as the background and a transparent <tt>QListWidget</tt> in the centre of the screen.
  
 
==Header==
 
==Header==
Line 38: Line 39:
 
==Source==
 
==Source==
  
Transparent QDialog that shows picture as background.
+
Transparent <tt>QDialog</tt> that shows a picture as the background.
 
<code cpp>
 
<code cpp>
 
#include <QPainter>
 
#include <QPainter>
Line 87: Line 88:
 
</code>
 
</code>
  
For getting QListWidget to look as transparent, define new style and set style-sheet for it using QApplication::setStyleSheet()
+
To make <tt>QListWidget</tt> look transparent, define a new style and set a style sheet for it using <tt>QApplication::setStyleSheet()</tt>.
 
<code cpp>
 
<code cpp>
 
int main(int argc, char *argv[])
 
int main(int argc, char *argv[])
Line 109: Line 110:
 
==Postconditions==
 
==Postconditions==
  
QDialog has transparent background.
+
<tt>QDialog</tt> has a transparent background.
  
 
==See also==
 
==See also==
[http://doc.trolltech.com/stylesheet-reference.html Stylesheet reference]
+
[http://doc.trolltech.com/stylesheet-reference.html Qt Style Sheets Reference]
  
 
[[Image:Transparent_qdialog.GIF]]
 
[[Image:Transparent_qdialog.GIF]]
  
 
[[Category:Qt]][[Category:Code Examples]][[Category:Code Snippet]]
 
[[Category:Qt]][[Category:Code Examples]][[Category:Code Snippet]]
 +
''Italic text''

Revision as of 14:38, 6 July 2010

Template:KBCS


Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s): S60 5th Edition
Symbian
Article
Keywords: QDialog, QListWidget
Created: (06 Jul 2010)
Last edited: copyeditor (06 Jul 2010)

Overview

This code snippet demonstrates how to create a transparent QDialog that has a QPixmap picture as the background and a transparent QListWidget in the centre of the screen.

Header

#include <QDialog>
#include <QListWidget>
 
class TransparentDlg : public QDialog
{
public:
TransparentDlg(QWidget *parent = 0);
~TransparentDlg();
 
void resizeEvent(QResizeEvent *);
void paintEvent(QPaintEvent *);
 
private:
QPixmap m_pixmapBackground;
QListWidget* m_listWidget;
};

Source

Transparent QDialog that shows a picture as the background.

#include <QPainter>
 
TransparentDlg::TransparentDlg(QWidget *parent)
: QDialog(parent)
{
// Set QDialog background as transparent
setAttribute(Qt::WA_NoSystemBackground);
 
// Load picture for dialog background
m_pixmapBackground.load(":/background.png");
 
// Create QListWidget
m_listWidget = new QListWidget(this);
new QListWidgetItem("Row One",m_listWidget);
new QListWidgetItem("Row Two",m_listWidget);
new QListWidgetItem("Row Three",m_listWidget);
new QListWidgetItem("Row Four",m_listWidget);
}
 
TransparentDlg::~TransparentDlg()
{
}
 
void TransparentDlg::resizeEvent(QResizeEvent *event)
{
// Set size for the background picture
QSize backSize = size();
backSize -= QSize(size().width()/4,size().height()/4);
m_pixmapBackground = m_pixmapBackground.scaled(backSize);
 
// Set size for the QListWidget
QSize listSize = backSize - QSize(40,40);
QPoint p = QPoint((size().width()-listSize.width())/2,
(size().height()-listSize.height())/2);
m_listWidget->setGeometry(QRect(p,listSize));
}
 
void TransparentDlg::paintEvent(QPaintEvent *event)
{
QDialog::paintEvent(event);
 
QPainter p(this);
p.drawPixmap((size().width()-m_pixmapBackground.size().width())/2,
(size().height()-m_pixmapBackground.size().height())/2,m_pixmapBackground);
}

To make QListWidget look transparent, define a new style and set a style sheet for it using QApplication::setStyleSheet().

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
 
// Set style for the QListWidget and QListWidgetItem
QString style;
style += "QListWidget {background-color: transparent;}";
style += "QListWidget::item {background-color: transparent;}";
style += "QListWidget::item {selection-color: white;}";
style += "QListWidget::item {color: black;}";
a.setStyleSheet(style);
 
qtSnippets w;
w.showMaximized();
return a.exec();
}

Postconditions

QDialog has a transparent background.

See also

Qt Style Sheets Reference

Transparent qdialog.GIF Italic text

166 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×