浮动状态下重置布局后RadPane中CefSharp浏览器冻结问题

我使用RadDocking控件管理应用布局，其中一个RadPane承载了CefSharp的ChromiumWebBrowser控件。测试发现：

• 当面板处于停靠状态时重置布局，功能完全正常，布局恢复且浏览器保持响应；
• 当面板**浮动（独立窗口）**后再重置布局，面板内的浏览器会直接冻结并失去响应。

相关代码 #

XAML布局

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition Height="0.2*"/>
    </Grid.RowDefinitions>
    <telerik:RadDocking x:Name="radDocking" HasDocumentHost="False" SerializationTag="Docking">
        <telerik:RadSplitContainer telerik:RadDocking.SerializationTag="S1">
            <telerik:RadPaneGroup x:Name="RadPaneGroup1" telerik:RadDocking.SerializationTag="G1">
                <telerik:RadPane x:Name="RadPane1" telerik:RadDocking.SerializationTag="P1">
                    <TextBlock Text="Pane 1"/>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
        <telerik:RadSplitContainer telerik:RadDocking.SerializationTag="S2">
            <telerik:RadPaneGroup x:Name="RadPaneGroup2" telerik:RadDocking.SerializationTag="G2">
                <telerik:RadPane x:Name="RadPane2" telerik:RadDocking.SerializationTag="P2">
                    <wpf:ChromiumWebBrowser Name="Browser" Initialized="Browser_OnInitialized"/>
                </telerik:RadPane>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking>
    <Button Grid.Row="1" Content="Reset Layout" Click="ResetLayout_Click"/>
</Grid>

C#逻辑

public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();
        SaveLayout();
    }
    
    private void Browser_OnInitialized(object sender, EventArgs e)
    {
        string videoUrl = "https://www.youtube.com/embed/JrNMyzsYr4M?autoplay=1&mute=1";

        string html = $@"
        <html>
            <head>
                <meta charset='utf-8'>
            </head>
            <body style='margin:0; padding:0;'>
                <iframe width='100%' height='100%' src='{videoUrl}' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>
            </body>
        </html>
        ";

        Browser.LoadHtml(html, "http://dummy.com");
    }

    private void SaveLayout()
    {
        using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForAssembly())
        {
            using (var isoStream = storage.OpenFile("RadDocking_Layout.xml", FileMode.Create))
            {
                radDocking.SaveLayout(isoStream);
                isoStream.Seek(0, SeekOrigin.Begin);
                StreamReader reader = new StreamReader(isoStream);
                reader.ReadToEnd();
            }
        }
    }

    private void ResetLayout_Click(object sender, RoutedEventArgs e)
    {
        using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForAssembly())
        {
            using (var isoStream = storage.OpenFile("RadDocking_Layout.xml", FileMode.Open))
            {
                radDocking.LoadLayout(isoStream);
            }
        }
    }
}

核心疑问 #

1. 为何仅在面板浮动时重置布局会触发浏览器冻结？
2. 如何在无需预先以编程方式停靠面板的前提下解决该问题？

问题原因分析 #

本质是RadDocking布局加载的生命周期与CefSharp控件的窗口句柄绑定冲突：

• 当面板浮动时，RadDocking会为其创建独立的Win32窗口，CefSharp的底层浏览器进程会绑定到这个窗口的句柄；
• 重置布局时，RadDocking会销毁浮动窗口并重新创建停靠状态的面板容器，但CefSharp控件的底层进程仍绑定到已销毁的旧窗口句柄，导致UI线程阻塞、控件失去响应；
• 停靠状态下重置布局时，控件始终在主窗口容器内，窗口句柄未发生变更，因此不会触发冲突。

解决方案 #

以下方案无需预先将面板停靠，直接解决冻结问题：

方案1：布局加载前后重建CefSharp控件 #

通过销毁旧控件、加载布局后重新初始化新控件，彻底切断旧句柄的绑定关系：

private void ResetLayout_Click(object sender, RoutedEventArgs e)
{
    // 1. 销毁旧浏览器控件，释放底层资源
    var oldBrowser = RadPane2.Content as ChromiumWebBrowser;
    if (oldBrowser != null)
    {
        RadPane2.Content = null;
        oldBrowser.Dispose();
    }

    // 2. 加载预设布局
    using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForAssembly())
    {
        using (var isoStream = storage.OpenFile("RadDocking_Layout.xml", FileMode.Open))
        {
            radDocking.LoadLayout(isoStream);
        }
    }

    // 3. 重新创建并初始化浏览器控件
    var newBrowser = new ChromiumWebBrowser();
    newBrowser.Initialized += Browser_OnInitialized;
    RadPane2.Content = newBrowser;
}

方案2：利用RadDocking事件自动恢复控件 #

通过LayoutLoaded事件，在布局加载完成后检查并恢复浏览器控件：

public MainWindow()
{
    InitializeComponent();
    SaveLayout();
    // 订阅布局加载完成事件
    radDocking.LayoutLoaded += RadDocking_LayoutLoaded;
}

private void RadDocking_LayoutLoaded(object sender, EventArgs e)
{
    // 检查面板内容是否丢失，重新初始化浏览器
    if (RadPane2.Content == null || !(RadPane2.Content is ChromiumWebBrowser))
    {
        var newBrowser = new ChromiumWebBrowser();
        newBrowser.Initialized += Browser_OnInitialized;
        RadPane2.Content = newBrowser;
    }
}

private void ResetLayout_Click(object sender, RoutedEventArgs e)
{
    var oldBrowser = RadPane2.Content as ChromiumWebBrowser;
    if (oldBrowser != null)
    {
        oldBrowser.Dispose();
    }

    using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForAssembly())
    {
        using (var isoStream = storage.OpenFile("RadDocking_Layout.xml", FileMode.Open))
        {
            radDocking.LoadLayout(isoStream);
        }
    }
}

方案3：手动重新绑定窗口句柄（进阶） #

若不想销毁控件，可尝试手动更新CefSharp的窗口句柄（注意：依赖CefSharp内部API，版本不同可能有兼容性问题）：

private void ResetLayout_Click(object sender, RoutedEventArgs e)
{
    var browser = RadPane2.Content as ChromiumWebBrowser;
    IntPtr oldHandle = browser?.BrowserHost?.WindowHandle ?? IntPtr.Zero;

    // 加载布局
    using (IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForAssembly())
    {
        using (var isoStream = storage.OpenFile("RadDocking_Layout.xml", FileMode.Open))
        {
            radDocking.LoadLayout(isoStream);
        }
    }

    // 重新绑定新的窗口句柄
    if (browser?.BrowserHost != null)
    {
        var newHandle = browser.GetBrowserWindowHandle();
        if (newHandle != oldHandle)
        {
            browser.BrowserHost.WindowHandle = newHandle;
        }
    }
}

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