This blog post was authored by Chee Chen Tong, a Program Manager on the Windows Phone team.
- Adam
Including a WebBrowser control in your Windows Phone app is a strategic way to integrate web content in your app. It can help you extend the value of your investments, because you don’t have to recreate content to use it on different platforms. Many of the more than 30% of Windows Phone apps that incorporate the WebBrowser control in their design integrate the control and the web contents within the app seamlessly simply using XAML properties. Frameworks such as PhoneGap use the WebBrowser control to display HTML content, and they use CSS and JavaScript to further expand cross-platform capabilities. Below are some common scenarios and tips that may be helpful when using the WebBrowser control in your Windows Phone app.
Setting the WebBrowser background color
You might want the background of the web content in your app to match your app’s overall design, or even match the theme the app user has set for their phone. Unfortunately, no matter what color you set for the WebBrowser control background, the user will see a flash of white background while the control initializes, and before the web content is loaded. This is because the WebBrowser control loads a white about:blank page during initialization, before any navigation occurs. Although Windows Phone 8 supports the DefaultBackground color property, the effective way to use this property depends on a certain sequence of events. You need to set the visibility of the WebBrowser control after the content has been navigated to or after the content has loaded. This code example illustrates how to do this:
- privatevoid NavigateHandler(object sender, NavigationEventArgs e)
- {
- WebBrowser wb = sender asWebBrowser;
- if (wb != null)
- {
- wb.Visibility = Visibility.Visible;
- }
- }
- privatevoid PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
- {
- WebBrowser webBrowser = newWebBrowser();
- webBrowser.Background = new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
- webBrowser.Navigate(newUri("http://www.microsoft.com", UriKind.Absolute));
- webBrowser.Navigated += newEventHandler<NavigationEventArgs>(NavigateHandler);
- webBrowser.Visibility = Visibility.Collapsed;
- webBrowser.Height = 543;
- webBrowser.Width = 456;
- webBrowser.IsScriptEnabled = true;
- ContentPanel.Children.Add(webBrowser);
- }
While content is loading, and because the WebBrowser control itself is not yet visible, we recommend that you provide a visual progress indicator for the app user, either using the ProgressBar control, or with a spinner UI, for example.
Rendering WebBrowser control content onto a bitmap
Sharing is becoming a normal activity on the phone, and many app developers prefer to capture screenshots to use in sharing scenarios. On a typical page, you can use WriteableBitmap and pass it the LayoutRoot of a page to capture a screenshot of the page. In earlier releases of Windows Phone, if a WebBrowser control was embedded in the page, a blank rectangle displayed where the WebBrowser control was on the page. In Windows Phone 8, though, you can capture the content of a WebBrowser control with a few lines of code:
- WriteableBitmap bitmap = new WriteableBitmap(400, 400);
- bitmap.Render(Browser, null);
- bitmap.Invalidate();
- ImageElement.Source = bitmap;
WebBrowser control Hold event not being raised
One of the things an app developer commonly would want to do is handle certain gesture events that aren’t supported by the WebBrowser control itself. The WebBrowser control doesn’t bubble up events, so you don’t have a reliable way to execute custom logic in response to specific user input.
One of these types of events is the Hold event. The WebBrowser control doesn’t provide a context menu for the Hold event, and the event is being consumed by the container control that hosts the WebBrowser control. If you followed the visual tree to get the container control, registering for the Hold event will work. The following code example shows you how to handle the Hold event, and to provide a context menu if you need to:
- privatevoid webBrowser _Loaded(object sender, RoutedEventArgs e)
- {
- var border0 = VisualTreeHelper.GetChild(sender, 0);
- var border1 = VisualTreeHelper.GetChild(border0, 0);
- var Container = VisualTreeHelper.GetChild(border1, 0);
- if (Container!= null)
- {
- Container.Hold += Border_Hold;
- }
- }
- void Border_Hold(object sender, GestureEventArgs e)
- {
- e.Handled = true;
- }
Be sure to see Mark Hopkins's blog post about hybrid web apps titled Make your mobile website into a Windows Phone app. For more information about Windows Phone web development, see Web development for Windows Phone.