Using Chromium Web Browser Control in WPF app

Datetime:2016-08-23 03:57:50          Topic: WPF           Share

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.

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.





About List