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

17 Nov, 2009  C#, WPF

A while ago I wanted to use the new .NET 3.5 SP1 WebBrowser control is 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 (therefor 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

image

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>

11 Comments so far »

  1. A Real WPF WebBrowser « Chris Cavanagh’s Blog said

    am November 17 2009 @ 9:21 pm

    [...] For more examples, and an important note about VS2010, be sure to check out Sacha Barber’s related post. [...]

  2. WPF 3D Chromium Browser « Chris Cavanagh’s Blog said

    am November 17 2009 @ 9:24 pm

    [...] more examples, and an important note about VS2010, be sure to check out Sacha Barber’s related post Possibly related posts: (automatically generated)WPF Skinning your WebsitesWPF Chromium [...]

  3. Uwe said

    am November 18 2009 @ 7:39 am

    So what I am missing is a control similar to the Windows Forms WebBrowser control but implemented with Chromium.

    As I understand this could be done with Awesomium.

    Right?

  4. sacha said

    am November 18 2009 @ 8:41 am

    Uwe

    The standard WPF .NET 3.5 SP1 WebBrowser or WinForms WebBrower is rendered using the older legacy HWnd based (Paint) methods and is not drwan using the DirectX WPF pipeline. So as a result can not be transformed/scaled/rotated or used on 3d.

    Awesomium is a C++ browser and Chromium wrapped this to allows this to be used in WPF.

    Does that explain it.

  5. Pete said

    am November 18 2009 @ 4:45 pm

    You’re a bit late with this bandwagon.

    Also, check it out with a debug tool, leaks memory

  6. sacha said

    am November 18 2009 @ 5:14 pm

    Fair enough then

  7. sacha said

    am November 18 2009 @ 5:15 pm

    Chris someone just left a note saying this leaks memory on my blog, you may want to check it out.

  8. Chris Cavanagh said

    am November 18 2009 @ 5:26 pm

    Pete – Could you post some more details on the memory leak you’ve seen? Any particular sites, or all sites? Also did you see it with the “WPF Chromium WebBrowser” demo, or the 3D / “YouCube” version? It’s always possible I’ve recently introduced a leak (I made some tweaks recently to help someone out, but didn’t test thoroughly). Any information would be appreciated; thanks :)

    Fyi there’s now another guy contributing to the project on CodePlex; he’ll probably be a better tester than I am :)

  9. Pete said

    am November 19 2009 @ 9:33 pm

    Chris / Sacha:
    The leak was with an earlier version of the Awesomium.dll. I’m led to believe it’s been fixed, I’ve not been able to verify this, not had time.
    In any case there’s another release due of Awesomium.

    Good work Chris, Sacha just love your tube planner.

  10. sacha said

    am November 20 2009 @ 8:43 am

    Pete, that’s great news, I am sure nither I or CHris wants to show leaky code on our blogs.

    Very pleased you like my TubePlanner app, it took a while that one

  11. Pete said

    am November 20 2009 @ 4:24 pm

    Hi Again

    Just had a chat with a friend, who worked with this.
    The Awesomium.dll was release V1.01 that was released start of 2009. I think there have been several other releases since that date.

Comment RSS · TrackBack URI

Leave a comment

Name: (Required)

eMail: (Required)

Website:

Comment: