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

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Advertisements

21 thoughts on “WPF : A True WPF Browser Control That Can Bend It Like Beckham

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

  2. […] 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 says:

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

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

    You’re a bit late with this bandwagon.

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

  6. 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 🙂

  7. Pete says:

    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.

  8. sacha says:

    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

  9. Pete says:

    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.

  10. robert_d says:

    Why can’t I input any text in web pages displayed in your demo app?
    I set

  11. robert_d says:

    Why can’t I input any text in web pages displayed in your demo app?
    I set chr:WebBrowser IsEnabled=”True” Focusable=”True”

  12. Haha I’m really the only reply to this incredible writing.

  13. David says:

    I tried to load another html page and nothing shows up. Is there something that needs to be known about what html will work or not?

  14. Tony says:

    Sacha, do you have any tips on using awesomium to access dynamic http? We’d like to use it at work, but it can’t load the one page we need (it’s on an internal page, so I can’t share it with anyone, but it’s all dynamic HTML). I created a simple xaml window and put a WebControl in there. I pointed the Source to our page, and… nothing. It opens fine in Chrome, but nothing shows up in Awesomium. I tried all of the samples, and none of them worked, except for the one on this page.

    It looks like a great product, and we’d like to use this in our shop, but I can’t get past square one. I should warn you that I’m a C# guy with no web experience whatsoever, so I might be doing something glaringly stupid, but, as I said, I can point Chrome to the link, and it fires right up. Ditto for FF, etc. If I open any of the sample browsers/WebControls, nothing.

    Thanks!

    Tony

    • sachabarber says:

      Tony sorry for long delay in coming back, unfortunately only things I know about awesomium is what is shown in that article. I did not dig too much deeper, Chris Cunningham may be good person to ask, he wrote wrapper for awesomium.

  15. volo says:

    Hi,

    How to add Chromium/Awesomium to a Microsoft Surface WPF project ?
    Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: