Awesomium WebControl WPF seems to misinterpret Scaling - wpf

Question

I'm trying to build a simple prototype (that use Awesomium 1.7 RC3) that allows a WPF application to display a WebPage, allowing the page to be zoomed in / out. I don't want to preserve the layout, but adapt the layout in the same manner that you can resize the window. It's the same behavior as the zoom feature of Internet Explorer. The logical display area is raised while the actual rendering is zoomed.
For exemple, here is a screenshot of the app with a 100% zoom:
(source: hand-net.com)
The upper slider allows to control the zoom. When I change the zoom to 90% or 110%, here is what I get:
(source: hand-net.com)
And
(source: hand-net.com)
As you can see, the browser rendering is messy. Not only the internal rendering does not match the WebBrowser control area, but the picture resizing has a very low quality.
All of this were properly working with Awesomium 1.6.6.
How can I get the desired result?
The sample application can be downloaded here. The key parts are :
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&z=m" />
</Grid>
</Grid>
ViewModel that is used as 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

That looks similar to a problem I had with a previous version of the control where text was rendered in an unreadable way. The solution (for me) was to set RenderOptions.BitmapScalingMode to NearestNeighbor in my XAML. The answer I got from Awesomium indicated that this was a known issue that they were developing several strategies for, while I haven't noticed the problem since then it may well have reoccurred.
Check the question Issue with blurry text and see if it solves your issue. This was what my XAML ended up looking like:
<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

I found the solution in my awesomium support forum question, gave by Perikles.
Two steps to solve my issue:
Also apply layout tranform to the 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&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>
Subscribe to the LoadingFrameComplete event to apply rendering transform options after the page is loaded :
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;
}
}