Using Chromium Web Browser Control in WPF app

WebBroswer control in WPF by default uses IE 7 engine for rendering webpages. This may become an issue while displaying modern websites. There are two alternatives. One is to use browser emulation feature to use a different IE version browser instead of IE 7. How that can be done is explained in this post.

Using Browser Emulation for Web Browser control in WPF app

The other way is to use V8 engine(Chromium) used by Google Chrome. There are various libraries that let you use Chromium browser in your WPF project. We will be using the CefSharp library. You can read more about the various options available for using Chromium engine in WPF app.

CefSharp is a C# import for Cef framework. It is available as a Nuget package too.

Step 1: Install the CefSharp library

Install the CefSharp library using nuget. Here’s the link to the Nuget package.
https://www.nuget.org/packages/CefSharp.Wpf

You could refer to this article if you need assistance in adding a Nuget package to your project in Visual Studio.

Initialize the Cef browser in App.xaml.cs

You need to initialize the browser with some default settings. Here’s the code that you need to add in your project’s App.xaml.cs. This is required because of a known issue (#1634) that makes the screen flicker after the page is loaded.

public App()
{  
    //Perform dependency check to make sure all relevant resources are in our output directory.
    var settings = new CefSettings();
    settings.EnableInternalPdfViewerOffScreen();
    // Disable GPU in WPF and Offscreen examples until #1634 has been resolved
    settings.CefCommandLineArgs.Add("disable-gpu", "1");
    settings.CachePath = "cache";
    
    Cef.Initialize(settings, shutdownOnProcessExit: true, performDependencyCheck: true);
}

Add a reference to CefSharp in MainPage.xaml

Add a reference in MainPage.xaml before you could use it.

xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"

Add the Chromium Web Browser control in your page

Now you can add the web browser control in your page. Here’s the code that is required.

<cefSharp:ChromiumWebBrowser
        x:Name="ChromiumWebBrowser"
        Address="http://www.google.com" />

That’s it you are done. Try deploying the app to see if it works.

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

  • nzmike

    When I add this code the property ‘EnableInternalPdfViewerOffScreen()’ is not available and the line

    Cef.Initialize(settings, shutdownOnProcessExit: true, performDependencyCheck: true);

    does not work in anyway – shutdownOnProcessExit and performDependencyCheck just flag errors.

    This is with CefSharp 53.01 in a WPF app using Visual Stud 2015… you might want to update this post.

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close