WebView inside ScrollViewer with XAML element header

Question

In WebView I load HTML elements with WP 8.1. Whenever content exceeds the WebView height there is scroll without issues. My problem is that I have XAML elements in the top of the WebView, which have to scroll along with the WebView scroll.

Sourcecode:

<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid VerticalAlignment="Top" >
<StackPanel x:name="xamlelement" Margin="15 20 0 0">
<textblock/>
  -------
  -------
  -------
</StackPanel>
</Grid>
<Grid x:Name="testgrid" Grid.Row="1">
<WebView Margin="0 30 0 0"  x:Name="msgContent" >
</WebView>
</Grid>
</Grid>
</ScrollViewer>

Whenever the WebView element "msgContent" scrolls I want the stackpanel "xamlelement" to scroll along with the WebView.

You could inject into the WebView to turn off the overflow handling that enables its scrolling so that the ScrollViewer handles all the scrolling instead. The way you have it now I'm guessing it's actually a scroll within a scroll right? — Chris W., Apr 30 '15 at 14:58

score 4 · Answer 1 · edited May 08 '15 at 09:25

4

The problem here is we can disable webview scroll by this 2 steps

1 ) setting overhidden to html content loaded to the webview

2) setting height of webview equal to the html content loaded in it.

But then when we try to move in webview,the evnets are not passed to the parent scrollviewer element

edited May 08 '15 at 09:25

Imran Ali Khan

8,469
16
52
77

answered May 08 '15 at 09:16

anand jothi

45
1
5

Is any way to find the height of the html content loaded [ IN case of html responsive web pages'] – Sebastian Aug 13 '15 at 06:58
Add a listener to scriptnotify in webview and add listener to resize event in html page and send the height of document from scipt to scriptnotify in c# code – anand jothi Aug 14 '15 at 07:09

score 0 · Answer 2 · answered May 12 '15 at 13:45

WebView provides InvokeScript method, which executes the specified script function from the currently loaded HTML, with specific arguments. When WebView's LoadCompleted event occurs, I am invoking that JavaScript which disables the scrolling. Check out whole code given below.

string DisableScrollingJs = @"function RemoveScrolling()
                          {
                              var styleElement = document.createElement('style');
                              var styleText = 'body, html { overflow: hidden; }'
                              var headElements = document.getElementsByTagName('head');
                              styleElement.type = 'text/css';
                              if (headElements.length == 1)
                              {
                                  headElements[0].appendChild(styleElement);
                              }
                              else if (document.head)
                              {
                                  document.head.appendChild(styleElement);
                              }
                              if (styleElement.styleSheet)
                              {
                                  styleElement.styleSheet.cssText = styleText;
                              }
                          }";

void webView_LoadCompleted(object sender, NavigationEventArgs e)
{
  webView.InvokeScript("eval", new[] { DisableScrollingJs });
}

From codeproject.

WebView inside ScrollViewer with XAML element header

2 Answers2