CODEWITHSUNDEEP
xamlwindows-phone-8.1winrt-xaml
Ganapathy
Ganapathy

Reputation: 4614

WebView inside ScrollViewer with XAML element header

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.

Upvotes: 8

Views: 943

Answers (2)

Thomas Bouman
Thomas Bouman

Reputation: 608

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.

Upvotes: 0

anand jothi
anand jothi

Reputation: 45

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

Upvotes: 4

Related Questions