從網頁視圖縮小以適應內容

我想讓我的WebView在內容太寬時自動縮小，無法在沒有滾動條的情況下顯示。從網頁視圖縮小以適應內容

我都包裹着我的WebView在ScrollBar，並設置ZoomFactor基礎上，ScrollViewers ViewPortWidth財產的實際網頁寬度（通過JavaScript計算）劃分。

它幾乎可以正常工作，但在ScrollViewer縮小後，網頁右側的一部分不會顯示出來 - 它看起來像缺少的部分對應於不可見的部分，縮小。這幾乎就像Web頁面縮小時未被重繪一樣。

這裏是我的代碼：

的.xaml

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

的.cs

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(); 

    } 

}

我一直停留在這一段時間，並嘗試各種變體以上所有問題都一樣。

我失去了一些東西明顯？還是有更好的方法來實現我想要做的？

來源

2013-11-14 StanK

我想我已經把它整理好了。 ScrollViewer的HorizontalScrollBarVisibility的默認值爲Disabled。我想如果你不能水平滾動，滾動查看器的內容比ViewPort更寬時，他們會認爲不需要渲染無法查看的內容。

因此，修復到底是容易的，只需要修改的.xaml

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

來源

2013-11-15 00:56:05 StanK

從網頁視圖縮小以適應內容

回答

相關問題