Windows Phone 8.1 - Handle WebView vertical scroll by outer ScrollViewer element

Question

Problem

I have to show a WebView inside a ScrollViewer in Windows Phone 8.1 application, with the following requirements:

WebView height should be adjusted based on its content.
WebView vertical scroll should be handled by an outer ScrollViewer.
WebView should handle horizontal scroll, scale (pinch-zoom), text selection (with the default copy button) and links navigation.

On the picture below is my mocked layout (to the left) and the best example of similar functionality - that would be a built-in mail application (to the right)

My page layout (to the left) and example of similar functionality (to the right)

Sample XAML layout:

<ScrollViewer>
    <Grid Margin="12">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <TextBlock Text="My content" />
        </Grid>
        <WebView Grid.Row="1" x:Name="WebViewComponent"></WebView>
    </Grid>
</ScrollViewer>

What did I try

Measure HTML content and adjusting the WebView height - This part worked and with several adjustments I was able to set the correct height to the WebView element.

Subscribing to a Border element inside a WebView - Did not work. The problem here is that in Windows Phone 8.1 it seems that a WebView component does not have visual children (at least not DependencyObject's)

As well I've tried playing around with ManupulationMode and IsHitTestVisible properties with no success.

UPDATE Added text selection & copy button to required WebView functionality. Somehow missed it in the original question content.

Just out of curiousity, have you tried to just inject some css to disabled the overflow:scroll so that your scrollviewer actually get's to do its job. Something like this? I wish I had more free time at the moment to go play with it, seems like it would be a common issue anyway. — Chris W.
@Chris I did. WebView captures the pointer interactions totally and reacts with something like "compression" scroll (not quite sure if that would be a proper term - the scrolling goes very slow and reverts once finger is released). — danyloid

tdmanutd tdmanutd · Accepted Answer · 2015-06-17T12:08:51

I've been facing this problem, and i got some workaround partially (excluding the text selection).

Basically to be able to use the scrollviewer containing the webview, you need something to be dragged, so I use a rectangle with the height and width same as the webview.

<ScrollViewer Name="ScrollViewer">
    <Grid x:Name="LayoutRoot" Height="Auto">
        <Grid.RowDefinitions>
            <RowDefinition Height="200"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Name="GridHeader">
            <Image Stretch="UniformToFill" Source="ms-appx:///Assets/img_default_header.jpg" />
         </Grid>                
        <Grid Grid.Row="1" x:Name="GridNews" Margin="12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <WebView Margin="-6,12,0,-6" Grid.Row="0" x:Name="WebviewContent" VerticalAlignment="Top" DefaultBackgroundColor="Transparent" /> 
            <Rectangle Margin="0,12,0,0" Height="{Binding Height, ElementName=WebviewContent}" Name="RecWeb" VerticalAlignment="Top" Fill ="#00000000" Tapped="RecWeb_Tapped" />
        </Grid>
        <Grid Name="GridRelatedNews" Grid.Row="2" Margin="12,0">
            <ListView ItemsSource="{Binding NewsDetail.RelatedStory}" ScrollViewer.VerticalScrollBarVisibility="Hidden">  
            </ListView>
        </Grid>
 </ScrollViewer>

Now we need to inject some css and javascript to make the webview height adapting to the content (I found some code example on another stackoverflow thread, forget to track where it comes from)

string htmlFragment = @"
                                    <html>
                                        <head>
                                        <meta name=""viewport"" content=""width="+width+@", initial-scale=1, user-scalable=no"" />
                                            <script type=""text/javascript"">
                                                function loadLink(x,y){
                                                window.external.notify('x='+x+'y='+y);
                                                var el = document.elementFromPoint(x, y);
                                                el.click();};                                                   
                                            </script>
                                        <style>
                                        " + CSS + @"
                                        </style>
                                        </head>
                                        <body onLoad=""window.external.notify('rendered_height='+document.getElementById('content').offsetHeight);"">
                                            <div id='content' style=""font-size:16px; color:#222222;"">" + original +
                                          @"</div>
                                        </body>
                                    </html>";

Then added webview webscript notify event to determine the rendered height of the webview (and rectangle):

void WebviewContent_ScriptNotify(object sender, NotifyEventArgs e)
{
    if (e.Value.Contains("rendered_height"))
    {
        if (valuePair != null && valuePair[0] == "rendered_height")
        {
            double renderedHeight = double.Parse(valuePair[1]);                 
            WebviewContent.Height = renderedHeight;

        }
    }
 }

I manage to allow this solution to be able to click some link in the content using this method (the loadLink javascript method):

private async void RecWeb_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Point p = e.GetPosition(WebviewContent);
        int x = Convert.ToInt32(p.X);
        int y = Convert.ToInt32(p.Y);
        string[] size = { x.ToString(), y.ToString() };
        await WebviewContent.InvokeScriptAsync("loadLink",size);
    }

Maybe you can take it from there to add an event handler for your selecting text problem. The point using this solution is also to find an equivalent event handler in javascript.

Windows Phone 8.1 - Handle WebView vertical scroll by outer ScrollViewer element

Problem

What did I try

3 Answers