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 即可。 效果十分不錯。