Click here to Skip to main content
12,823,404 members (48,078 online)
Click here to Skip to main content
Add your own
alternative version

Stats

73.7K views
40 bookmarked
Posted 27 Feb 2015

Display HTML in WPF and CefSharp Tutorial Part 1

, , 9 Apr 2015 CPOL
Rate this:
Please Sign up or sign in to vote.
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

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:







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




     
  • Be sure to also align the Project Settings with the Solution

     
  • 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

    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:
<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:

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/

  • 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:

 

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)

Share

About the Authors

Dirk Bahle
Germany Germany
The Windows Presentation Foundation (WPF) and C# are one of my favorite past time hobbies since I started developing Edi:

https://edi.codeplex.com/

and a few other sub-projects on Codeplex. I am normally an algorithms and structure type person but WPF has such interesting sides that I cannot help myself but get into this and MVVM.

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

Alex Maitland
Australia Australia
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionCan this browser control render HTML string/content? Pin
supernorb9-Jan-17 18:24
membersupernorb9-Jan-17 18:24 
AnswerRe: Can this browser control render HTML string/content? Pin
Dirk Bahle12-Jan-17 9:54
memberDirk Bahle12-Jan-17 9:54 
SuggestionResolving ChromiumWebBrowser Doesn't Exist Pin
Member 113920338-Nov-16 9:45
memberMember 113920338-Nov-16 9:45 
GeneralRe: Resolving ChromiumWebBrowser Doesn't Exist Pin
Dirk Bahle9-Nov-16 6:55
memberDirk Bahle9-Nov-16 6:55 
BugWPF cef-name error on build Pin
Jailson Junior19-Oct-16 7:59
memberJailson Junior19-Oct-16 7:59 
GeneralRe: WPF cef-name error on build Pin
Dirk Bahle22-Oct-16 1:23
memberDirk Bahle22-Oct-16 1:23 
GeneralRe: WPF cef-name error on build Pin
Graeme_Grant31-Oct-16 22:00
professionalGraeme_Grant31-Oct-16 22:00 
GeneralRe: WPF cef-name error on build Pin
Dirk Bahle9-Nov-16 6:57
memberDirk Bahle9-Nov-16 6:57 
GeneralRe: WPF cef-name error on build Pin
Graeme_Grant9-Nov-16 20:59
professionalGraeme_Grant9-Nov-16 20:59 
GeneralRe: WPF cef-name error on build Pin
Dirk Bahle10-Nov-16 9:13
memberDirk Bahle10-Nov-16 9:13 
GeneralRe: WPF cef-name error on build Pin
Graeme_Grant10-Nov-16 13:45
professionalGraeme_Grant10-Nov-16 13:45 
GeneralSeems very good, but... Pin
KEL325-Jun-16 11:13
memberKEL325-Jun-16 11:13 
GeneralRe: Seems very good, but... Pin
KEL325-Jun-16 12:05
memberKEL325-Jun-16 12:05 
GeneralRe: Seems very good, but... Pin
Dirk Bahle30-Jun-16 9:45
memberDirk Bahle30-Jun-16 9:45 
QuestionDon't show page when brouser don't have certificate Pin
Gronscij11-Aug-15 23:21
memberGronscij11-Aug-15 23:21 
AnswerRe: Don't show page when brouser don't have certificate Pin
Dirkster9912-Aug-15 7:00
memberDirkster9912-Aug-15 7:00 
QuestionMy vote 5, but ... Pin
jarzeg25-Apr-15 18:22
memberjarzeg25-Apr-15 18:22 
AnswerRe: My vote 5, but ... Pin
Dirkster9926-Apr-15 0:46
memberDirkster9926-Apr-15 0:46 
GeneralRe: My vote 5, but ... Pin
jarzeg26-Apr-15 2:32
memberjarzeg26-Apr-15 2:32 
SuggestionWebBrowser control out of the box Pin
GenjaPower3-Mar-15 0:47
memberGenjaPower3-Mar-15 0:47 
GeneralRe: WebBrowser control out of the box Pin
Carlos Teixeira3-Mar-15 12:16
memberCarlos Teixeira3-Mar-15 12:16 
GeneralRe: WebBrowser control out of the box Pin
Pete O'Hanlon4-Mar-15 8:32
protectorPete O'Hanlon4-Mar-15 8:32 
GeneralRe: WebBrowser control out of the box Pin
rassilon229-Apr-15 5:38
memberrassilon229-Apr-15 5:38 
GeneralRe: WebBrowser control out of the box Pin
Moumst4-Mar-15 21:22
memberMoumst4-Mar-15 21:22 
GeneralRe: WebBrowser control out of the box Pin
Dirkster999-Apr-15 7:16
memberDirkster999-Apr-15 7: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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170308.1 | Last Updated 9 Apr 2015
Article Copyright 2015 by Dirk Bahle, Alex Maitland
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid