PDA

View Full Version : Skinned dialogs



Lele
10th October 2006, 12:45
Hi all,
probably my question is very platform dependent but I'd like to know how can I have a skinned frame for my dialogs, just like Microsoft Messenger.
Thanks for any tips on that
Bye

e8johan
10th October 2006, 13:30
This is not platform specific - try to subclass QStyle. The style example shows how to implement norwegian wood, try starting from that.

Lele
10th October 2006, 13:49
thanks, I already use QStyle for customize widgets but I guess there's no way to customize application frame.

jpn
10th October 2006, 13:54
http://www.qtcentre.org/forum/f-qt-programming-2/t-window-style-3692.html

moowy
10th October 2006, 14:00
There is a way. U have to use native support and in there draw primitive element PE_CustomBase and than in drawPrimitive draw anything on it.

Lele
29th October 2006, 19:05
thanks for answering, this sounds very interesting to me, but I cannot figure it out how to do that.
One way could be to draw my window frameless and the draw by myself the window caption, but maybe there's a better way to do that
thanks,
bye

pherthyl
31st October 2006, 00:56
One way could be to draw my window frameless and the draw by myself the window caption, but maybe there's a better way to do that

This is how microsoft does it. (Windows media player, Live messenger, Office 12, etc). So still a dirty hack, but now endorsed by microsoft!

Lele
31st October 2006, 08:19
Thanks for your answer, I'll try to do that. However I thought there someone had already tried to have such kind of dialogs in Qt.
Bye

PiXeL16
10th February 2007, 05:32
Hi, Did you find a solution, im trying to do the same thing, with resizing support?
Any example that i could find to do this?

Brandybuck
10th February 2007, 06:30
Making your dialogs frameless, then drawing your own frame, is the best way. I have never done this directly, but I have done similar things writing an X11 window manager. Here's a brief overview:

1) Create a widget called WindowFrame
2) Give it a 3x3 grid layout
3) Put your dialog in the center
4) In WindowFrame::paintEvent(), draw corner pixmaps in the corner, and tilable edge pixmaps on the edges
5) To make it resizable, implement mousePressEvent() and mouseMoveEvent()

The inclusion of titlebar and title buttons I leave an an exercise to the reader.

PiXeL16
13th February 2007, 05:44
Hi, Thanks for the suggestions. I did what you say and it work.
The only problem that i had now is clipping the transparent part of the borders, so its actually round, and not black(it show transparent color as black)
I read that i can accomplish this with a mask, but i don't know how to add a mask to the widget, just to the particular corners.
All the different borders are separate images, and i have to join them some how, and then apply the mask to the widget
Any help with this???
thanks in advance!
CJC

PiXeL16
13th February 2007, 16:37
Someone can help on this plz? :confused:

Brandybuck
13th February 2007, 18:27
The only problem that i had now is clipping the transparent part of the borders, so its actually round, and not black(it show transparent color as black)
I read that i can accomplish this with a mask, but i don't know how to add a mask to the widget, just to the particular corners.
All the different borders are separate images, and i have to join them some how, and then apply the mask to the widget
Any help with this???
You will need to create the widget's bitmap mask out of the borders' masks. Set the size of the bitmap to the size of the widget, then "draw" in the corner and edge bitmap masks.

Adding the mask to the widget is the same as adding it to a pixmap: QWidget::setMask()

PiXeL16
13th February 2007, 22:29
I thanks, i had try this but i dont know why is not working.
I create a widget and add 9 frames, 8 for all the borders and 1 for the widget.
Then I set the borders as background images to their specific frame.
Then I try to create my pixmap buffering all the borders
Here is my code.




QPixmap buffer(_mainWidget->size());

QPainter painter(&buffer);

painter.drawPixmap(_uiMainWidget->upperLeftFrame->frameRect(), QPixmap(":pics/bg/upperLeftFrame.png"),
_uiMainWidget->upperLeftFrame->frameRect());
...
painter.drawPixmap(_uiMainWidget->leftFrame->frameRect(),
QPixmap(":pics/bg/leftFrame.png"),
_uiMainWidget->leftFrame->frameRect());



THe result here is that all my border images are drawn staked in the upper left side of the pixmap. And not in the correct position where the frames are.
Where could be wrong here? Are im using wrong the drawpixmap funtionality or missing something?
Any help will be much appreciated
Thanks
CJC

stevey
14th February 2007, 02:10
Have you tried Style sheets?

PiXeL16
14th February 2007, 02:57
How can sc help with the problem of the images? that i specified before?

PiXeL16
14th February 2007, 07:35
HI, i kind of fix my issue.
I should use .geometry and not frameRect()
Thanks for all the help
CJC :o

kernel_panic
23rd June 2007, 12:52
could anyone post the code for resizing the frameless widget?
i tried this, but till today i've no idea how to implement this by myself...

jpn
24th June 2007, 14:33
could anyone post the code for resizing the frameless widget?
i tried this, but till today i've no idea how to implement this by myself...
How about QSizeGrip?

kernel_panic
25th June 2007, 12:15
thanks
one question: with qsizegrip ic can only resize to bottom-left, how can i let it resize to left or right or bottom only?

jpn
25th June 2007, 14:03
one question: with qsizegrip ic can only resize to bottom-left, how can i let it resize to left or right or bottom only?
One can place QSizeGrip to any corner and it will automatically adjust its behavior. For horizontal and vertical resize mode you will need something custom:

catch the point of mouse press event
resize the window on the fly in mouse move event
I suggest taking a sneak into QSizeGrip sources for more detailed implementation hints.

kernel_panic
26th June 2007, 06:22
i've made up two Skin-Classes (QSkinWidget and QSkinMainWindow) with the behavior like real widgets and windows (moving, resizing, title...) I will put them into the "Software Sektion". Thanks for all help.

PiXeL16
9th August 2007, 02:35
Hi, Is there a way to acomplish this with style sheets?
I have my frameless widget, now, is there a way to make its border round using style sheets?
Any help will me much appreciated
Thanks
CJC

marcel
9th August 2007, 02:59
Not with style sheets. Better create a custom style for this, but you will have to do the drawing.

Another, way simpler solution is to create a QRegion and apply it as a mask on the dialog. But this will affect the children too( everything that passes outside the bounds will get cut ).

regards

Nabeel
9th August 2007, 08:43
Hi, This post of mine is very beneficial and informative, however there are some specific facts or information that I require. If anyone can help me in this matter then please send me a private message. Best Regards,