Some instructions on how to incorporate the Gecko (Firefox) web browser, which is WinForms-based, for use within your WPF / XAML based C# project.
A similar post can be found here, whereby I use the MVVM-based approach:
https://www.technical-recipes.com/2017/using-the-gecko-browser-using-mvvm
Step 1: Create a new WPF project
Step 2: Install Gecko via NuGet
In my example I install the Windows 32-bit version.
Select Tools > NuGet Package Manager > Package Manager Console
Run the following command:
Install-Package Geckofx45
Step 3: Add any other essential references
Right click your project folder and select Add References.
(Make sure that System.Windows.Forms is already installed.)
Select WindowsFormsIntegration as the reference to add:
Step 4: Set the configuration to 32 bit
As shown in the Configuration Manager screenshot below:
Step 5: Update the main View
In this example the
<Window x:Class="GeckoWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:GeckoWpf"
mc:Ignorable="d"
Title="GeckoBrowser"
Height="400" Width="600">
<Grid
Name="GridWeb"
Loaded="Window_Loaded">
</Grid>
</Window>
Step 6: Modify the MainWindow view class
MainWindow.xaml.cs
using Gecko;
using System.Windows;
using System.Windows.Forms.Integration;
namespace GeckoWpf
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Gecko.Xpcom.Initialize("Firefox");
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
WindowsFormsHost host = new WindowsFormsHost();
GeckoWebBrowser browser = new GeckoWebBrowser();
host.Child = browser;
GridWeb.Children.Add(host);
browser.Navigate("http://www.google.com");
}
}
}
Step 7: Try it
The Gecko browser embedded into your XAML code should navigate to the Google home page on loading as shown:
Capturing ‘DocumentCompleted’ events
To capture the event that fires when the document has completed, just modify MainWindow.xaml.cs as follows:
MainWindow.xaml.cs
using System.Windows;
using System.Windows.Forms.Integration;
using Gecko;
using Gecko.Events;
namespace GeckoWpf
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Xpcom.Initialize("Firefox");
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
var host = new WindowsFormsHost();
var browser = new GeckoWebBrowser();
browser.DocumentCompleted += OnDocumentCompleted;
host.Child = browser;
GridWeb.Children.Add(host);
browser.Navigate("http://www.google.com");
}
private void OnDocumentCompleted(object sender, GeckoDocumentCompletedEventArgs e)
{
// Do your 'on doc completed' stuff in here...
}
}
}
Comments
8 responses to “Using the Gecko web browser in WPF”
Great Tutorial. But How Can I get the gecko browser document complete event ?
Hi Taki not heard of that yet give me a day or two to look at it.
Thanks for your reply. In windowsform application, we can access Gecko DocumentCompleted event easily. But I’m new in WPF. Actually, I don’t know how to handle Gecko browser DocumentCompleted events in WPF Application.
Your effort is Appreciated.
Modify the code as follows, stick a breakpoint in or add code to the bit that catches the document completed events:
public MainWindow()
{
InitializeComponent();
Xpcom.Initialize(“Firefox”);
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
var host = new WindowsFormsHost();
var browser = new GeckoWebBrowser();
browser.DocumentCompleted += OnDocumentCompleted;
host.Child = browser;
GridWeb.Children.Add(host);
browser.Navigate(“http://www.google.com”);
}
private void OnDocumentCompleted(object sender, GeckoDocumentCompletedEventArgs e)
{
// Do your ‘On document completed’ stuff in here…
}
Many, many thanks for this – I just tried your instructions above and it works perfectly 🙂
I have been looking for a replacement for the old IE 7 based WebBrowser control in WPF and just haven’t been able to find one that works like I need it to (or works at all!!)…. from early appearances it looks Gecko could be the one!
Now I just need to work out to execute Javascript commands to fill in fields (and submit it) on a login form that I am loading the Gecko instance – however I’m sure I can find that out pretty easily with my old pal google (who found this very page for me).
Hi Mike many thanks for your comments, it’s always good to get feedback. Gecko is a good browser, but personally these days my preference is for the Google Chromium browser.
Some other related posts:
https://www.technical-recipes.com/2016/using-the-cefsharp-chromium-web-browser-in-wpf-xaml/
https://www.technical-recipes.com/2018/enabling-vertical-scrolling-of-html-in-the-chromium-web-browser-control/
https://www.technical-recipes.com/2017/using-the-gecko-browser-using-mvvm/
Hey Andy, it’s interesting that you choose CefSharp – I tried it a 2 or 3 years back and gave up on it as it was pretty buggy and just never considered it again – so maybe I need to review that decision.
In the meantime I got Gecko working perfectly – to date it’s the only browser control I have gotten to log into two different and quite tricky https login forms in my app. I tried Awesomium (which I use very successfully in other projects) as well as the WebView from the new WPF Toolkit but both had different issues and neither managed to get both website logins submitted.
Good Stuff, Thanks!“`