Using the Gecko Web Browser in a C# Winforms Project

Some particularly useful links:

http://stackoverflow.com/questions/8778320/how-to-use-gecko-in-c-sharp
https://xinyustudio.wordpress.com/2015/07/04/embedding-web-browsers-in-winform-applications/#more-3695

See this link if you’re interested in using Gecko in a WPF project:

http://www.technical-recipes.com/2017/using-the-gecko-web-browser-in-wpf/

Installing and using the latest GeckoFX-45.0

1. Create a new WinForms application:

gecko45_1

2. Install the GeckoFX package via NuGet

Select Tools > NuGet Package Manager > Package Manager Console

gecko45_2

At the Package Manager Console type ‘install-package geckofx45’:

gecko45_3

3. Insert the Gecko control into your form.

Select View > ToolBox and the new control should now be available:

gecko45_4

If this tool does not appear then right click on the ‘General’ tab of the Toolbox and select ‘Choose items…’. The go to the COM Components tab and select the Browse button and locate and select the Geck winforms-related dll (‘Geckofx-Winforms.dll’) that would have been installed inside the ‘packages’ folder of your Visual Studio project. Then it should appear.
Drag, drop and resize this into your form.

gecko45_5

4. Update the code and run it

using System.Windows.Forms;
using Gecko;
 
namespace GeckoBrowser
{
   public partial class Form1 : Form
   {
      public Form1()
      {
         Initialize Component();
         Xpcom.Initialize("Firefox");
         geckoWebBrowser1.Navigate("www.bbc.com");
      }
   }
}

gecko45_6

Older versions (pre geckofx-45)

Step 1: Create a new Visual Studio project: a Windows Forms Application

gecko1

Step 2: Download and extract pre-requisites

Download the pre-requisites needed to implement the Gecko web browser. You will need GeckoFX AND XULRunner.
At the time of writing, I choose:

GeckoFX-33.0

https://bitbucket.org/geckofx/geckofx-33.0/downloads

Extract the zip file and copy the dll files to the bin/ folder of your Visual Studio project as shown:

gecko2

XULRunner 33.1

https://ftp.mozilla.org/pub/xulrunner/releases/33.0/runtimes/

Extract the zip file and move/copy the entire xulrunner/ sub-folder (it is contained inside the extracted folder) to the bin/ directory as shown:

gecko3

Step 3: Configure References

Add the references to your Visual Studio project. Right-click the References section and select Add Reference…

gecko4

Select the Browse button and locate the 2 x dll files in your Visual Studio project bin/ folder:

gecko5

Click Add and then click OK.

Step 4: Update the Toolbox

Now add the Items to your toolbox. Select View > Toolbox. Right-click underneath the General tab and select Choose Items…

gecko6

Let it finish loading items, if necessary.

Select the Browse button and select the Winforms dll:

gecko7

Click OK on the ‘Choose Toolbox Items’ dialog.

Your Toolbox should now have the ‘GeckoWebBrowser’ tool added:

gecko8

Step 5: Update your WinForms code

Select this GeckoWebBrowser tool and use it to drag-and-drop the tool on to your WinForms control:

gecko9

Right-click on the Form1 dialog and select Properties.

Use the Properties > Events tab to create the event handler for the ‘Load’ event:

gecko10

Go to the Form1.cs file and update the .cs code to handle the ‘Load’ event.

Update Form1 constructor to run Initialise function, setting it with the relative path to the xulrunner sub-folder we installed earlier:

using System;
using System.Windows.Forms;

namespace GeckoExample
{
   public partial class Form1 : Form
   {
      public Form1()
      {
         InitializeComponent();
         Gecko.Xpcom.Initialize(@"..\..\xulrunner");
      }

      private void Form1_Load(object sender, EventArgs e)
      {
         geckoWebBrowser1.Navigate("bbc.com");
      }
   }
}

Step 6: Build, configure and run

Build your project. Notice the following build error I got on my x64 machine:

1>------ Rebuild All started: Project: GeckoExample, Configuration: Debug Any CPU ------
1>C:\Program Files (x86)\MSBuild\12.0\bin\Microsoft.Common.CurrentVersion.targets(1697,5): warning MSB3270: There was a mismatch between the processor architecture of the project being built "MSIL" and the processor architecture of the reference "Geckofx-Core", "x86". This mismatch may cause runtime failures. Please consider changing the targeted processor architecture of your project through the Configuration Manager so as to align the processor architectures between your project and references, or take a dependency on references with a processor architecture that matches the targeted processor architecture of your project.
1>  GeckoExample -> E:\CodeSamples\GeckoExample\GeckoExample\bin\Debug\GeckoExample.exe
========== Rebuild All: 1 succeeded, 0 failed, 0 skipped ==========

If you need to deal with this problems then update the Configuration Manager to deal with this mismatch:

gecko11

Setting it as follows:

gecko12

So it becomes:

gecko13

Now rebuild and run your application. It can sometimes take a few moments for the actual web page to materialize. Example output as shown:

gecko14

Latest Comments

  1. Joel Long 5 October 2016
    • Andy 5 October 2016
  2. grosglok 8 May 2017
    • Andy 9 May 2017

Leave a Reply