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

后端未结

关注

 3  1360

失恋的感觉

Problem

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

相关标签:

3条回答

猫巷女王i

2021-01-01 15:19

Have you try setting the Height property of WebView to Auto?

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

0 讨论(0)

再見小時候

2021-01-01 15:36

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.

0 讨论(0)

逝去的感伤

2021-01-01 15:42
I checked it out and tried a few things, but couldn't make it work the way you want it. It might be easier to come up with a different design. Basically, something that does not include an outer ScrollViewer.
- One option (which might be a bit hacky, haven't tested it) is to inject your content into the page, through some JS, and use only a WebView.
- If your content is small, you could just leave it on the top of the page, remove the ScrollViewer and let the WebView handle everything. The WebView will be smaller, but it will work just fine.
These are just some examples of different designs. If you tell me why they wouldn't work, or if you give me more info about your actual problem, I might be able to come up with something more appropriate.
0 讨论(0)
发布评论:

提交评论
- 加载中...