Form-Fading Woes...

[B2Ben]

I'm building an application that will allow me to play video and display images full-screen. I'm trying to build a routine that will allow me to fade into an image.

My main form is a black-background, maximized form - thus making the entire screen black. When I want to see an image, I set the backgroundimage property to my image.

When I want to fade into something, I create a temporary maximized form on top, set the background image, and then slowly adjust the opacity from 0 to 1. So far it works great.

When the fade-in effect is done, I want to display the new image on my main form, and get rid of my temporary form I used for the animation.

The problem... When I update the main form's image, and hide the "fade-in" form, it triggers a nasty screen refresh, causing the image to flash for a split second, ruining the nice effect. It looks like: Black... Fading in... Fading in... Fading in... Screen goes black for a split second while refreshing... Done. My new image is now showing completely opaque.

I feel like I'm so close, but that ugly refresh just wrecks the whole effect.

If anyone has any ideas, it would be greatly appreciated.

Here's a little bit of code...

Private Panel as new FadeForm
 
Private Sub DoFade()
    Panel.BackgroundImage = Me.SetFadeImage
    Panel.BackColor = Me.SetFadeColor
    Panel.Opacity = 0
    Panel.Show()
    Panel.BringToFront()
    Panel.Refresh()
    For Opac As Double = 0 To 1 Step 0.01
        Panel.Opacity = Opac
        System.Threading.Thread.Sleep(10)
        Application.DoEvents()
    Next
    'Fade complete. Update main screen with new image/color and hide the fade panel.
    Me.BackColor = Panel.BackColor
    Me.BackgroundImage = Panel.BackgroundImage
    Panel.Hide()
End Sub

 

[Paszt]

I would use GDI+ to create better results.
In this post there is an attached project with a subclassed picturebox using ImageAttributes and ColorMatrix objects along with the Graphics.DrawImage method to do photo fading in/out. The same effect could be applied to a form.

 

[B2Ben]

Actually I've tried messing with images and their alpha values, but it's painfully slow when dealing with large full-screen images.

I finally changed my approach and it seems to be working...

I keep two black maximized forms open. When I call for a fade, the form in the back is hidden, has an image applied, sets opacity to 0, moves to the front, is shown, and then the opacity fades up to 100%. The next time I call for a fade, whatever form is in the back follows the same procedure.

I had to hide the form in the background, because when I set the background image, it forced the form in the foreground to refresh as well, causing the "blink". Now I've got a smooth fade process from one form to another. I also had to set the opacity of the front form to 1.01 - setting it to 1 would still leave a little bit of transparency that slowed things down (I read that somewhere online) and it seemed to help.

If anyone's interested I can build a demo app to share. This has been a struggle for quite awhile, so it's nice to have something working now.