Windows Phone 7开发技巧【1】——修改Webbrowser控件背景颜色和防止加载过程中的闪烁

tanggang1740

　　大家知道，在WP7开发中，WebBrowser控件的功能很好很强大。基本应用中，用来显示长文本是很不错的选择，特别是网页抓取内容的显示。高级应用中，可以使用html/css/js打造炫酷的效果。园子里关于WebBrowser的好文章很多，值得学习。我这里分享WebBrowser开发中遇到的两则小技巧，属于WebBrowser控件的基本应用，希望对大家有所帮助。

一、使用WebBrowser
　　Xaml






　　代码



    public partial class MainPage : PhoneApplicationPage
{
// 构造函数
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
string content = @"If you shed tears when you miss the sun, you also miss the stars.";
string rawHtml = "";
rawHtml += "";
rawHtml += content;
rawHtml += "";
webBrowser.NavigateToString(rawHtml);
}
}
　　WebBrowser控件的背景颜色默认为白色，在控件属性中无法修改。若应用的整体背景色是黑色，WebBrowser控件则显得不协调，那么如何修改其显示呢？

二、修改WebBrowser控件背景颜色
　　大家知道，WebBrowser控件其实就是一个浏览器页面，该页面的显示无疑也可由html来控制，说到这里大家也许已经知道了：使用bgcolor属性来控制背景颜色。
　　代码：



        private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
string content = @"If you shed tears when you miss the sun, you also miss the stars.";
            string rawHtml = "";
if (IsThemeDark())
{
rawHtml += "";
}
else
{
rawHtml += "";
}
rawHtml += content;
rawHtml += "";
webBrowser.NavigateToString(rawHtml);
}
private bool IsThemeDark()
{
Visibility darkBackgroundVisibility = (Visibility)Application.Current.Resources["PhoneDarkThemeVisibility"];
return darkBackgroundVisibility == Visibility.Visible;
        }
　　使用IsThemeDark来判断当前Application的默认背景颜色是不是黑色，保持WebBrowser控件背景颜色与App默认背景色一致。事例App采用默认的黑色背景，运行，发现乌黑一片，泰戈尔没了踪影，咋回事呢？原来WebBrowser死性难改，字体颜色还是黑色，好在咱还稍微懂点html，继续：



        private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
string content = @"If you shed tears when you miss the sun, you also miss the stars.";
string rawHtml = "";
if (IsThemeDark())
{
rawHtml += "";
rawHtml += "";
}
else
{
rawHtml += "";
rawHtml += "";
}
rawHtml += content;
rawHtml += "";
webBrowser.NavigateToString(rawHtml);
}
　　代码片段将文本颜色修改为WebBrowser控件背景颜色的反色。
　　如果你跟着笔者一起运行了以上代码，你会发现WebBrowser控件在加载过程中闪烁了一下，白色的背景一闪而过，看来江山易改，本性难移。怎么能让WebBrowser控件不要露出白色“獠牙”呢？

三、防止WebBrowser控件加载过程中的闪烁
　　大致分析一下发生闪烁产生的原因。WebBrowser控件自身的背景颜色是白色，加载咱们的html后，背景被修改为黑色。那么在WebBrowser控件显示以后，加载html完成之前，WebBrowser控件将呈现白色。这段时间比较短暂，但还是被我们灵敏的眼睛捕捉到了。原因清晰了，我们来考虑解决的方法：我们想要的是加载html完成后的WebBrowser，之前他是什么样子，我们不care，既然不care，干脆隐藏掉好了，相比各位又猜出十之八九了。
　　Xaml






　　设置WebBrowser控件的Opacity属性为0，将其默认隐藏。处理LoadCompleted事件。
　　代码



        private void WebBrowser_LoadCompleted(object sender, NavigationEventArgs e)
{
webBrowser.Opacity = 1;
}
　　响应LoadCompleted事件，WebBrowser控件加载完毕后，才将其显示出来。运行，效果不错，整个世界清静了。

四、总结
　　这里分享的设置背景颜色和防止闪烁，只是WebBrowser应用中遇到的基础问题，例如还有加载中文时乱码等其他问题，可以到园子里搜一下其他文章。已经说了，WebBrowser功能很好很强大，特别地，芒果增加了对HTML5的支持，开发者可以使用HTML5技术基于WebBrowser打造更个性化的Native应用。更重要的是，基于HTML5的开发是跨平台的。已有不少开源项目支持了WP7，例如JQuery.Mobile，PhoneGap等。大家有空不妨一试。
　　代码下载
　　（全文完）