Question

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

例如，以下是具有100％缩放的应用程序的屏幕截图：

Zoom 100%

上部滑块可控制变焦。当我将缩放更改为90％或110％时，我得到的是：

Zoom 90%

并且

Zoom 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的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

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

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

还将布局转换应用于webcontrol：

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

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

Awesomium WebControl WPF似乎误解了Scaling

2 个答案: