C# WebBrowser Control Explained

Published May 9, 2024 | By matt

The C# WebBrowser control seamlessly embeds web browsing capabilities into your Windows Forms applications. Use it to:

Display Web Content: Present web pages directly within your application.
Dynamic HTML Reports: Generate and display sophisticated HTML-based reports.
Hybrid Interfaces: Combine the power of web technologies with traditional desktop controls for rich user interfaces.

Understanding the WebBrowser Control

Key Concepts:

HTML Rendering Engine: Leverages the underlying Internet Explorer engine (or Edge in newer systems) to render web pages.
Navigating: Load web pages using the Navigate method.
Progress and Events: Monitor page load progress with events like Navigating, Navigated, and DocumentCompleted.
Customization: Display custom HTML content and inject JavaScript.
Interaction: Set up two-way communication between JavaScript in the web content and your C# code.

Building a Web Browser Application

Step-by-Step Guide

Set up Your Project: Create a new Windows Forms Application project in Visual Studio.
Design the Interface:
- Drag and drop a ToolStrip control, a StatusStrip control, and a WebBrowser control onto your form.
- Add the following to your ToolStrip:
  - Address bar (TextBox)
  - Navigation buttons: Go, Back, Forward, Stop, Reload
- Add a ProgressBar and StatusLabel to the StatusStrip
Web Page Navigation: Implement event handlers:
C#
private void GoButton_Click(object sender, EventArgs e)
{
webBrowser1.Navigate(addressBar.Text);
statusLabel.Text = “Loading…”;
}
// Implement similar handlers for other navigation buttons

Track Progress: Capture loading events:
C#
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
progressBar.Visible = false;
statusLabel.Text = “Web Page Loaded”;
}
// Implement similar logic for Navigating and Navigated events

Custom HTML Content:
C#
string customHTML = @”
<html>
<body>
<h1>My Custom Content</h1>
<button onclick=’window.external.CallCSharpMethod()’>Click Me</button>
</body>
</html>”;

webBrowser1.DocumentText = customHTML; “`

C# and JavaScript Interaction
a. C# to JavaScript:
C#
webBrowser1.Document.InvokeScript(“myJavaScriptFunction”, new object[] { “data from C#” });

b. JavaScript to C#:
C#
// Expose a C# method to the web content
webBrowser1.ObjectForScripting = this;
public void CallCSharpMethod()
{
MessageBox.Show(“This method was called from JavaScript!”);
}

Tips and Considerations

Performance: For complex web rendering, consider using the newer WebView2 control (based on Edge) for better performance and modern web standards support.
Security: Use caution when interacting with external web content or executing untrusted JavaScript. Implement appropriate security measures.
User Experience: Design your UI with the embedded browser in mind. Provide clear navigation and feedback mechanisms.

Example: Creating a Custom Product Catalog

Imagine building a product catalog application where product details are displayed in a WebBrowser control. You could fetch HTML formatted product information from a database or web service and seamlessly display it to the user.

C# WebBrowser Control Explained

Download Your FREE

Dev Stack Starter Guide