Question

I have some files in IsolatedStorage with HTML text. How can I display this in the app? I’m currently using WebViewwith it’s NavigateToString("html content") property, but it doesn’t work quite well, like I can’t display any UI elements over it. Is there any alternate solution to this?

Answer 1

It appears the solution is to create an image from the rendering of the html and display that instead of the actual WebView.

From here, bold mine:

WebView has the characteristic that other UI regions such as controls cannot be rendered on top of the WebView. This is because of how window regions are handled internally, particularly how input events are processed and how the screen draws. If you want to render HTML content and also place other UI elements on top of that HTML content, you should use WebViewBrush as the render area. The WebView still provides the HTML source information, and you reference that WebView through element name binding and the SourceName property. WebViewBrush does not have this overlay limitation.

If you want to display an interactive WebView that only occasionally has overlapping content (such as a drop-down list or app bar), you can temporarily hide the WebView control when necessary, replacing it with an element using a WebViewBrush fill. Then, when the overlapping content is no longer present, you can display the original WebView again. For more info, see the WebView control sample.

Example code found here:

//create webview and rectangle
<WebView x:Name="WebView6" /> 
<Rectangle x:Name="Rect1"/> 

//put content in the webview
protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 

    // Ensure that our Rectangle used to simulate the WebView is not shown initially 
    Rect1.Visibility = Windows.UI.Xaml.Visibility.Collapsed; 

    WebView6.Navigate(new Uri("http://www.bing.com")); 
}

//make the rectangle visible when you want something over the top of the web content
Rect1.Visibility = Windows.UI.Xaml.Visibility.Visible;

//if the rectangle is visible, then hit the webview and put the content in the webviewbrush
if (Rect1.Visibility == Windows.UI.Xaml.Visibility.Visible) 
{ 
    WebViewBrush b = new WebViewBrush(); 
    b.SourceName = "WebView6"; 
    b.Redraw(); 
    Rect1.Fill = b; 
    WebView6.Visibility = Windows.UI.Xaml.Visibility.Collapsed; 
}