如何在ChromiumWebBrowser加载页面时用ProgressBar显示加载进度

LoadingStateChanged事件仅能告知加载的开始/结束状态，要实现从0到100%的实时进度更新，需要结合ChromiumWebBrowser的ProgressChanged事件，同时处理跨线程更新UI的问题。以下是完整解决方案：

修改后的代码 #

using System;
using System.Windows.Forms;
using CefSharp;

namespace Weather
{
    public partial class GoogleMapsForm : Form
    {
        public GoogleMapsForm()
        {
            InitializeComponent();

            this.WindowState = FormWindowState.Maximized;
            // 绑定加载状态变更和进度变更事件
            chromiumWebBrowser1.LoadingStateChanged += ChromiumWebBrowser1_LoadingStateChanged;
            chromiumWebBrowser1.ProgressChanged += ChromiumWebBrowser1_ProgressChanged;
            // 修正路径转义问题
            chromiumWebBrowser1.Load(@"D:\Csharp Projects\Weather\map.html");
        }

        private void ChromiumWebBrowser1_ProgressChanged(object sender, ProgressChangedEventArgs e)
        {
            // 将0-1的浮点进度转换为0-100的整数百分比
            int progressPercentage = (int)(e.Progress * 100);
            
            // 跨线程更新UI，避免线程安全异常
            if (progressBar1.InvokeRequired)
            {
                progressBar1.Invoke(new Action(() => 
                {
                    progressBar1.Value = progressPercentage;
                }));
            }
            else
            {
                progressBar1.Value = progressPercentage;
            }
        }

        private void ChromiumWebBrowser1_LoadingStateChanged(object sender, LoadingStateChangedEventArgs e)
        {
            if (progressBar1.InvokeRequired)
            {
                progressBar1.Invoke(new Action(() => 
                {
                    HandleLoadingState(e.IsLoading);
                }));
            }
            else
            {
                HandleLoadingState(e.IsLoading);
            }
        }

        private void HandleLoadingState(bool isLoading)
        {
            if (isLoading)
            {
                // 加载开始时重置进度条并显示
                progressBar1.Value = 0;
                progressBar1.Visible = true;
            }
            else
            {
                // 加载完成后将进度拉满，可选择隐藏进度条
                progressBar1.Value = 100;
                // 若不需要保留进度条，取消下方注释
                // progressBar1.Visible = false;
            }
        }

        private void GoogleMapsForm_Load(object sender, EventArgs e)
        {

        }
    }
}

关键逻辑说明 #

1. ProgressChanged事件：
   • e.Progress返回0到1的浮点值，对应加载进度的比例，乘以100后转为整数即可直接设置给ProgressBar的Value属性。
2. 线程安全处理：
   • CefSharp的事件回调运行在非UI线程，必须通过Invoke将控件更新操作切换到UI线程执行，避免跨线程操作控件的异常。
3. LoadingStateChanged事件：
   • 负责进度条的初始化和收尾：开始加载时重置进度并显示控件，加载完成后将进度设为100%，可根据需求选择隐藏进度条。

内容的提问来源于stack exchange，提问作者Daniel Lip