Using CEF Sharp WPF in Visual Studio Express – Tutorial: First page

I had a few problems trying to find details on how to get started with the CEF sharp project. For those who don’t know CEF is the Chrome Embedded Framework and can be used as an alternative web view control in desktop applications. What this means practically is that as .NET developer you can drop a web view control onto a desktop app (for example) and have it render in a Webkit based view rather than an IE one (if you don’t know why this would be a good thing then this tutorial is probably not for you).

This tutorials is largely copied from the tutorial here, with two notable exceptions: 1) it will be in C# and not VB and 2) It will be done in Visual Studio Express. This means that you can, for free, achieve the current results and get an application wrapper for your site (or whatever you want to do with it). It’s basically the tutorial that I wanted to have when I went looking.

This tutorial assumes you have Visual Studio Express already installed. The project itself is hosted on GitHub at https://github.com/cefsharp/CefSharp.

 

STEP 1:

Download the CEFSharp Binaries by clicking here. Save this .zip file to a location you will remember. Then extract the contents to somewhere that you will also remember.

STEP 2:

Fire up Visual Studio 2010 Express (with .NET 4.0 installed) and create a new WPF Application project.

STEP 3:

Right click and Add Reference to your project. Select the following files which were downloaded and extracted in STEP 1:

CefSharp.Wpf.dll
CefSharp.dll

and copy these files into the “Debug” and “Release” folders for your project. Found in <Project_root>/bin/Debug and <Project_root>/bin/Release:

icudt.dll
libcef.dll
STEP 4:
Give the grid in the WPF project a name like so:
Giving a WPF project grid a name

Giving a WPF project grid a name

STEP 5:
Go to the code behind the xaml and add a using statment at the top of the project to add the CEF Sharp binding:
add_using_wpfFinally insert the following code*1 in the MainWindow() constructor below the call to InitializeComponent():
wpf_code_block
Then simply hit compile and watch Google flash up before your very eyes. If you have any problems then let me know in the comments.

*1 – Here is a copy paste version of the code:

CefSharp.Settings settings = new CefSharp.Settings();
settings.PackLoadingDisabled = true;
if (CEF.Initialize(settings))
{
CefSharp.Wpf.WebView webView = new CefSharp.Wpf.WebView();
main_grid.Children.Add(webView);
webView.Address = “http://www.google.co.uk”;
}

TROUBLESHOOTING
The project should have an x86 build target
A big thank you to Henrik H. Svendsen in the comments for this one. If you get the following error:
{“Could not load file or assembly ‘CefSharp, Version=1.25.5.0, Culture=neutral, PublicKeyToken=40c4b6fc221f4138′ or one of its dependencies. An attempt was made to load a program with an incorrect format.”}
Then you may need to go to Project -> Preferences -> Build, and change ‘Platform target’ to x86.
Posted in CEFSharp, Software
16 comments on “Using CEF Sharp WPF in Visual Studio Express – Tutorial: First page
  1. Dave says:

    Hi Phil,

    Thanks this is useful. I’m wondering however how to get the Webview declared via xaml?

  2. satish says:

    Thanks buddy

  3. dada says:

    ‘The invocation of the constructor on type ‘WebBrowser.MainWindow’ that matches the specified binding constraints threw an exception.’ Line number ‘3’ and line position ‘9’.

    • Phil Jeffes says:

      Hi dada,

      Can you post the code that produced this error please – I’ve looked through and I can’t find the line this error refers to.

      • Vishal Shah says:

        I’m getting the exact same error shown there as well. It occurs when I copy the exact same code given above after the InitializeComponent(). I’ve followed all the above instructions and using Visual Studio 2010.

        • Phil Jeffes says:

          I’ve just run the through the whole tutorial with VS 2010 Express and it works fine. I’m afraid without a full copy of Visual Studio (which I don’t have access to) or the exact code that you have, I won’t be able to reproduce this. The only thing I can think that is failing is the XAML – below are the full contents my XAML file:

          Copy of code from XAML file

          Let me know how you get on.

    • Scott Ralph says:

      I am getting this problem as well. It is a spurious claim of a XML parsing issue, but if you look at the “details” of the inner exception, it is likely (at least in my case), a DLL dependency issue

      {“Could not load file or assembly ‘CefSharp, Version=1.25.5.0, Culture=neutral, PublicKeyToken=40c4b6fc221f4138’ or one of its dependencies. An attempt was made to load a program with an incorrect format.”}

      I have not been able to solve this, and have run across the issue with
      http://www.dylansweb.com/?p=181

      examples as well

      • Phil Jeffes says:

        That’s a good link btw, thanks 🙂 Could this be an issue with x64 and x86 perhaps. Are you running 64-bit or 32-bit? It seems odd that you wouldn’t be able to load the assembly if it is in the correct ‘Debug’ and ‘Release’ folders.

        I’m not really sure how to debug this issue as (and I know how frustrating it is to say) it works on my machine. If you could let me know the version of Visual Studio you are using this would be helpful as it would give me a good place to start. Sorry I can’t be of more help otherwise.

  4. sebcbien says:

    same error as reported above… missing dependencies…
    tried with:
    cefsharp binaries 1.25.7 (copied to my debug and release dir)
    visual studio express 2010
    windows 7 sp1 x64

  5. Henrik H. Svendsen says:

    I aswell got the exception with message:

    {“Could not load file or assembly ‘CefSharp, Version=1.25.5.0, Culture=neutral, PublicKeyToken=40c4b6fc221f4138′ or one of its dependencies. An attempt was made to load a program with an incorrect format.”}

    Go to Project -> Preferences -> Build, and change ‘Platform target’ to x86, it solved my problem at least.

    • Phil Jeffes says:

      @Henrik – Thanks, that clears that up. I’m building on a 32-bit machine so this would never have been an issue I think as I suspect it would default to x86. I shall update the instructions accordingly. Chrome (and Webkit on which it is built) is currently 32-bit I believe, although an x64 version is due soon, so it would not surprise me that CEF is also 32-bit only.

  6. snjay says:

    need to download files to my system using cef…how should i do…please suggest me..

    • Phil Jeffes says:

      Can you expand a little on what you mean. Do you mean you need to be able to download the files for CEF or that you want to download files within an application that uses CEF. If you are looking for the download of the CEF files please look here: https://code.google.com/p/chromiumembedded/wiki/Downloads

      If you are just looking to download files within CEF, I’ve not tried it but simply putting a link to a file should automatically start the download process as in any web browser. If you need your application to download some other files then please refer to C# tutorials for this information.

Leave a Reply

Phil's Tweets