×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Transparent QDialog and QListWidget in Qt

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
hamishwillee (Talk | contribs)
m (Hamishwillee - Bot update - Merge KB into wiki)
Line 1: Line 1:
{{KBCS}}
+
{{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.}}
__NOTOC__
+
{{ArticleMetaData <!-- v1.2 -->
__NOEDITSECTION__
+
{{ArticleMetaData
+
|id=CS001614
+
|platform=S60 5th Edition
+
|devices=Nokia N97
+
|category=Qt
+
|subcategory=
+
|creationdate=July 6, 2010
+
|keywords= QDialog, QListWidget
+
 
+
 
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
 
|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]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|sdk=<!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
+
|devices= Nokia N97
|devicecompatability=<!-- Compatible devices (e.g.: All* (must have GPS) ) -->
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|signing=<!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
+
|platform= S60 5th Edition
|capabilities=<!-- Capabilities required (e.g. Location, NetworkServices.) -->
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|author=[[User:Tepaa]]
+
|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
 +
|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 <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.
+
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==
Line 47: Line 53:
 
==Source==
 
==Source==
  
Transparent <tt>QDialog</tt> that shows a picture as the background.
+
Transparent {{Icode|QDialog}} that shows a picture as the background.
 
<code cpp>
 
<code cpp>
 
#include <QPainter>
 
#include <QPainter>
Line 96: Line 102:
 
</code>
 
</code>
  
To make <tt>QListWidget</tt> look transparent, define a new style and set a style sheet for it using <tt>QApplication::setStyleSheet()</tt>.
+
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>
 
int main(int argc, char *argv[])
 
int main(int argc, char *argv[])
Line 118: Line 124:
 
==Postconditions==
 
==Postconditions==
  
<tt>QDialog</tt> has a transparent background.
+
{{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]
  
[[Image:Transparent_qdialog.GIF]]
+
[[File:Transparent qdialog.GIF]]
  
[[Category:Qt]][[Category:Code Examples]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]]
+
[[Category:Qt C++ UI]][[Category:Code Snippet]][[Category:Code Snippet]][[Category:MeeGo]] [[Category:Symbian]]

Revision as of 07:48, 13 June 2012

Archived.pngArchived: 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.

Article Metadata
Tested with
Devices(s): Nokia N97
Compatibility
Platform(s): S60 5th Edition
Symbian
Article
Keywords: QDialog, QListWidget
Created: tepaa (24 May 2010)
Last edited: hamishwillee (13 Jun 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.

See also

Qt Style Sheets Reference

Transparent qdialog.GIF

167 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.

×