How to avoid blinking when calling NavigateToString in WP7 Silverlight WebBrowser Control

Question

I need to render some Rich Text in the screen that needs to change following a timeline. In my iOS version I use the Web control and in Android version I use TextSpan.

I read some recommendations where people state that the WebControl is the best way to render rich text in Windows Phone 7 so I have a WebBrowser control that I populate with an HTML string. Everything works fine until I decide to programmatically change the content with a call to NavigateToString. The content gets changed but with a brief blink to a white screen in between.

As my program needs to update the contents of the WebBrowser control several times per second the screen turns all white from all the refreshes.

I am considering the painful idea of using TextBlocks with inline and LineBreaks but I will have to convert my HTML manually so I wanted to try to see if someone knows how to do this.

To replicate the issue just place a WebBrowser control on a page and update the content with NavigateToString to see the white transition blinking

Chris Sainty Chris Sainty · Accepted Answer · 2011-08-21T23:00:34

I do a combination of OnNavigated and javascript. I start with Opacity = 0 and load a placeholder page into the control.

<html>
 <head>
  <script type="text/javascript">function setContent(s) { document.body.innerHTML = s; } </script>
 </head>
 <body></body>
</html>

In OnNavigated I set Opacity = 1 then I use InvokeScript to load my actual content.

webBrowser.InvokeScript("setContent", myContents);

In my case I am filling the entire page contents, though you might be able to write a more targetted piece of javascript if you are only changing certain pieces of the page.

How to avoid blinking when calling NavigateToString in WP7 Silverlight WebBrowser Control

3 Answers