Results 1 to 6 of 6

Thread: How to apply TreeView look & feel to a delegate?

  1. #1
    Join Date
    Mar 2012
    Posts
    3
    Qt products
    Qt4
    Platforms
    Windows

    Default How to apply TreeView look & feel to a delegate?

    Hi! I'm trying to add some pixmap (many pixmap in the same column, a progress bar and probably more stuff in the future) to my TreeView, I found the best way to do it is to set a delegate.
    It does works properly, but it looks ugly when I select the row. I fill the background by doing painter.fillRect(option.rect, self.palette.highlight()), but on Windows Vista/7 it does not show the modern "explorer" look like it should, it shows a blue background.

    I've search everywhere without any luck.

    This is a snippet of my code:

    Qt Code:
    1. class ProgressBarDelegate(QStyledItemDelegate):
    2. def __init__(self, parent):
    3. QStyledItemDelegate.__init__(self, parent)
    4. self.palette = parent.palette()
    5.  
    6. def paint(self, painter, option, index):
    7. if not index.isValid():
    8. return None
    9. #painter.save()
    10. #if option.state & QStyle.State_Selected: #paint background if selected.
    11. #painter.fillRect(option.rect, painter.brush())
    12. #painter.fillRect(option.rect, self.palette.highlight())
    13. progress = index.data()
    14. bar_option = QStyleOptionProgressBar()
    15. bar_option.rect = option.rect
    16. bar_option.rect.setHeight(option.rect.height() - 1)
    17. bar_option.rect.setTop(option.rect.top() + 1)
    18. bar_option.minimum = 0
    19. bar_option.maximum = 100
    20. bar_option.progress = int(progress)
    21. bar_option.text = progress + '%'
    22. bar_option.textVisible = True
    23. bar_option.textAlignment = Qt.AlignCenter
    24. QApplication.style().drawControl(QStyle.CE_ProgressBar, bar_option, painter)
    25. #painter.restore()
    To copy to clipboard, switch view to plain text mode 

    This is the current result:

    http://i.stack.imgur.com/TIJK1.jpg

    This is what I want:

    http://i.stack.imgur.com/7WtQx.jpg


    related stackoverflow question > http://stackoverflow.com/questions/7...indows-vista-7

  2. #2
    Join Date
    Sep 2011
    Location
    Manchester
    Posts
    538
    Thanks
    3
    Thanked 106 Times in 103 Posts
    Qt products
    Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: How to apply TreeView look & feel to a delegate?

    Is that what you wanted?

    tree.png

    Qt Code:
    1. void ProgressBarDelegate::paint( QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index ) const
    2. {
    3. if( index.column() == 1 )
    4. {
    5. if( option.state & QStyle::State_Selected )
    6. {
    7. painter->fillRect( option.rect, option.palette.highlight() );
    8. }
    9.  
    10. int progress = index.data().toInt();
    11.  
    12. QStyleOptionProgressBar progressBarOption;
    13. progressBarOption.rect = option.rect;
    14. progressBarOption.rect.setTop( option.rect.top() + 1 );
    15. progressBarOption.rect.setHeight( option.rect.height() - 2 );
    16. progressBarOption.minimum = 0;
    17. progressBarOption.maximum = 100;
    18. progressBarOption.progress = progress;
    19. progressBarOption.text = QString::number(progress) + "%";
    20. progressBarOption.textVisible = true;
    21. progressBarOption.textAlignment = Qt::AlignCenter;
    22.  
    23. QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter);
    24. }
    25. else
    26. {
    27. QStyledItemDelegate::paint(painter, option, index);
    28. }
    29. }
    To copy to clipboard, switch view to plain text mode 

  3. #3
    Join Date
    Mar 2012
    Posts
    3
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: How to apply TreeView look & feel to a delegate?

    If only... but no, that's what I got now. As I said, it looks *almost* ok, just because the highlight color is pretty much the same as the "explorer" box border.
    Just try with a different delegate, try drawing a pixmap or just text.

    This should illustrate what I mean:

    Qt Code:
    1. void ProgressBarDelegate::paint( QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index ) const
    2. {
    3. if( option.state & QStyle::State_Selected )
    4. {
    5. painter->fillRect( option.rect, option.palette.highlight() );
    6. }
    7. QStyledItemDelegate::paint(painter, option, index);
    8. }
    To copy to clipboard, switch view to plain text mode 

  4. #4
    Join Date
    Sep 2011
    Location
    Manchester
    Posts
    538
    Thanks
    3
    Thanked 106 Times in 103 Posts
    Qt products
    Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: How to apply TreeView look & feel to a delegate?

    I'm not getting what you want.

    Do you want the 'modern highlight' - as you call it - to be over your progress bar/pixmap/anything, under it or not there at all?
    The two example images you shown are not obious either. None of them have the progress bar cell selected.

    If you want the highlight to be over the cell
    tree1.png
    then do that:
    Qt Code:
    1. void ProgressBarDelegate::paint( QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index ) const
    2. {
    3. if( index.column() == 1 )
    4. {
    5. int progress = index.data().toInt();
    6.  
    7. QStyleOptionProgressBar progressBarOption;
    8. progressBarOption.rect = option.rect;
    9. progressBarOption.rect.setTop( option.rect.top() + 1 );
    10. progressBarOption.rect.setHeight( option.rect.height() - 2 );
    11. progressBarOption.minimum = 0;
    12. progressBarOption.maximum = 100;
    13. progressBarOption.progress = progress;
    14. progressBarOption.text = QString::number(progress) + "%";
    15. progressBarOption.textVisible = true;
    16. progressBarOption.textAlignment = Qt::AlignCenter;
    17.  
    18. QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter);
    19. }
    20.  
    21. QStyledItemDelegate::paint(painter, option, index);
    22. }
    To copy to clipboard, switch view to plain text mode 
    If you want to keep the highlight but in the background
    tree2.png
    then do this:
    Qt Code:
    1. void ProgressBarDelegate::paint( QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index ) const
    2. {
    3. QStyledItemDelegate::paint(painter, option, index);
    4.  
    5. if( index.column() == 1 )
    6. {
    7. int progress = index.data().toInt();
    8.  
    9. QStyleOptionProgressBar progressBarOption;
    10. progressBarOption.rect = option.rect;
    11. progressBarOption.rect.setTop( option.rect.top() + 1 );
    12. progressBarOption.rect.setHeight( option.rect.height() - 2 );
    13. progressBarOption.minimum = 0;
    14. progressBarOption.maximum = 100;
    15. progressBarOption.progress = progress;
    16. progressBarOption.text = QString::number(progress) + "%";
    17. progressBarOption.textVisible = true;
    18. progressBarOption.textAlignment = Qt::AlignCenter;
    19.  
    20. QApplication::style()->drawControl(QStyle::CE_ProgressBar, &progressBarOption, painter);
    21. }
    22. }
    To copy to clipboard, switch view to plain text mode 
    Note: in both cases there's no filling any rectangles.

    If you want the cell not to be highlighted at all, then do what I've already showed just change the background color to white.

    If you want something else - then I have no idea what you want

  5. #5
    Join Date
    Mar 2012
    Posts
    3
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: How to apply TreeView look & feel to a delegate?

    Sorry, yes, that's what I want (the "explorer" selection box over or under the progress bar). I wasn't able to see it clearly in your previous example.

    The thing is, I'm not getting the same result. This is my code, which is the same that yours but written in pySide (python):

    Qt Code:
    1. class ProgressBarDelegate(QStyledItemDelegate):
    2. def __init__(self, parent):
    3. QStyledItemDelegate.__init__(self, parent=parent)
    4.  
    5. def paint(self, painter, option, index):
    6.  
    7. QStyledItemDelegate.paint(self, painter, option, index)
    8.  
    9. progress = index.data()
    10. bar_option.rect = option.rect
    11. bar_option.rect.setHeight(option.rect.height() - 4)
    12. bar_option.rect.setTop(option.rect.top() + 1)
    13. bar_option.minimum = 0
    14. bar_option.maximum = 100
    15. bar_option.progress = int(progress)
    16. bar_option.text = progress + '%'
    17. bar_option.textVisible = True
    18. bar_option.textAlignment = Qt.AlignCenter
    19. QApplication.style().drawControl(QStyle.CE_ProgressBar, bar_option, painter)
    To copy to clipboard, switch view to plain text mode 

    Qt Code:
    1. class MyTreeView(QTreeView):
    2. def __init__(self, parent=None):
    3. QTreeView.__init__(self, parent)
    4.  
    5. self.items = [["something", "1", "11", "t5est", "t3est"], ]
    6.  
    7. headers = ['a', 'b', 'c', 'd', 'e']
    8.  
    9. #QAbstractItemModel
    10. self._model = SimpleListModel(headers, self.items)
    11. self.setModel(self._model)
    12.  
    13. self.pb_delegate = ProgressBarDelegate(self)
    14. self.setItemDelegateForColumn(2, self.pb_delegate)
    To copy to clipboard, switch view to plain text mode 


    This is the result:
    example.jpg
    Last edited by estecb; 14th March 2012 at 19:25.

  6. #6
    Join Date
    Sep 2011
    Location
    Manchester
    Posts
    538
    Thanks
    3
    Thanked 106 Times in 103 Posts
    Qt products
    Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: How to apply TreeView look & feel to a delegate?

    I'm afraid I can't help you, I have no idea about python

    But if you're not drawing the blue background, then style is doint it.
    Try setting Window/Base/Button palette color to transparent on bar_option, maybe it will help - but that's only thing that comes to my mind.

    Good luck.

Similar Threads

  1. Look and Feel with static Qt
    By kumpane in forum Installation and Deployment
    Replies: 1
    Last Post: 26th February 2012, 19:20
  2. QToolBar look and feel
    By schall_l in forum Qt for Embedded and Mobile
    Replies: 0
    Last Post: 14th February 2011, 17:18
  3. Replies: 2
    Last Post: 12th February 2010, 05:41
  4. Replies: 2
    Last Post: 24th September 2009, 01:49
  5. Look and Feel on Debian Linux
    By Krish_ng in forum Qt Programming
    Replies: 1
    Last Post: 24th July 2007, 10:11

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.