Results 1 to 8 of 8

Thread: Custom shaped pop-up menu with a border and shadow

  1. #1
    Join Date
    Feb 2011
    Posts
    354
    Thanks
    17
    Thanked 27 Times in 24 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Windows

    Default Custom shaped pop-up menu with a border and shadow

    I am wondering how to create a border around a pop-up menu of a custom shape. Shadow would be nice too. So far I managed to create the following:



    The menu features a custom shape. However, the border is still rectangular and the shadow is missing.
    Magicians do not exist

  2. #2
    Join Date
    Jan 2006
    Location
    Munich, Germany
    Posts
    4,714
    Thanks
    21
    Thanked 418 Times in 411 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    However, the border is still rectangular and the shadow is missing.
    My guess is that you are using a mask, which is what I would do as well.
    Mask however doesn't change the shape of the widget it only controls which parts are "transparent" (for a lack of a better description).
    So when you apply a border it is placed on the real rect of the widget.
    The solution would be to paint the border your self along the mask lines.

    The shadow is just a visual candy painted on the widget - since you didn't post any code my guess is that at the moment you are painting it outside the widgets rect.
    ==========================signature=============== ==================
    S.O.L.I.D principles (use them!):
    https://en.wikipedia.org/wiki/SOLID_...iented_design)

    Do you write clean code? - if you are TDD'ing then maybe, if not, your not writing clean code.

  3. #3
    Join Date
    Feb 2011
    Posts
    354
    Thanks
    17
    Thanked 27 Times in 24 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    First of all, thank you for your reply. I don't use a mask as long as I don't know how to fit its size to the items inside the menu. Depending on the machine settings, the items may take more or less screen space and I may need to add more items in future, whereas the mask can't stretch. My approach was to use QWidgetAction added as a bottom item. This widget action contains an image with a transparent background. The menu itself is also transparent. This way I managed to achieve this shape which can adjust to the items being altered.
    Magicians do not exist

  4. #4
    Join Date
    Jan 2006
    Location
    Munich, Germany
    Posts
    4,714
    Thanks
    21
    Thanked 418 Times in 411 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    I see.
    However, even so (or even more so) my proposals are still valid.
    ==========================signature=============== ==================
    S.O.L.I.D principles (use them!):
    https://en.wikipedia.org/wiki/SOLID_...iented_design)

    Do you write clean code? - if you are TDD'ing then maybe, if not, your not writing clean code.

  5. #5
    Join Date
    Feb 2011
    Posts
    354
    Thanks
    17
    Thanked 27 Times in 24 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    Probably, I don't understand your idea fully. If I paint the image with a border and a shadow, how do I make it stretch to fit the menu items?
    Magicians do not exist

  6. #6
    Join Date
    Jan 2006
    Location
    Munich, Germany
    Posts
    4,714
    Thanks
    21
    Thanked 418 Times in 411 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    Probably, I don't understand your idea fully. If I paint the image with a border and a shadow, how do I make it stretch to fit the menu items?
    And now I don't fully understand your question :-)
    If your paint your border by "tracing" the menu's border, then it will always trace the border fitting to the size of the menu (by tracing I mean you take the current rect and paint with a pen with some width along the rect. at least for the upper three edges. For the lower one you would need to know where the opaque part of the image is and paint there).
    Is this is what you meant with your question?
    ==========================signature=============== ==================
    S.O.L.I.D principles (use them!):
    https://en.wikipedia.org/wiki/SOLID_...iented_design)

    Do you write clean code? - if you are TDD'ing then maybe, if not, your not writing clean code.

  7. #7
    Join Date
    Feb 2011
    Posts
    354
    Thanks
    17
    Thanked 27 Times in 24 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    If I paint an image it will be of a fixed size, e.g. 300x400. But the items may take more or less space (depending on screen resolution, title, number of items etc). Thus, I don't understand how can it fit the items then.
    Magicians do not exist

  8. #8
    Join Date
    Jan 2006
    Location
    Munich, Germany
    Posts
    4,714
    Thanks
    21
    Thanked 418 Times in 411 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Custom shaped pop-up menu with a border and shadow

    Ok, there are two issues:
    1. The border
    2. The image below (because of the ---v--- shape)

    For the border I think its clear how to draw it, let me know if not.
    For the image below, I'd have it done in tow stages:
    1. A rectangular transparent image without the --v--- in the top of the image. you can then resize the image as you need depending on the with of your menu (I guess the height is constant)
    2. Put a new opaque image only of the --v-- on top of the transparent image in the middle of the menu width (minus the --v-- image width/2), and voila! :-)

    Another possibility is to use 1 pixel wide tiles, and that you can always fit your shadow and lower transparent image to the size of your menu similar to how the Qt Style sheets are doing it.
    Indeed, maybe even using stylesheets might do the trick, but I am not sure if any problem may come up or if your situation has any restrictions that might impact the usage of stylesheets - you might want to read about them to be sure.
    ==========================signature=============== ==================
    S.O.L.I.D principles (use them!):
    https://en.wikipedia.org/wiki/SOLID_...iented_design)

    Do you write clean code? - if you are TDD'ing then maybe, if not, your not writing clean code.

  9. The following user says thank you to high_flyer for this useful post:

    mentalmushroom (22nd December 2017)

Similar Threads

  1. Context Menu for Tree View with a custom shaped
    By vipu in forum Qt Programming
    Replies: 1
    Last Post: 16th July 2012, 12:29
  2. Custom Shaped QPushButton
    By frknml in forum Qt Programming
    Replies: 1
    Last Post: 6th December 2010, 15:28
  3. custom shaped buttons
    By jsabater in forum Qt Programming
    Replies: 5
    Last Post: 2nd July 2009, 15:17
  4. Custom-Shaped Widget
    By [Po]lentino in forum Newbie
    Replies: 2
    Last Post: 9th April 2009, 23:41
  5. Custom shaped forms and controls
    By AlbertGoodwill in forum Qt Programming
    Replies: 1
    Last Post: 19th October 2007, 07:35

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.