WPF: A True WPF Browser Control That Can Bend It Like Beckham

A while ago, I wanted to use the new .NET 3.5 SP1 WebBrowser control in a small demo WPF app that I was using to display streamed YouTube videos. And guess what, I was way disappointed the supposedly new rad control was a con and it was actually no better than using a WPF Frame object or even hosting the WinForms WebBrowser control. The reason being that all of these internally are HWnd (therefore different graphics rendering pipeline) controls.

So no matter what you do, they will always be square and appear on top of WPF content, which sucks really.

Luckily, some clever fellas out there didn’t like this either and came up with some cool C++ DLL called Awesomium which you can get over at http://princeofcode.com/awesomium.php#download.

And then to top that off, Chris Cavanagh (Physics genius) wrapped it to make it WPF like. He calls this:

WPF 3D Chromium Browser

Which you can find over at Chris Cavanaghs site using this URL:

• http://chriscavanagh.wordpress.com/2009/08/27/wpf-3d-chromium-browser/

Here is a screen shot of it working. You can get a better sample over at Chris’s site.

The entire XAML looks like this:

<Window x:Class="BrowserApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="500" Width="500"
        xmlns:chr="clr-namespace:Cjc.ChromiumBrowser;assembly=Cjc.ChromiumBrowser">

    <Grid>

    <chr:WebBrowser x:Name="browser" IsEnabled="False"
                Width="300" Height="300"
                EnableAsyncRendering="False"
                RenderTransformOrigin="0.5,0.5">
            <chr:WebBrowser.RenderTransform>
                <TransformGroup>
                    <ScaleTransform CenterX="0.5" CenterY="0.5"
                                    ScaleX="0.75" ScaleY="0.75"/>
                    <SkewTransform AngleX="15" AngleY="15"/>
                </TransformGroup>
            </chr:WebBrowser.RenderTransform>

        </chr:WebBrowser>

    </Grid>
</Window>

As usual, here is a small demo app:

• http://sachabarber.net/wp-content/uploads/2009/11/Browser.zip

I should point out that it is Visual Studio 2010 and as such, I had to set the following up in my App.Config to get it to work:

<?xml version="1.0"?>
<configuration>
  <startup useLegacyV2RuntimeActivationPolicy="true">
     <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/>
  </startup>
</configuration>