Location>code7788 >text

Blazor Hybrid Hands-on Experience: The Pitfalls You May Not Have ExpectedThe Pitfalls You Didn't Expect

Popularity：751 ℃/2024-10-11 14:55:51

preamble

Yesterday I wrote a post introducing the Blazor Hybrid technologyBut space constraints prevented me from exploring some of these issues in depth. Today, I'd like to continue to document a few of the issues I've encountered with Blazor Hybrid, as well as some of the current limitations of the technology.

Limitations of file drag-and-drop events

Blazor Hybrid runs in a WebView environment, which leads to some limitations when dealing with file drag and drop. In traditional desktop applications (such as WinForms or WPF), developers can directly capture drag-and-drop events and get the full path to the file. However, in Blazor, drag-and-drop events can only be handled as they are in the browser, meaning that we can only get the stream of the uploaded file, but not the actual path to the file.

This is a major inconvenience for features that require direct access to file paths (such as dragging videos in for processing in Clipify).

redundant code(Not)

If you look at the project code, you may notice that there is also code in there that handles drag-and-drop events, but it doesn't actually take effect.

// Handle the DragEnter event, detecting if it's a file or not
private void blazorWebView1_DragEnter(object sender, DragEventArgs e) {
  ("drag enter");
  if (()) {
    // Change the mouse icon to indicate that you can drag and drop.
     = ;
  }
  else {
     = ;
  }
}

// Handle the drag and drop event to get the file path
private void blazorWebView1_DragDrop(object sender, DragEventArgs e) {
  ("drag drop");
  if (()) {
    var files = (string[]? (); var files = (string[]?); if ()) { var files = (string[]?

    // This will only handle a single file, but you can handle multiple files as well
    if (files?.Length > 0) {
      var filePath = files[0]; // Get the path to the file you're dragging and dropping.
      ($"File path: {filePath}"); // Get the path of the file being dragged.

      // Here you can pass the file path to Blazor or other processing logic.
    }
  }
}

// Handle the DragOver event to prevent the system's default behavior
private void blazorWebView1_DragOver(object sender, DragEventArgs e) {
  if (()) {
     = ; // Explicitly allow dragging and dropping of files
  }
  else {
     = ;
  }
}

prescription

The current solutions are limited, and based on the information found and my own explorations, there are several:

  1. Use a WinForms native control to override the webview when drag-and-drop is required.
  2. Intercepting webview drag-and-drop events using the hook technique
  3. Rewrite this Blazor Webview control from Microsoft and implement it yourself.WndProc methodologies

The code for the 3rd method looks roughly like this (not verified)

public class CustomBlazorWebView : BlazorWebView {
  protected override void WndProc(ref Message m) {
    const int WM_DROPFILES = 0x233; // Drag-and-drop file message

    if ( == WM_DROPFILES) {
      // Handle the file dragging and dropping logic.
      // You can call your drag-and-drop event handling logic here.

      // Block the message to avoid the system handling files by default.
      return.
    }

    (ref m).
  }
}

PS: I'm too much trouble just haven't gone to the trouble of realizing this drag-and-drop functionality, so far I've only done it to open the dialog box to select the file.

Community Feedback

The same issues I've seen raised by a lot of people on platforms like Github issues and the like, but it doesn't look like Microsoft wants to address them.

RELATED:

  • /MicrosoftEdge/WebView2Feedback/issues/2805
  • /dotnet/maui/issues/2205
  • /questions/73197778/net-maui-blazor-app-drag-and-drop-impossible

Desktop Application Experience Differences

Blazor Hybrid behaves more like a web application, even though it runs as a desktop application.

Browser shortcuts

A clear example of this is that when the F5 key is pressed in WebView, the page refreshes as if it were a browser, a behavior that is clearly inconsistent with the traditional desktop software user experience.

Similar limitations exist in similar technologies such as Electron. The difference, however, is that Electron provides more control over browser behavior, which can be blocked or redefined, whereas Blazor Hybrid does not currently have these finer-grained controls.

From a desktop perspective, users expect a consistent and native experience, so these subtle differences may affect developers' expectations for Blazor Hybrid apps.

Performance of window resizing

While using Blazor Hybrid, I also noticed smoothness issues with window resizing. Compared to the native desktop app, Blazor Hybrid doesn't perform as well. When the user resizes the window, the interface occasionally shows black edges or screen tearing.

This problem is not only in Blazor Hybrid, in fact, I've observed similar problems in browsers (chrome) and Electron apps (QQ).

To understand this phenomenon more deeply, I also tested C++ native apps, and found that native apps were relatively smoother when resizing windows, with no black edges or tearing issues.

I suspect the reason for this discrepancy may be that Blazor Hybrid and Electron rely on WebView as the rendering engine, and WebView's rendering mechanism is not as efficient as the native UI rendering engine when dealing with window resizing.

wrap-up

Blazor Hybrid is a promising technology that makes it easy for C# developers to build cross-platform desktop applications.

However, in using it, I found some issues that need attention, especially in drag and drop events, desktop application behavior consistency, and window resizing performance.

These issues may currently cause some problems for developers and also affect the smoothness of the user experience.

Next I'll find time to try out the Electron and wails development experience to further explore the benefits of Blazor Hybrid for desktop software development.

<Previous Next>