本教程旨在解决在WPF应用中使用CefSharp嵌入Angular单页应用时，拖放功能失效的问题。当Angular应用通过ng build生成多文件部署时，CefSharp默认禁用拖放事件，导致功能异常。解决方案是在CefSharp ChromiumWebBrowser控件的加载事件中，通过设置AllowDrop = true;来显式启用拖放功能，从而确保Angular应用的拖放交互在WPF环境中正常运行。
1. 问题背景与现象
在桌面应用开发中，将现代Web前端框架（如Angular）构建的复杂用户界面嵌入到WPF应用程序中，是一种常见的混合应用开发模式。CefSharp作为一款流行的.NET开源框架，提供了将Chromium浏览器引擎集成到WPF或WinForms应用的能力。然而，开发者在使用CefSharp加载通过ng build命令构建的Angular应用时，可能会遇到一个特定问题：页面渲染正常，但Angular应用内部的拖放（Drag-and-Drop）功能无法正常工作。
具体表现为：
- 在Chrome或其他现代浏览器中，无论Angular应用是运行在开发服务器（ng serve）还是通过ng build打包后部署，拖放功能均表现正常。
- 在CefSharp中，如果将所有Angular脚本手动合并到index.html单个文件中，拖放功能可能正常。
- 但当Angular应用按照标准方式通过ng build命令打包，生成包含多个JavaScript和CSS文件的部署产物时，嵌入到CefSharp中的应用将无法执行拖放操作。尽管dragstart等事件可能仍会触发，但后续的拖动行为（如dragevent）却无法被正确处理，导致拖放操作无法完成。
这种差异性给开发者带来了困扰，尤其是在需要复杂交互的Angular应用中，拖放功能是不可或缺的。
2. CefSharp集成与Angular应用部署
为了在WPF应用中加载本地的Angular应用文件，通常会利用CefSharp的自定义Scheme处理能力。以下是一个典型的CefSharp初始化和本地文件加载配置示例：
using CefSharp;
using CefSharp.Handler;
using CefSharp.Wpf;
using System.IO;
using System.Windows.Controls; // 假设UcGpsWeb是一个UserControl
public partial class UcGpsWeb : UserControl
{
public ChromiumWebBrowser WebBrowserInstance { get; set; }
public UcGpsWeb()
{
InitializeComponent(); // 初始化WPF组件
// CefSettings配置
CefSettings settings = new CefSettings();
// 禁用不安全的私有网络请求，通常用于开发环境
settings.CefCommandLineArgs["disable-features"] = "BlockInsecurePrivateNetworkRequests";
// 禁用Web安全策略，允许跨域访问本地资源，开发时常用
settings.CefCommandLineArgs.Add("disable-web-security", "disable-web-security");
// 注册自定义Scheme，用于加载本地文件
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = "localfolder",
DomainName = "cefsharp",
SchemeHandlerFactory = new FolderSchemeHandlerFactory(
rootFolder: @".\Assets\HTML\GPS\", // Angular应用构建输出的根目录
hostName: "cefsharp",
defaultPage: "index.html" // 默认加载的页面
)
});
// 初始化CefSharp全局环境
Cef.Initialize(settings);
// 创建ChromiumWebBrowser实例并添加到WPF布局中
WebBrowserInstance = new ChromiumWebBrowser();
this.Content = WebBrowserInstance; // 假设此UserControl包含浏览器实例
// 页面加载事件处理
Loaded += (s, e) =>
{
// 可选：显示开发者工具，便于调试
// WebBrowserInstance.ShowDevTools();
// 设置浏览器地址为自定义Scheme指向的本地Angular应用
WebBrowserInstance.Address = "localfolder://cefsharp/";
};
}
}在上述代码中：
- CefSettings用于配置CefSharp的各项参数，包括命令行参数，例如disable-web-security对于本地资源访问可能很有用。
- RegisterScheme通过FolderSchemeHandlerFactory将一个自定义的localfolder://cefsharp/协议映射到本地文件系统路径（例如.\Assets\HTML\GPS\），使得CefSharp能够像访问HTTP资源一样访问本地的Angular应用文件。
- WebBrowserInstance.Address被设置为自定义协议地址，从而加载index.html。
3. 拖放功能失效的根本原因
经过深入分析，发现CefSharp的ChromiumWebBrowser控件在WPF环境中，默认情况下会禁用其宿主环境的拖放功能。这意味着，即使Angular应用内部的JavaScript代码正确触发了dragstart事件，CefSharp的底层机制也不会将这些Web拖放事件映射到WPF的拖放系统，或者允许它们在Web视图内部正常进行。因此，后续的dragevent（如dragover, dragleave, drop）将无法被Web视图捕获和处理，导致拖放操作无法完成。
这是一种安全或性能上的默认设置，旨在防止未经授权的拖放操作或简化集成。但对于需要完整Web交互的应用来说，这需要显式地进行配置。
4. 解决方案
解决此问题的关键在于显式地在CefSharp的ChromiumWebBrowser控件上启用拖放功能。在WPF中，这通常通过设置控件的AllowDrop属性为true来实现。
将AllowDrop = true;添加到ChromiumWebBrowser实例的初始化或加载逻辑中，即可解决问题。建议在Loaded事件中进行设置，确保控件已完全初始化。
using CefSharp;
using CefSharp.Handler;
using CefSharp.Wpf;
using System.IO;
using System.Windows.Controls;
public partial class UcGpsWeb : UserControl
{
public ChromiumWebBrowser WebBrowserInstance { get; set; }
public UcGpsWeb()
{
InitializeComponent();
CefSettings settings = new CefSettings();
settings.CefCommandLineArgs["disable-features"] = "BlockInsecurePrivateNetworkRequests";
settings.CefCommandLineArgs.Add("disable-web-security", "disable-web-security");
settings.RegisterScheme(new CefCustomScheme
{
SchemeName = "localfolder",
DomainName = "cefsharp",
SchemeHandlerFactory = new FolderSchemeHandlerFactory(
rootFolder: @".\Assets\HTML\GPS\",
hostName: "cefsharp",
defaultPage: "index.html"
)
});
Cef.Initialize(settings);
WebBrowserInstance = new ChromiumWebBrowser();
this.Content = WebBrowserInstance;
Loaded += (s, e) =>
{
// 关键修复：启用CefSharp控件的拖放功能
WebBrowserInstance.AllowDrop = true;
// WebBrowserInstance.ShowDevTools(); // 调试工具
WebBrowserInstance.Address = "localfolder://cefsharp/";
};
}
}通过添加WebBrowserInstance.AllowDrop = true;这一行代码，CefSharp的ChromiumWebBrowser控件现在将允许并处理拖放事件，从而使
