locked
Sliding a transparent panel without the massive flickering on the form RRS feed

  • Question

  • I have a panel that is transparent with a couple pictureboxes on it (custom buttons).  I want to slide this panel off the screen to the left and slide another into its place.  When I slide the panel I get massive flickering as it redraws the background.  I understand what it is doing but I was hoping someone out there could give me a solution or a better way to do this.  The code for sliding my panel is below.

            private void SlideMainLeft()
            {           
                for (int i = 0; mainPanel.Right > 0; i -= 10)
                {
                    mainPanel.Location = new Point(i, 0);
                    mainPanel.Refresh();
                    
                }
            }//slide main panel off
    
            private void SlideMainRight()
            {
                for (int i = mainPanel.Location.X; mainPanel.Location.X < 0; i += 10)
                {
                    mainPanel.Location = new Point(i, 0);
                    mainPanel.Refresh();
                    
                }
            }

    Tuesday, February 28, 2012 7:47 PM

Answers

  • In all honesty, I don't think you can achieve flicker-free animation using what .net provides.  I ran a few tests and could not make it work.  If you want a flicker-free transparent or even semi-transparent animation, create your own window (cannot have a parent) that has the extended style WS_EX_LAYERED, then use the panel's DrawToBitmap() method to take a screenshot of the panel, then apply that screenshot to your semi-transparent window, then hide your panel and place your semi transparent window it its place and make it visible.  Now animate that window.  It will be flicker-free.  I have done this successfully.  I used WinAPI for a lot, including positioning.  I used SetWindowPos() and raw mouse input to follow the mouse cursor around with the semi-transparent window.

    Jose R. MCP

    • Proposed as answer by Mike Feng Thursday, March 1, 2012 10:27 AM
    • Marked as answer by Mike Feng Wednesday, March 7, 2012 12:41 PM
    Tuesday, February 28, 2012 11:11 PM
  • So here is what I have settled on for the moment.  I removed the background image and replaced it with an image which has a solid background in the area of the buttons and the slide.  I set the background color to match this section of the image.  By doing this I don't see the flicker and it looks tolerable.  This is not ideal but will work for now.  I have tight time lines for this and don't have the ability to spend anymore time on this right now.
    • Marked as answer by Mike Feng Wednesday, March 7, 2012 12:41 PM
    Thursday, March 1, 2012 2:16 PM

All replies

  • How are you achieving transparency?  I have done smooth transparent effects by creating a layered window (extended window style WS_EX_LAYERED) and then setting its opacity value with SetLayeredWindowAttributes().  Not sure if .Net has the equivalent for this.  If not, it is rather simple to apply this effect.  Personally, I think I would create a new custom class that inherits from Panel and then override CreateParams.

    Jose R. MCP

    Tuesday, February 28, 2012 8:03 PM
  • I just set the background color to transparent. 
    Tuesday, February 28, 2012 8:25 PM
  • Invalidate instead of Refresh should help.
    Tuesday, February 28, 2012 9:44 PM
  • In all honesty, I don't think you can achieve flicker-free animation using what .net provides.  I ran a few tests and could not make it work.  If you want a flicker-free transparent or even semi-transparent animation, create your own window (cannot have a parent) that has the extended style WS_EX_LAYERED, then use the panel's DrawToBitmap() method to take a screenshot of the panel, then apply that screenshot to your semi-transparent window, then hide your panel and place your semi transparent window it its place and make it visible.  Now animate that window.  It will be flicker-free.  I have done this successfully.  I used WinAPI for a lot, including positioning.  I used SetWindowPos() and raw mouse input to follow the mouse cursor around with the semi-transparent window.

    Jose R. MCP

    • Proposed as answer by Mike Feng Thursday, March 1, 2012 10:27 AM
    • Marked as answer by Mike Feng Wednesday, March 7, 2012 12:41 PM
    Tuesday, February 28, 2012 11:11 PM
  • So here is what I have settled on for the moment.  I removed the background image and replaced it with an image which has a solid background in the area of the buttons and the slide.  I set the background color to match this section of the image.  By doing this I don't see the flicker and it looks tolerable.  This is not ideal but will work for now.  I have tight time lines for this and don't have the ability to spend anymore time on this right now.
    • Marked as answer by Mike Feng Wednesday, March 7, 2012 12:41 PM
    Thursday, March 1, 2012 2:16 PM