Silverlight WebBrowser Control and Windows Phone 7

Silverlight for Windows Phone 7 contains a WebBrowser control and there is nothing to impressive about that other than you have the ability to load a web page within your Silverlight application. But there is a hidden gem, the ability for two way communication with the webpage within your Silverlight app. There is a mini browser sample available on the Windows Phone Development section on MSDN which basically places a web browser control with a textBox and button so you can navigate to a URL. If you know the basics of using the control skip to the Hidden Gem section below.

The Basics

Using the WebBrowser control is nothing too exciting or complicated.  Just drag it from your ToolBox within Visual Studio Express for Windows Phone and drop it on your page in the designer.  Visual Studio will automatically add a reference to Microsoft.Phone.Controls.Webbrowser and Microsoft.Phone.Controls.WebbrowserInterop.

Then doing a quick call to WebBrowser.Navigate() on the button click event and your done.  Again nothing too exciting or complicated but can be useful in some situations within your app.

The Hidden Gem

The hidden gem I learned during Mike Harsh’s MIX10 session.  I was really excited about it because it solved a few problems I had on previous versions. This gem comes in the form of the WebBrowser.IsScriptEnabled property.    Basically this property will allow the loaded page within the webBrowser control invoke the ScriptNotify Event handler within your Silverlight app.  But that’s not all, using the WebBrowser.InvokeScript allows the Silverlight for Windows Phone app invoke a Javascript function on the web page loaded within the webBrowser control.  Basically you have two way communication which could be valuable in some situations.  Here’s how it works.

First step is making sure the IsScriptEnabled property is set to true.  This allows the communication to work between the two layers.  Default value is false.

In the sample code, I created a textBox to type in the URL to browse to and a button to call WebBrowser.Navigate().  I also created an extra textBox and button to invoke a javascript function within the loaded web page.  You will also have to wire up the WebBrowser.ScriptNotify event.  I did this via Xaml but can also be done in code as follows:

webBrowser1.ScriptNotify+=new EventHandler (webBrowser1_ScriptNotify);

and the handler is just a messagebox to show the data received

private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
{
MessageBox.Show(

string.Format("New value received from web browser control (/"{0}/")", e.Value));
}

To invoke a script in the web browser control use the InvokeScript method passing in the Javascript method  to invoke and the string to send as follows:

webBrowser1.InvokeScript("DataReceivedFromPhoneApp", textBox1.Text);

The page is very basic and looks like this.

The other side of this sample is a web page to load.  Again I kept it basic but here is the web page rendered

and the source

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<script type="text/javascript">
function DataReceivedFromPhoneApp(input) {
textReceived.innerHTML = input;
return true;
}

function SendDataToPhoneApp() {
window.external.Notify(textToSend.value);
}
</script>

Enter your text:

Value received from phone app:

style="font-size: x-large; font-weight: bold; color:

#800000; border: thin solid #000000">

When you run the app an navigate to the page (I hosted it on my local IIS on my dev machine) it will render up the web page.  Clicking the button inside the web browser control produces the following.

And clicking the button within the Silverlight app modifies the html via javascript producing the following

Conclusion

There you have it two way communication between your Silverlight for Windows Phone 7 app and a web page within the WebBrowser control.

Pre-Windows Phone 7 using .NET Compact Framework this was possible but again with a lot of extra effort.  As far as I know, you would need to create an ActiveX control, register it on the device and somehow communicate with the web browser and the .NET CF app using some form of Inter-Process Communication (IPC).  Not fun or easy!

Explore some more and download the sample code here.