Archived:Transparent QDialog and QListWidget in Qt
hamishwillee
(Talk | contribs) m (Bot fixing redirect link) |
hamishwillee
(Talk | contribs) m (Text replace - "<code cpp>" to "<code cpp-qt>") |
||
| (6 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
| − | {{ | + | {{Archived|timestamp=20120613044841|user=[[User:Hamishwillee|<br />----]]|[[:Category:Qt Quick|Qt Quick]] should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.}} |
| − | + | {{ArticleMetaData <!-- v1.2 --> | |
| − | + | |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) --> | |
| − | {{ | + | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> |
| − | | | + | |devices= Nokia N97 |
| − | | | + | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> |
| − | |devices=Nokia N97 | + | |platform= S60 5th Edition |
| − | | | + | |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) --> |
| − | | | + | |dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 --> |
| − | | | + | |signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer --> |
| + | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
|keywords= QDialog, QListWidget | |keywords= QDialog, QListWidget | ||
| + | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
| + | |translated-by= <!-- [[User:XXXX]] --> | ||
| + | |translated-from-title= <!-- Title only --> | ||
| + | |translated-from-id= <!-- Id of translated revision --> | ||
| + | |review-by= <!-- After re-review: [[User:username]] --> | ||
| + | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
| + | |update-by= <!-- After significant update: [[User:username]]--> | ||
| + | |update-timestamp= <!-- After significant update: YYYYMMDD --> | ||
| + | |creationdate= 20100524 | ||
| + | |author= [[User:Tepaa]] | ||
| + | <!-- The following are not in current metadata --> | ||
| + | |subcategory= | ||
| + | |id= CS001614 | ||
}} | }} | ||
==Overview== | ==Overview== | ||
| − | This code snippet demonstrates how to create a transparent | + | This code snippet demonstrates how to create a transparent {{Icode|QDialog}} that has a {{Icode|QPixmap}} picture as the background and a transparent {{Icode|QListWidget}} in the centre of the screen. |
==Header== | ==Header== | ||
| − | <code cpp> | + | <code cpp-qt> |
#include <QDialog> | #include <QDialog> | ||
#include <QListWidget> | #include <QListWidget> | ||
| Line 39: | Line 53: | ||
==Source== | ==Source== | ||
| − | Transparent | + | Transparent {{Icode|QDialog}} that shows a picture as the background. |
| − | <code cpp> | + | <code cpp-qt> |
#include <QPainter> | #include <QPainter> | ||
| Line 88: | Line 102: | ||
</code> | </code> | ||
| − | To make | + | To make {{Icode|QListWidget}} look transparent, define a new style and set a style sheet for it using {{Icode|QApplication::setStyleSheet()}}. |
| − | <code cpp> | + | <code cpp-qt> |
int main(int argc, char *argv[]) | int main(int argc, char *argv[]) | ||
{ | { | ||
| Line 110: | Line 124: | ||
==Postconditions== | ==Postconditions== | ||
| − | + | {{Icode|QDialog}} has a transparent background. | |
==See also== | ==See also== | ||
[http://doc.trolltech.com/4.7/stylesheet-reference.html Qt Style Sheets Reference] | [http://doc.trolltech.com/4.7/stylesheet-reference.html Qt Style Sheets Reference] | ||
| − | [[ | + | [[File:Transparent qdialog.GIF]] |
| − | [[Category:Qt]][[Category:Code | + | [[Category:Qt C++ UI]][[Category:Code Snippet]][[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]] |
Latest revision as of 04:15, 11 October 2012
Archived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.
Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.
Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.
Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s): S60 5th Edition
Article
Keywords: QDialog, QListWidget
Created: tepaa
(24 May 2010)
Last edited: hamishwillee
(11 Oct 2012)
Contents |
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.

