Awesomium WebControl WPF 似乎误解了缩放

Question

我正在尝试构建一个简单的原型（使用 Awesomium 1.7 RC3），它允许 WPF 应用程序显示网页，允许放大/缩小页面。我不想保留布局，而是以与调整窗口大小相同的方式调整布局。这与 Internet Explorer 的缩放功能相同。实际渲染放大时，逻辑显示区域升高。

例如，这里是应用程序的 100% 缩放屏幕截图：

_{（来源：hand-net.com）}

上方的滑块允许控制缩放。当我将缩放比例更改为 90% 或 110% 时，我得到的是：

_{（来源：hand-net.com）}

和

_{（来源：hand-net.com）}

如您所见，浏览器呈现混乱。不仅内部渲染不匹配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 的 ViewModel：

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

这看起来类似于我在以前版本的控件中遇到的问题，其中文本以不可读的方式呈现。解决方案（对我而言）是在我的 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>

Answer 2

我在 Perikles 提供的 awesomium support forum question 中找到了解决方案。

解决我的问题的两个步骤：

1. 还将布局转换应用于 web 控件：

   <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;
       }
   }