×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Transparent QDialog and QListWidget in Qt

From Nokia Developer Wiki
Jump to: navigation, search
copyeditor (Talk | contribs)
m
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{KBCS}}
+
{{Archived|timestamp=20120613044841|user=[[User:Hamishwillee|&lt;br /&gt;----]]|[[: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__
+
|sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
{{CodeSnippet
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|id=CS001614
+
|devices= Nokia N97
|platform=S60 5th Edition
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|devices=Nokia N97
+
|platform= S60 5th Edition
|category=Qt
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|subcategory=
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|creationdate=July 6, 2010
+
|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 <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==
  
<code cpp>
+
<code cpp-qt>
 
#include <QDialog>
 
#include <QDialog>
 
#include <QListWidget>
 
#include <QListWidget>
Line 39: 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-qt>
 
#include <QPainter>
 
#include <QPainter>
  
Line 88: 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-qt>
 
int main(int argc, char *argv[])
 
int main(int argc, char *argv[])
 
{
 
{
Line 110: 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/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:Qt C++ UI]][[Category:Code Snippet]][[Category:Code Snippet]][[Category:MeeGo Harmattan]] [[Category:Symbian]]
''Italic text''
+

Latest revision as of 04:15, 11 October 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 (11 Oct 2012)

Contents

[edit] 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.

[edit] 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;
};

[edit] 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();
}

[edit] Postconditions

QDialog has a transparent background.

[edit] See also

Qt Style Sheets Reference

Transparent qdialog.GIF

This page was last modified on 11 October 2012, at 04:15.
95 page views in the last 30 days.
×