首頁 > 開發者 > Windows Phone
大家知道，在WP7開發中，WebBrowser控制項的功能很好很強大。基本應用中，用來顯示長文本是很不錯的選擇，特別是網頁抓取內容的顯示。進階應用程式中，可以使用html/css/js打造炫酷的效果。園子裡關於WebBrowser的好文章很多，值得學習。我這裡分享WebBrowser開發中遇到的兩則小技巧，屬於WebBrowser控制項的基本應用，希望對大家有所協助。
一、使用WebBrowserXaml
<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等。大家有空不妨一試。
代碼下載
（全文完）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
