Windows Phone实用开发技巧（41）：解决WebBrowser中显示黑色背景网页闪屏

在Windows Phone 中，我们需要显示HTML内容，首选解决方案是WebBrowser。但是WebBrowser中时常出现各种问题：乱码、闪屏等等。

 

WebBrowser的默认背景颜色是白色的，如果我们想让WebBrowser的背景颜色变成黑色，需要在要显示HTML中添加css代码

body{

background-color:black;

color:white;

}

但是随之而来遇到的一个问题就是会出现从白色背景到黑色背景的突变，导致的结果是屏幕会闪一下。本文的目的是解决这个问题，当然大家如果有更好的解决方案可以跟我分享下。

 

方案一： 通过渐变动画

我们通过一个渐变的动画，让WebBrowser逐渐显示。

private void FadingIn()
{
    Storyboard storyboard = new Storyboard();

    DoubleAnimation animation = new DoubleAnimation();
    animation.Duration = (Duration)TimeSpan.FromSeconds(0.5);
    animation.BeginTime = TimeSpan.FromSeconds(0.2);
    animation.From = 0.2;
    animation.To = 1.0;
    Storyboard.SetTargetProperty(animation, new PropertyPath("Opacity", new object[0]));
    Storyboard.SetTarget(animation, webBrowser);

    storyboard.Children.Add(animation);
    storyboard.Begin();
}
在设置完webBrowser的Source或者调用webBrowser的Navigate方法之后就可以调用FadingIn了。

效果还可以，主要是看到的WebBrowser中的内容有一个渐变的动画，我在Windows Phone糗事百科App中的查看大图中就使用了这种方法。 （用WebBrowser显示图片是一个相当偷懒的方案）

 

方案二、 设置透明度

由上面的渐变动画得到的启示，我们可以一开始将WebBrowser的Opacity设置为0，然后在加载完成事件（LoadCompleted）中奖Opacity还原为1.0 即可。 效果十分不错。