Windows Phone 7开发技巧【1】——修改Webbrowser控件背景颜色和防止加载过程中的闪烁
大家知道，在WP7开发中，WebBrowser控件的功能很好很强大。基本应用中，用来显示长文本是很不错的选择，特别是网页抓取内容的显示。高级应用中，可以使用html/css/js打造炫酷的效果。园子里关于WebBrowser的好文章很多，值得学习。我这里分享WebBrowser开发中遇到的两则小技巧，属于WebBrowser控件的基本应用，希望对大家有所帮助。
一、使用WebBrowser
Xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:WebBrowser Name="webBrowser" Margin="12,0,0,0"/> </Grid>
代码
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 += "<html><body>"; rawHtml += content; rawHtml += "</body><html>"; 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 += "<html><body bgcolor=\"#000000\"><p>"; } else { rawHtml += "<html><body bgcolor=\"#FFFFFF\">"; } rawHtml += content; rawHtml += "</p></body></html>"; 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 += "<html><body bgcolor=\"#000000\"><p>"; rawHtml += "<font color=\"#FFFFFF\">"; } else { rawHtml += "<html><body bgcolor=\"#FFFFFF\"><p>"; rawHtml += "<font color=\"#000000\">"; } rawHtml += content; rawHtml += "</p></font></body></html>"; webBrowser.NavigateToString(rawHtml); }
代码片段将文本颜色修改为WebBrowser控件背景颜色的反色。
如果你跟着笔者一起运行了以上代码，你会发现WebBrowser控件在加载过程中闪烁了一下，白色的背景一闪而过，看来江山易改，本性难移。怎么能让WebBrowser控件不要露出白色“獠牙”呢？
三、防止WebBrowser控件加载过程中的闪烁
大致分析一下发生闪烁产生的原因。WebBrowser控件自身的背景颜色是白色，加载咱们的html后，背景被修改为黑色。那么在WebBrowser控件显示以后，加载html完成之前，WebBrowser控件将呈现白色。这段时间比较短暂，但还是被我们灵敏的眼睛捕捉到了。原因清晰了，我们来考虑解决的方法：我们想要的是加载html完成后的WebBrowser，之前他是什么样子，我们不care，既然不care，干脆隐藏掉好了，相比各位又猜出十之八九了。
Xaml
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <phone:WebBrowser Name="webBrowser" Margin="12,0,0,0" Opacity="0" LoadCompleted="WebBrowser_LoadCompleted"/> </Grid>
设置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等。大家有空不妨一试。
（全文完）
