Awesomium WebControl WPF似乎誤解縮放

Question

我試圖建立一個簡單的原型（使用Awesomium 1.7 RC3），允許WPF應用程序顯示一個WebPage，允許頁面放大/縮小。我不想保留佈局，但可以按照調整窗口大小的方式調整佈局。這與Internet Explorer的縮放功能具有相同的行爲。在實際渲染放大時引發邏輯顯示區域。

對於爲例，這裏是應用程序的一個100％的縮放屏幕截圖：

上滑塊允許控制變焦。當我改變變焦到90％或110％，這裏是我得到：

而且

正如你所看到的，瀏覽器渲染亂。不僅內部渲染不匹配WebBrowser控制區域，但圖片大小調整的質量很低。

所有這些都與Awesomium 1.6.6正常合作。

我怎樣才能得到想要的結果？

示例應用程序可以下載here。關鍵的部分是：

的XAML：

<Slider Value="{Binding Path=Zoom, Mode=TwoWay}" 
      IsSnapToTickEnabled="True" 
      TickPlacement="Both" 
      Grid.ColumnSpan="2" 
      Minimum="0.1" 
      Maximum="2.0" 
      TickFrequency="0.1" 
      LargeChange="0.1" /> 

    <Grid x:Name="Container" 
      Background="SaddleBrown" 
      Grid.Row="1" 
      utils:SizeObserver.Observe="true" 
      utils:SizeObserver.ObservedWidth="{Binding ContainerActualWidth, Mode=OneWayToSource}" 
      utils:SizeObserver.ObservedHeight="{Binding ContainerActualHeight, Mode=OneWayToSource}"> 
     <Grid x:Name="Containee" 
       Background="LightBlue" 
       RenderTransformOrigin="0,0" 
       Width="{Binding ContaineeWidth, Mode=OneWay}" 
       Height="{Binding ContaineeHeight, Mode=OneWay}"> 
      <Grid.LayoutTransform> 
       <TransformGroup> 
        <ScaleTransform ScaleX="{Binding Zoom, Mode=OneWay}" 
            ScaleY="{Binding Zoom, Mode=OneWay}" /> 
        <SkewTransform /> 
        <RotateTransform /> 
        <TranslateTransform /> 
       </TransformGroup> 
      </Grid.LayoutTransform> 
      <awe:WebControl Source="http://www.flickr.com/search/?q=strasbourg&amp;z=m" /> 
     </Grid> 
    </Grid> 

視圖模型被用作DataContext的：

public class ViewPortViewModel : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    protected virtual void RaisePropertyChanged(string propertyName) 
    { 
     Debug.WriteLine("Property changes: " + propertyName); 
     if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
    } 

    private double m_Zoom = 1D; 

    public double Zoom 
    { 
     get { return m_Zoom; } 
     set 
     { 
      if (value != m_Zoom) 
      { 
       m_Zoom = value; 
       RaisePropertyChanged("Zoom"); 
       RaisePropertyChanged("ContaineeWidth"); 
       RaisePropertyChanged("ContaineeHeight"); 
      } 
     } 
    } 

    private double m_ContainerActualWidth = 100D; 

    public double ContainerActualWidth 
    { 
     get { return m_ContainerActualWidth; } 
     set 
     { 
      if (value != m_ContainerActualWidth) 
      { 
       m_ContainerActualWidth = value; 
       RaisePropertyChanged("ContainerActualWidth"); 
       RaisePropertyChanged("ContaineeWidth"); 
      } 
     } 
    } 

    private double m_ContainerActualHeight = 100D; 

    public double ContainerActualHeight 
    { 
     get { return m_ContainerActualHeight; } 
     set 
     { 
      if (value != m_ContainerActualHeight) 
      { 
       m_ContainerActualHeight = value; 
       RaisePropertyChanged("ContainerActualHeight"); 
       RaisePropertyChanged("ContaineeHeight"); 
      } 
     } 
    } 

    public double ContaineeWidth 
    { 
     get { return m_ContainerActualWidth/Zoom; } 
    } 

    public double ContaineeHeight 
    { 
     get { return m_ContainerActualHeight/Zoom; } 
    } 

Answer 1

我找到了解決辦法，我awesomium support forum question，給了由帕裏克里斯。

兩個步驟來解決我的問題：

1. 也適用佈局等轉換到三夏：

   <Grid x:Name="Containee" 
       Background="LightBlue" 
       RenderTransformOrigin="0,0" 
       Width="{Binding ContaineeWidth, Mode=OneWay}" 
       Height="{Binding ContaineeHeight, Mode=OneWay}"> 
   <Grid.LayoutTransform> 
       <TransformGroup> 
       <ScaleTransform ScaleX="{Binding Zoom, Mode=OneWay}" 
           ScaleY="{Binding Zoom, Mode=OneWay}" /> 
       </TransformGroup> 
   </Grid.LayoutTransform> 
   <awe:WebControl Source="http://www.flickr.com/search/?q=strasbourg&amp;z=m" 
            LoadingFrameComplete="WebControl_LoadingFrameComplete_1"> 
       <awe:WebControl.LayoutTransform> 
       <ScaleTransform ScaleX="{Binding Zoom, Mode=OneWay}" 
           ScaleY="{Binding Zoom, Mode=OneWay}" /> 
       </awe:WebControl.LayoutTransform> 
   </awe:WebControl> 
   </Grid> 
   

2. 訂閱LoadingFrameComplete事件適用渲染頁面加載後轉換選項：

   private bool renderingOptionsApplied; 
   
   private void WebControl_LoadingFrameComplete_1(object sender, Awesomium.Core.FrameEventArgs e) 
   { 
       if (renderingOptionsApplied) 
        return; 
       var webControl = sender as Awesomium.Windows.Controls.WebControl; 
   
       if ((webControl.Surface != null) && (webControl.Surface is WebViewPresenter)) 
       { 
        RenderOptions.SetBitmapScalingMode(webControl.Surface as WebViewPresenter, BitmapScalingMode.Linear); 
        renderingOptionsApplied = true; 
       } 
   } 
   

Answer 2

看起來類似於一個問題，我與以前的版本，其中的文字是控制以不可讀的方式呈現。解決方案（對我來說）是在我的XAML中將RenderOptions.BitmapScalingMode設置爲NearestNeighbor。我從Awesomium得到的答案表明，這是一個衆所周知的問題，他們正在制定幾種策略，而我從未發現問題，因爲它可能會重新發生。

檢查問題Issue with blurry text並查看它是否可以解決您的問題。這是我的XAML結束了看起來像什麼：

<awe:WebControl x:Name="MyBrowser" 
        Grid.Row="1" 
        Focusable="True" 
        Visibility="Visible" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        SnapsToDevicePixels="True" 

        > 
     <awe:WebControl.Style> 
      <Style> 
       <Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" /> 
      </Style> 
     </awe:WebControl.Style> 
    </awe:WebControl>