文件拖放事件的局限#

Blazor Hybrid 的运行环境是 WebView，这导致了在处理文件拖放时出现了一些限制。在传统桌面应用中（如 WinForms 或 WPF），开发者可以直接捕获拖放事件，并获得文件的完整路径。但在 Blazor 中，拖放事件只能像浏览器中一样处理，意味着我们只能获得上传文件的流，而无法获取文件的实际路径。

这对于那些需要直接访问文件路径的功能（如Clipify中把视频拖进去处理）带来了很大的不便。

冗余代码（不是）#

看了项目代码的同学可能会发现，FormMain.cs里还有处理拖放事件的代码，不过实际上并没有生效。

// 处理拖动进入事件，检测是否为文件
private void blazorWebView1_DragEnter(object sender, DragEventArgs e) {
  Console.WriteLine("drag enter");
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    // 改变鼠标图标，表示可以拖放
    e.Effect = DragDropEffects.Copy;
  }
  else {
    e.Effect = DragDropEffects.None;
  }
}
// 处理拖放事件，获取文件路径
private void blazorWebView1_DragDrop(object sender, DragEventArgs e) {
  Console.WriteLine("drag drop");
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    var files = (string[]?)e.Data.GetData(DataFormats.FileDrop);
    // 这里只处理单个文件，当然你也可以处理多个文件
    if (files?.Length > 0) {
      var filePath = files[0]; // 获取拖放的文件路径
      MessageBox.Show($"文件路径: {filePath}");
      // 在这里你可以将文件路径传递给 Blazor 或其他处理逻辑
    }
  }
}
// 处理 DragOver 事件，防止系统默认行为
private void blazorWebView1_DragOver(object sender, DragEventArgs e) {
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    e.Effect = DragDropEffects.Copy; // 明确允许拖放文件
  }
  else {
    e.Effect = DragDropEffects.None;
  }
}

​解决方案

目前的解决办法有限，根据查找到的资料和我自己的探索，有以下几种：

1. 在需要拖放的时候，使用一个WinForms原生控件覆盖webview

2. 使用hook技术，拦截webview的拖放事件

3. 重写微软提个的这个 Blazor Webview 控件，自己实现 WndProc 方法

第3种方法的代码大概是这样（未验证）

public class CustomBlazorWebView : BlazorWebView {
  protected override void WndProc(ref Message m) {
    const int WM_DROPFILES = 0x233; // 拖放文件消息
    if (m.Msg == WM_DROPFILES) {
      // 处理文件拖放逻辑
      // 你可以在这里调用你的拖放事件处理逻辑
      // 阻止消息传递，避免系统默认处理文件
      return;
    }
    base.WndProc(ref m);
  }
}

PS：我嫌麻烦就还没去折腾实现这个拖放功能，目前只做了打开对话框选择文件。

社区反馈#

同样的问题我在 Github issues 和 Stack Overflow 之类的平台也有看到很多人提出，不过看起来微软并不想解决这些问题。

相关链接：

• https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805

• https://github.com/dotnet/maui/issues/2205

• https://stackoverflow.com/questions/73197778/net-maui-blazor-app-drag-and-drop-impossible

桌面应用体验差异#

Blazor Hybrid 尽管以桌面应用的形式运行，但表现更接近于网页应用。

浏览器的快捷键#

一个明显的例子是，在 WebView 中按下 F5 键时，页面会像浏览器一样刷新，这种行为显然不符合传统桌面软件的用户体验。

在类似的技术中，如 Electron，也存在类似的局限。但不同的是，Electron 提供了更多对浏览器行为的控制手段，可以阻止或重定义这些行为，而 Blazor Hybrid 目前则没有这些更细粒度的控制能力。

从桌面应用的角度来看，用户希望获得一致且原生的操作体验，因此这些细微的差异可能会影响开发者对 Blazor Hybrid 应用的期望。

窗口大小调整的表现

在使用 Blazor Hybrid 时，我还注意到窗口大小调整的流畅度问题。相比起原生的桌面应用，Blazor Hybrid 的表现不尽如人意。当用户调整窗口大小时，界面偶尔会出现黑边或画面撕裂的现象。

这种问题不仅在 Blazor Hybrid 中出现，实际上，在浏览器（chrome）和 Electron 应用（QQ）中，我也观察到类似的问题。

为了更深入地理解这个现象，我还测试了 C++ 原生应用，结果发现原生应用在调整窗口大小时相对来说更流畅，没有出现黑边或撕裂的问题。

我猜测造成这种差异的原因可能在于，Blazor Hybrid 和 Electron 依赖 WebView 作为渲染引擎，而 WebView 的渲染机制在处理窗口大小调整时不如原生 UI 渲染引擎高效。

小结#

Blazor Hybrid 是一个非常有潜力的技术，它让 C# 开发者能够轻松地构建跨平台桌面应用。

然而，在使用过程中，我发现了一些需要关注的问题，尤其是在拖放事件、桌面应用行为一致性和窗口大小调整表现上。

转自https://www.cnblogs.com/deali/p/18458357