How to make smooth transition from a WebBrowser control to an Image in Silverlight 4?

Question

I have the following XAML on my page:

<Grid x:Name="LayoutRoot">  
        <Viewbox Stretch="Uniform">  
        <Image x:Name="myImage" />  
    </Viewbox>  
    <WebBrowser x:Name="myBrowser"  />  
</Grid>

and then in the codebehind I'm switching the visibility between the image and the browser content:

myBrowser.Visibility = Visibility.Collapsed;  
            myImage.Source = new BitmapImage(new Uri(p));  
            myImage.Visibility = Visibility.Visible;

and

myImage.Visibility = Visibility.Collapsed;  
            myBrowser.Source = new Uri(myPath + p, UriKind.Absolute);  
            myBrowser.Visibility = Visibility.Visible;

This works fine, but what the client now wants is a smooth transition between when the Image is shown and when the browser is shown. I tried several approaches but always ran into dead end. Do you have any ideas?

I tried setting two states using the VSM and than displaying a white rectangle on top as an overlay, before the swap takes place, but that didn't work (I guess it's because nothing can be placed above the WebBrowser?) I tried setting the Visibility of the image control and the webbrowser control using the VSM, but that didn't work either. I really don't know what else to try to solve this simple task.

Any help is greatly appreciated.

Answer 1

If you're looking for a "smooth" transition that you might want to try fading the controls in and out. Animate the Opacity of each object. For example, set the opacity of the ViewBox to zero and the opacity of the image to 100. Then animate the opacity property of both objects.

The end-result will be a smooth transition from one object to the other.

Here is an MSDN article to get you started: Animation Overview