WebView2 UserData2 Demo - UserControl Wrapping WebView2

Overview

Demonstrates how to wrap cWebView2Host in a VB6 UserControl, creating a reusable "Edge Browser Control" that can be dragged directly from the toolbox onto a form.

Project Structure

Download Source [ Note: Re-register the DLL file in the bin directory ]

Source code is available in the VBMAN2 project's demos/webview2/userData2 directory.

userData2/
  ├── Form1.frm              # Main form, using Edge control array
  ├── Edge.ctl               # Custom UserControl, wrapping cWebView2Host
  ├── Edge.ctx               # UserControl toolbox icon
  ├── vbman2_webview2.vbp    # VB6 project file (includes UserControl=Edge.ctl)
  └── vbman2_webview2.vbw    # VB6 workspace file

Core Code Walkthrough

1. Edge UserControl Wrapper (Edge.ctl)

Public WithEvents wv As cWebView2Host

Public Event TitleChange()

Const BASE_URL As String = "https://douyin.com"

Private Sub UserControl_Initialize()
    Set wv = New cWebView2Host
End Sub

Private Sub wv_Create()
    ' Configure user data directory
    wv.EnvironmentOptions.UserDataFolder = App.Path & "\UserDir\account"
End Sub

Private Sub wv_DocumentTitleChanged()
    ' Forward event to UserControl consumer
    RaiseEvent TitleChange
End Sub

Wrapping Key Points:

• Public WithEvents wv — Exposes cWebView2Host as the control's public property
• RaiseEvent TitleChange — Forwards WebView2 events as UserControl custom events
• UserControl_Initialize creates the WebView2 instance

2. Main Form Usage (Form1.frm)

' Edge1 control array, index 0 placed at design time
' Can dynamically add more instances via Load Edge1(1), Load Edge1(2)

The form has a Frame container, ListBox, add/remove buttons, and an Edge1 control array (index 0).

Feature Description

1. UserControl Wrapping Pattern

   • Wraps cWebView2Host in a custom UserControl
   • Control can be dragged from VB6 toolbox directly onto forms
   • Hides WebView2 initialization complexity

2. Event Forwarding

   • UserControl internally receives cWebView2Host events
   • Forwards to external consumers via RaiseEvent
   • Consumers only need to handle UserControl-level events

3. Control Array Support

   • Edge1(0) created at design time
   • More instances can be dynamically created via Load Edge1(n)
   • Each control array element has an independent cWebView2Host instance

4. UserDataFolder Configuration

   • Set in the wv_Create event
   • Supports different data directories for multiple instances

Technical Notes

1. Public WithEvents wv: Using Public WithEvents in a UserControl allows external code to directly access the full cWebView2Host API via Edge1(0).wv

2. UserControl_Initialize: The control automatically creates a cWebView2Host instance on initialization, no external calls needed

3. Control Array Dynamic Addition: VB6's Load statement creates new elements in a control array, each running independently

4. UserControl_Resize: Can call wv.Resize() in the UserControl's Resize event to automatically adapt to control size

Use Cases

1. Creating reusable browser control components
2. Sharing WebView2 integration logic across multiple projects
3. Standardizing WebView2 usage in team development
4. Building OCX components for use by other applications

Extension Suggestions

1. Add more public methods to the Edge UserControl (e.g., Navigate, SetData) to encapsulate common operations
2. Add UserControl_Resize event handling for automatic WebView2 size adjustment
3. Implement property pages for the control, allowing design-time configuration of URL, UserDataFolder, etc.
4. Can be compiled as an OCX component for reference by other VB6 projects or VBA applications