Click here to Skip to main content
15,867,488 members
Articles / Desktop Programming / WPF

Display HTML in WPF and CefSharp Tutorial Part 1

,
Rate me:
Please Sign up or sign in to vote.
4.96/5 (28 votes)
9 Apr 2015CPOL4 min read 261.9K   48   25
A basic 101 type tutorial on CefSharp 3 with WPF. You learn how to display HTML in a WPF application.

Introduction

There are not too many choices when it comes to displaying HTML inside of a WPF application without mixing code with COM or other plugin technologies. And there are even less projects when it comes to open source and freedom of usage.

The CefSharp Version 3 project is a very interesting and stable project. Be sure to read the Wiki and FAQ section before getting started or reporting a problem [3].

What I am missing though, is a good tutorial that guides me from simple scenario into the complex world of WPF and MVVM. This series of articles is an attempt at contributing documentation to change this for good.

Prerequisites

This article series requires not much more than Visual Studio Express and in an Internet connection. So, lets start it up and lets create our first WPF solution name Sample1. Please be sure to set the minimum .Net version for the project to be at least .Net 4.5.2.

Lets go to: Visual Studio > File > New Project ... and enter the required parameters

Image 1

to create the project.

Creating a WPF Solution with CefSharp Version 3

We are going to use the release version of CefSharp 3. This version can be found on NuGet:
https://github.com/cefsharp/CefSharp#nuget-packages

But it supports only x64 and x86 apllications. That means CefSharp 3 does not support the Any CPU setting or any other processor architecture. It is therefore, a good idea to copy the default solution settings from Any CPU into the x86 and x64 configurations and remove the Any CPU configuration (before referencing CefSharp 3):

  • Solution (Context Menu) > Configuration Manager
  • Click Active solution platform > New... to create the x86 and x64 settings:

    Image 2

    Image 3

    Image 4

    Click Active solution platform > Edit... to remove the Any CPU configuration (its not supported in CefSharp 3):

    Image 5

    Image 6
     
  • Be sure to also align the Project Settings with the Solution
    Image 7
     
  • Now lets add a reference to the solution via NuGet

    Click Solution (Context Menu) > Enable NuGet Package Restore
    Click Solution (Context Menu) > Manage NuGet Packages for Solution
    Image 8
    Add the CefSharp.WPF library into the solution
     
  • Save All edits and close Visual Studio. You really have to close it completely because the CefSharp reference will otherwise not show up correctly.
     
  • Re-open the CefSharp 3 solution and click build.
    Expectation: The project should build without an error and the References section in the sample project should show the CefSharp.WPF reference.
     
  • Lets open the MainWindow.xaml and lets add a CefSharp browser control into it:
XML
<Window x:Class="Sample1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        Title="MainWindow" Height="550" Width="625">
    <Grid>
        <cefSharp:ChromiumWebBrowser Grid.Row="0"
        Address="https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions" />
  </Grid>
</Window>
  • That is, we have to add the CefSharp name space reference:
    xmlns:cefSharp="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
     
  •  ...and the control itself:
    <cefSharp:ChromiumWebBrowser Grid.Row="0"<br>
    	  Address="https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions" />

     
  • This code instantiates the ChromiomBrowser and points it at the Internet address indicated by the bindable Address property.

     
  • Now build and execute and enjoy. You should see the following window and be able to browse around in it. Be patience on starting it up though - this depends on you Internet speed and whether you use the debug version:

    Image 9

Congratulation :-) You just completed the first steps in series of articles towards building complex browsers into a MVVM compliant WPF architecture.

Using a Preview Version of CefSharp 3

There is also a preview version at MyGet.org for those who are running into problems using the current release version. You can use this preview version to check whether your problem has been reported before and may have already been fixed in the meantime. To do this, open:

  • Tools > NuGet Package Manager > Package Manager Settings
    to setup a new NuGet source: https://www.myget.org/F/cefsharp/

    Image 10
  • Go into the NuGet Package Manager and install the package from MyGet.org

    Now go back into the solution and add a reference to the MyGet package:

    Image 11

 

A Web-browser control can naturally be used to display content retrieved from a web server. But the strength of this control is not limited to displaying content from a web server. It is actually designed to retrieve and display content from virtually any local or remote source. One way of implementing this is shown in the next article of this series: http://www.codeproject.com/Articles/887148/Display-HTML-in-WPF-and-CefSharp-Tutorial-Part.

References

[1] Embedding Chrome in a WPF VB.NET Application using CEFSharp
     http://www.codeproject.com/Tips/648678/Embedding-Chrome-in-a-WPF-VB-NET-Application-using

[2] CefSharp repository on GitHub
     https://github.com/cefsharp/CefSharp
    
[3] CefSharp FAQ
     https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions
    
    CefSharp Wiki
    https://github.com/cefsharp/CefSharp/wiki

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Germany Germany
The Windows Presentation Foundation (WPF) and C# are among my favorites and so I developed Edi

and a few other projects on GitHub. I am normally an algorithms and structure type but WPF has such interesting UI sides that I cannot help myself but get into it.

https://de.linkedin.com/in/dirkbahle

Written By
Australia Australia
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionCan this browser control render HTML string/content? Pin
supernorb9-Jan-17 17:24
supernorb9-Jan-17 17:24 
AnswerRe: Can this browser control render HTML string/content? Pin
Dirk Bahle12-Jan-17 8:54
Dirk Bahle12-Jan-17 8:54 
SuggestionResolving ChromiumWebBrowser Doesn't Exist Pin
Prasanth Louis8-Nov-16 8:45
Prasanth Louis8-Nov-16 8:45 
GeneralRe: Resolving ChromiumWebBrowser Doesn't Exist Pin
Dirk Bahle9-Nov-16 5:55
Dirk Bahle9-Nov-16 5:55 
BugWPF cef-name error on build Pin
Jailson Junior19-Oct-16 6:59
Jailson Junior19-Oct-16 6:59 
GeneralRe: WPF cef-name error on build Pin
Dirk Bahle22-Oct-16 0:23
Dirk Bahle22-Oct-16 0:23 
GeneralRe: WPF cef-name error on build Pin
Graeme_Grant31-Oct-16 21:00
mvaGraeme_Grant31-Oct-16 21:00 
GeneralRe: WPF cef-name error on build Pin
Dirk Bahle9-Nov-16 5:57
Dirk Bahle9-Nov-16 5:57 
GeneralRe: WPF cef-name error on build Pin
Graeme_Grant9-Nov-16 19:59
mvaGraeme_Grant9-Nov-16 19:59 
GeneralRe: WPF cef-name error on build Pin
Dirk Bahle10-Nov-16 8:13
Dirk Bahle10-Nov-16 8:13 
GeneralRe: WPF cef-name error on build Pin
Graeme_Grant10-Nov-16 12:45
mvaGraeme_Grant10-Nov-16 12:45 
GeneralSeems very good, but... Pin
KEL325-Jun-16 10:13
KEL325-Jun-16 10:13 
GeneralRe: Seems very good, but... Pin
KEL325-Jun-16 11:05
KEL325-Jun-16 11:05 
GeneralRe: Seems very good, but... Pin
Dirk Bahle30-Jun-16 8:45
Dirk Bahle30-Jun-16 8:45 
QuestionDon't show page when brouser don't have certificate Pin
Gronscij11-Aug-15 22:21
Gronscij11-Aug-15 22:21 
AnswerRe: Don't show page when brouser don't have certificate Pin
Dirk Bahle12-Aug-15 6:00
Dirk Bahle12-Aug-15 6:00 
QuestionMy vote 5, but ... Pin
jarzeg25-Apr-15 17:22
jarzeg25-Apr-15 17:22 
AnswerRe: My vote 5, but ... Pin
Dirk Bahle25-Apr-15 23:46
Dirk Bahle25-Apr-15 23:46 
GeneralRe: My vote 5, but ... Pin
jarzeg26-Apr-15 1:32
jarzeg26-Apr-15 1:32 
SuggestionWebBrowser control out of the box Pin
Moumst2-Mar-15 23:47
Moumst2-Mar-15 23:47 
GeneralRe: WebBrowser control out of the box Pin
Carlos Teixeira3-Mar-15 11:16
Carlos Teixeira3-Mar-15 11:16 
GeneralRe: WebBrowser control out of the box Pin
Pete O'Hanlon4-Mar-15 7:32
subeditorPete O'Hanlon4-Mar-15 7:32 
GeneralRe: WebBrowser control out of the box Pin
rassilon229-Apr-15 4:38
rassilon229-Apr-15 4:38 
GeneralRe: WebBrowser control out of the box Pin
Moumst4-Mar-15 20:22
Moumst4-Mar-15 20:22 
@Carloss, @Pete
You are totally right, was just to mention its existence due to the article introduction that could suggest nothing exists out of the box.
Moumst

GeneralRe: WebBrowser control out of the box Pin
Dirk Bahle9-Apr-15 6:16
Dirk Bahle9-Apr-15 6:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.