Embedding Chrome in a WPF VB.NET Application using CEFSharp

Introduction

This tip demonstrates how to embed chrome into a WPF application using VB.NET using CEFSharp.

Background

If you've used the built-in webbrowser in Visual Studio, you've probably noticed a few points of pain:

• The version of IE doesn't carry over to the system running the application. If you run it on a system with IE10, you'll get IE10. If you run it on a system with IE8, you'll get IE8.
• Even if you have IE8, your website will most likely render as IE7 unless you have a meta tag to force IE to render as IE8.
• If you want to use certain HTML or CSS feature that isn't available on IE, then again you'll run into issues.

Fortunately, there are alternatives.

Firefox

• Geckofx - It works well with Windows Forms; however, there currently isn't a WPF implementation. Hopefully, this will change when version 26 comes out and gets its new Metro look. Make sure to go to the BitBucket website which is the new home and not the outdated googlecode website.

Chrome

• Awesomium - This supports Chrome in WPF but it looks like it is still using version 18 of Chrome - current version of Chrome is 29
• CEFSharp - This supports Chrome (version 25) in WPF but is currently only the CEF1 version which is single threaded. However, it looks like there is now an alpha version of a CEF3 (multi-threaded) implementation.
• Xilium - I haven't tried this one yet but it seems to support many OSs and have a CEF3 version. If I do, I'll be sure to write another article.

It took me a while to get things working, so I wanted to put together something that might help other people get up to speed quicker. The CEFSharp googlegroup was very helpful. Currently, there are no Nuget or PM project files.

Using the Code

1. Let's open up Visual Studio and start a new .NET 4.5 WPF application:

   

2. Once created, save the project so we start to add some files.
3. Now we need to download and extract the files from https://github.com/cefsharp/CefSharp.
   
   CEFSharp was recently upgraded to support .NET 4.0, so make sure you download CEFSharp 1.25.4 and NOT version 1.25.0 which only supports .NET 2.0.
4. In Visual Studio, right click on the project in the Solution Explorer and select "Add Reference."

   
   Browse to the extracted CEFSharp folder and reference CefSharp.Wpf.dll and CefSharp.dll in the Release folder.

5. We also need to copy icudt.dll and libcef.dll from the CEFSharp folder to our Debug folder.
6. In your MainWindow.xaml, give your grid a name:

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid Name="grid1">
        
    </Grid>
</Window>   

7. Right click and select "view code" and add the following in the MainWindow VB:

   Imports CefSharp
   Class MainWindow
    
       Public Sub New()
    
           ' This call is required by the designer.
           InitializeComponent()
    
           ' Add any initialization after the InitializeComponent() call.
           Dim settings As New CefSharp.Settings()
           settings.PackLoadingDisabled = True
           If CEF.Initialize(settings) Then
               Dim web_view As New CefSharp.Wpf.WebView
               grid1.Children.Add(web_view)
               web_view.Address = "http://www.google.com/"
    
           End If
    
       End Sub
   End Class

   After the initializecomponent is called, which builds the XAML controls, we create and initialize the Chrome settings. Once done, we can create our web browser and add it to the grid. Using the Address property, we can have it browse to a website.

If you try and run your application now, you'll probably get the following error:

This is because the application is 32-bit only. We need to right click on the application in the Solution Explorer again and set the Target CPU to x86.

And now it should work!