Automatic height for WebBrowser Windows Phone 8

Question

I'm trying to render some html content with a WebBrowser xaml control. The html content varies in length. The control is placed within a grid with single row at the moment. I would like to place other controls (StackPanels) before and after the web browser and to get vertical scrolling across the entire layout.

Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <phone:WebBrowser
                Grid.Row="0"
                x:Name="webBrowser1"
                Background="Black"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                IsScriptEnabled="False"                
                Visibility="Visible">            
        </phone:WebBrowser>            

        <ProgressBar Visibility="Visible" x:Name="LoadingProgress" Indeterminate="True"></ProgressBar>

    </Grid>

However I can only scroll the current viewport, being forced to apply a fixed height to the webbrowser.

The theoretical structure I'm aiming to is:

• scrollviewer
  • StackPanel
  • WebBrowser (probably within another stackPanel)
  • StackPanel
  • ...
  • Stackanel

and would like to scroll the scrollViewer, not the webbrowser, so the browser would automatically resize based on the content loaded. Any suggestions?

Answer 1

I found a good blog post on MSDN that addresses this issue: http://blogs.msdn.com/b/mikeormond/archive/2010/12/16/displaying-html-content-in-windows-phone-7.aspx

The blogger was initially trying to accomplish the same thing as you, placing a browser into a scrollviewer, etc. But found that it didn't work well for larger html pages, they went with a different solution to disable scrolling and zooming in the browser control. Hope this can help:

This worked fine until dealing with longer bodies of content; when the height of the WebBrowser control was set to more than 1800px the the application would crash. As it turned out, there’s a much easier way to achieve the same effect.

Instead of disabling hit testing on the WebBrowser control (and then embedding it in a ScrollViewer to re-enabled the scrolling experience), it’s possible to set meta tags in the HTML to declare that the user should not be able to zoom the content.

or

These meta tags set the width of the viewport to 320px (to avoid horizontal scrolling) and specify that the user should not be able to scale the viewport. Add these meta tags to the HTML injected into the WebBrowser control and the desired behaviour is achieved.

Answer 2

To get the height from the webview, you can use

window.external.notify("rendered_height=document.getElementById('yourId').offsetHeight")

in body.onload and body.onresize

Here is a complete example of an AdaptativeWebview that handle scroll and resize