UWP Webview inside Scrollerview

Question

I'm developing my first UWP app and I need some help.

I have a Webview inside a Scrollerview in XAML and I'm using the webview NavigateToString() method to load some strings in HTML format. The problem is when I put the Webview inside a Scrollerview, either the Webview itself is not visible or the strings aren't loaded or both.

I can confirm that the NavigateToString() method works fine with my strings because if I put the WebView outside the Scrollerview, I can see them. I've tried to use ScrollableHtmlView but this has some problems with bullets and numbering.

The reason I'm using a Webview inside a ScrollerView is because I wanted to have an Image on top of the WebView and have them scroll together.

Any help would be really appreciated. Thanks.

score 0 · Answer 1 · edited May 23 '17 at 12:06

I tried to reproduce your issue to put a WebView inside a ScrollerView directly as you described like follows but I cannot reproduce:

<ScrollViewer>            
    <WebView Source="http://microsoft.com" x:Name="WebViewControl" ></WebView>  
</ScrollViewer>

But I found I can reproduce your issue with code like follows:

 <StackPanel>
     <Image  Source="Assets/caffe1.jpg"  Stretch="None" ></Image>
     <WebView Source="http://microsoft.com" x:Name="WebViewControl" ></WebView>
 </StackPanel>

For this scenario, I resolved the issue which webview cannot visible by adding the MinHeight property of WebView like follows:

<WebView Source="http://microsoft.com" x:Name="WebViewControl" MinHeight="400"></WebView>

If you try to get the ActualHeight in your scenario after the WebView navigation completed by the following code, you will find the result may be 0, which may be the reason the WebView cannot be visible. Since there is one more controls inside one container and we don't set height for these controls, height will be calculated automatically for each control. The height is set automatically by the content of the control. WebView need time to load content which may lead issues with height calculating.

WebViewControl.NavigationCompleted += WebViewControl_NavigationCompleted; 

private void WebViewControl_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
{
    System.Diagnostics.Debug.WriteLine("Actual height of webview:" + WebViewControl.ActualHeight);
 }

By the way, if you want to set the height depended on the content you can reference this thread.

The setting minHeight helps but it is not the desirable behavior. I want the scrollviewer to scroll the image and webview not the webview scrolling by itself. Also, the javascript to set the webview height doesn't work. — Trancol, Oct 17 '16 at 06:48
@G.Mason if javascript in above thread cannot work, please try [this demo](https://github.com/elvisxia/WebViewDynamicHeightSample). Pay attention this may have some issues work on pad or emulator. Details you can reference [this thread](http://stackoverflow.com/questions/39922210/how-to-resize-webview-height-based-on-html-content-in-windows-10-uwp?noredirect=1#comment67310102_39922210) — Sunteen Wu, Oct 17 '16 at 08:39

UWP Webview inside Scrollerview

1 Answers1