CEFSharp is a really great web browser control for WPF, and especially considering how few choices there are for a web browser in your project, it would be a shame if someone wanted to use it and could not. Not that it isn’t really easy, but it can be very frustrating when a seemingly simple thing turns into a three hour hair-pulling session because of…you don’t know what. Usually, when this happens, we turn to the web, looking for someone who has asked a question that is pertinent to whatever is blocking our progress, or perhaps demonstrated what we could not do. This post is for anyone who is having trouble getting started using CEFSharp in a WPF project…perhaps it will help someone.

When at first I took the source of CEFSharp down from GitHub, copied it to my dev machine, it immediately built successfully. I had entirely missed out on having any red-squigglies to eat, and was totally robbed of any pretty little red build-error icons to trip over in my Error List panel. Thankfully, my sense of adventure, streaked with a wide stripe of cynycism, was finally rewarded with runtime errors when I ran the WPF sample! Phew!

Here is exactly the steps I took to get started using CEFSharp.WPF in my project.

First, to be clear, some basic parameters:

• Visual Studio 2012 Professional
• Windows 7 Home Premium
• CEFSharp source code, not the binaries, from Github (Per Lundberg)

First of all, I did try the binaries first, but when I encountered a runtime error, I went right back to GitHub to fetch the source, and went from there. Here’s what I got when I decompressed the source package from GitHub:Here’s what the solution looked like once opened:…and…Build Succeeded! Nice.

The ‘CEFSharp’ project was set as the ‘Startup’ project in the solution, so I set the CefSharp.Wpf.Example project as the ‘Startup’ project, and hit the ‘Run’ button on visual studio, which gave me this:

Finally..! A challenge! Sort-of 🙂

So after rebuilding the solution a few times and running the other projects in the solution only to receive the same message, I inspected the ‘bin’ folder of the built projects, and saw that in the case of the WPF example project, no debug directory was being created when I built the project! It was starting to look like a hair-pulling session was the order of the day.

Then I noticed…in my frantic search for a ‘bin\debug’ folder that ought to have been there after building the solution, the folder in the root directory: ‘Debug’, and there was also a: ‘Release’ folder. Take a look at the directory-structure image I posted above, you will see them there.The ‘Release’ folder:

The ‘Debug’ folder:

Here then, is where the hair-pulling session-which-ends-in-giving-up was avoided. First I thought, ok, here are some already-built binaries in the ‘Debug’ folder, at least I can run one of these and have a look at what I’m supposed to see…but I got this upon dbl-clicking the CefSharp.Wpf.Example.exe:

Oh well…it almost was easy! 🙂 Ok…well, it was still easy…

My next tactic was to combine the files from both the ‘Debug’ folder and the ‘Release’ folder. I created a new folder, copied the files from both debug and release folders into it, and then tried running the EXE again. Why did I do this you ask?  Good question. Where did it get me? Success!

So this gave me a clue: The solution was building everything to the ‘Debug’ folder in the root directory (which was unexpected), and for some reason, I needed to know that the files from the ‘Release’ folder, had to be copied to any directory where I wanted to run an EXE that uses CefSharp. That then, without wondering about it any further, is just what I did.

I created a new WPF desktop application as a test, added direct references to the CefSharp & CefSharp.Wpf DLL’s, and then copied those files from the ‘Release’ directory to the ‘bin\debug\’ directory of the project, and that’s all that was needed to get things going.

Now…it was time to start seeing what I could do with this control, how it could be bent to my will so-to-speak 🙂 This meant running the actual sample projects included in the solution from GitHub and debugging through them to see what’s what. First step was of course, copying those files from the ‘Release’ folder, into the ‘Debug’ folder, and then I went on a breakpoint-setting bonanza, and ran the project. After doing that, the ‘Debug’ folder in the root of the solution looked like this:

Now that I was debugging through the example project, my first goal was to isolate the place in the source where I could listen, and ‘watch’ for things like ‘Loading’ & ‘Loaded’, etc. I found it here, at line 92 of the CefSharp.Example.ExamplePresenter.cs file:

Incidentally, let me say this, first thing I noticed was: Per Lundberg’s WPF/C# code is impeccable! This switch statement was giving me the ‘hook’ I was looking for. I wanted to present a progress indicator whenever a page was loading, and for that I found I needed to ‘listen’ to the property: Loading. you can see it highlighted in the switch statement above.

Now that I had this…I was unstoppable! A fast & furious coding/prototyping session followed, and soon I had the makings of a great wrapper of this great wrapper!

Hopefully you’ve been able to glean enough intel from the post to get things going for yourself. If not, feel free to post a comment and ask a question, I’d be happy to try to help someone else out who is having trouble. Perhaps in a future post I will show a working example of my own with full source code for all to see. For now though, time to go back to playing with my favorite new toy: CefSharp! Thanks again Per Lunberg!