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

Leave a Reply