WPF应用窗口调整时ChromiumWebBrowser缩放异常问题

我需要让WPF应用中的ChromiumWebBrowser控件自动缩放以填充可用空间，但标准实现方式无法正常工作，异常显示效果如下：

我尝试过以下修复代码，但问题仍间歇性出现：

当前尝试的代码 #

C#代码 #

try
{
    _layoutUpdateCts.Cancel();
    _layoutUpdateCts = new CancellationTokenSource();

    await Task.Delay(100, _layoutUpdateCts.Token);

    // 在UI线程执行尺寸更新
    await Dispatcher.InvokeAsync(() =>
    {
        if (chromiumWebBrowser.IsBrowserInitialized)
        {
            chromiumWebBrowser.Width = ContentGrid.ActualWidth;
            chromiumWebBrowser.Height = BrowserRow.ActualHeight;
            // 强制CEF更新尺寸
            chromiumWebBrowser.GetBrowser().GetHost().WasResized();
        }
    }, DispatcherPriority.Background);
}
catch (TaskCanceledException)
{
    // 忽略之前任务的取消异常
}

XAML代码 #

<CefSharp:ChromiumWebBrowser
    x:Name="chromiumWebBrowser"
    FrameLoadEnd="chromiumWebBrowser_FrameLoadEnd"
    Grid.Row="1"
    Visibility="Hidden"
    LoadingStateChanged="chromiumWebBrowser_LoadingStateChanged"
    KeyDown="Browser_KeyDown"
    MinWidth="330"
    MinHeight="250"/>

有效修复方案 #

1. 调整XAML布局配置 #

移除硬编码的可见性控制（按需保留），添加布局对齐属性让控件自动填充容器空间：

<CefSharp:ChromiumWebBrowser
    x:Name="chromiumWebBrowser"
    FrameLoadEnd="chromiumWebBrowser_FrameLoadEnd"
    Grid.Row="1"
    LoadingStateChanged="chromiumWebBrowser_LoadingStateChanged"
    KeyDown="Browser_KeyDown"
    MinWidth="330"
    MinHeight="250"
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch"
    HorizontalContentAlignment="Stretch"
    VerticalContentAlignment="Stretch"/>

2. 替换延迟任务为布局变更事件监听 #

固定延迟容易导致布局未完成时触发更新，改用SizeChanged事件监听容器尺寸变化，确保在布局稳定后触发CEF尺寸更新：

// 在控件Loaded事件或构造函数中注册事件
private void YourWindow_Loaded(object sender, RoutedEventArgs e)
{
    ContentGrid.SizeChanged += ContentGrid_SizeChanged;
}

private void ContentGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    if (chromiumWebBrowser.IsBrowserInitialized)
    {
        Dispatcher.BeginInvoke(() =>
        {
            chromiumWebBrowser.GetBrowser()?.GetHost()?.WasResized();
        }, DispatcherPriority.Render);
    }
}

// 页面加载完成后再次触发尺寸更新，确保页面布局正确
private void chromiumWebBrowser_FrameLoadEnd(object sender, FrameLoadEndEventArgs e)
{
    if (e.Frame.IsMain && chromiumWebBrowser.IsBrowserInitialized)
    {
        Dispatcher.BeginInvoke(() =>
        {
            chromiumWebBrowser.GetBrowser()?.GetHost()?.WasResized();
        }, DispatcherPriority.Render);
    }
}

修复说明 #

• 移除手动设置Width/Height的逻辑，依赖WPF布局系统自动控制控件尺寸
• 使用SizeChanged事件替代固定延迟，避免布局未稳定时的无效更新
• 通过Stretch对齐属性确保控件完全填充Grid单元格
• 在页面主框架加载完成后补充触发尺寸更新，解决页面加载时的布局偏差问题

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