Windows store apps 从web视图缩小以适应内容

当内容太宽而无法在没有滚动条的情况下显示时，我试图使我的

WebView

自动缩小

我已将我的

WebView

包装在

ScrollBar

中，并根据ScrollViewers

ViewPortWidth

属性除以实际网页宽度（通过JavaScript计算）设置

ZoomFactor

它几乎可以正常工作，但在ScrollViewer缩小后，网页右侧的一部分将不显示-看起来缺少的部分与未缩小时不可见的部分相对应。这几乎就像网页缩小时没有被重新绘制一样

这是我的密码：

.xaml

.cs

private void contentView\u LoadCompleted（WebView发件人、WebViewDOMContentLoadedEventArgs）
{
//询问内容的宽度
var widthString=ContentView.InvokeScript（“eval”，new[]{”document.body.scrollWidth.toString（）“}）；
整数宽度；
如果（！int.TryParse（宽度字符串，输出宽度））
抛出新异常（string.Format（“failure/width:{0}”，widthString））；
//询问内容的高度
var heightString=ContentView.InvokeScript（“eval”，new[]{”document.body.scrollHeight.toString（）“}）；
内部高度；
如果（！int.TryParse（heightString，out height））
抛出新异常（string.Format（“failure/height:{0}”，heightString））；
如果（WebScrollViewer.ViewportWidth

我已经在这上面停留了一段时间，并且尝试了上面的各种变体，都有相同的问题

---

我错过了什么明显的东西吗？还是有更好的方法来实现我想做的事情？

我想我终于解决了。

ScrollViewer

的

HorizontalScrollBarVisibility

的默认值为

已禁用

。我猜，当您无法水平滚动，并且ScrollViewer的内容比

视口

更宽时，他们认为不需要渲染无法查看的内容

因此，最终修复很容易，只需修改.xaml即可

<Grid>
    <ScrollViewer Name="WebScrollViewer" HorizontalScrollBarVisibility="Visible">
        <WebView x:Name="ContentView" 
                 NavigationFailed="contentView_NavigationFailed" 
                 DOMContentLoaded="contentView_LoadCompleted" 
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top" />
    </ScrollViewer>
</Grid>

 private void contentView_LoadCompleted(WebView sender, WebViewDOMContentLoadedEventArgs args) 
{
    // ask the content its width
    var widthString = ContentView.InvokeScript("eval", new[] { "document.body.scrollWidth.toString()" });
    int width;

    if (!int.TryParse(widthString, out width))
        throw new Exception(string.Format("failure/width:{0}", widthString));

    // ask the content its height
    var heightString = ContentView.InvokeScript("eval", new[] { "document.body.scrollHeight.toString()" });
    int height;
    if (!int.TryParse(heightString, out height))
        throw new Exception(string.Format("failure/height:{0}", heightString));

    if (WebScrollViewer.ViewportWidth < width)
    {

        // resize the webview to the content
        ContentView.Width = width;
        ContentView.Height = height;

        var zoomFactor = WebScrollViewer.ViewportWidth / width;

        WebScrollViewer.ZoomToFactor((float)zoomFactor);
        WebScrollViewer.InvalidateScrollInfo();

    }

}

<Grid>
    <ScrollViewer Name="WebScrollViewer" HorizontalScrollBarVisibility="Visible">
        <WebView x:Name="ContentView" 
                 NavigationFailed="contentView_NavigationFailed" 
                 DOMContentLoaded="contentView_LoadCompleted" 
                 HorizontalAlignment="Left"
                 VerticalAlignment="Top" />
    </ScrollViewer>
</Grid>