Blazor Hybrid Practical Experience: Pitfalls You Might Not Expect

Foreword

I wrote an article yesterday introducing Blazor Hybrid technology, but due to length constraints, some issues were not explored in depth. Today, I would like to continue documenting several problems encountered while using Blazor Hybrid, as well as some current limitations of this technology.

Limitations of File Drag-and-Drop Events

The operating environment for Blazor Hybrid is WebView, which introduces certain limitations when handling file drag-and-drop. In traditional desktop applications (such as WinForms or WPF), developers can directly capture drag-and-drop events and obtain the full file path. However, in Blazor, drag-and-drop events can only be handled in the same way as in a browser, meaning we can only obtain the file stream for upload, but cannot retrieve the actual file path.

This creates significant inconvenience for features that require direct access to the file path (such as dragging a video into Clipify for processing).

Redundant Code (not really)

Students who have looked at the project code might notice that there is still code in FormMain.cs to handle DragDrop events, but it is not actually effective.

// Handle the drag enter event to detect if it is a file
private void blazorWebView1_DragEnter(object sender, DragEventArgs e) {
  Console.WriteLine("drag enter");
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    // Change the mouse icon to indicate that dropping is allowed
    e.Effect = DragDropEffects.Copy;
  }
  else {
    e.Effect = DragDropEffects.None;
  }
}

// Handle the drop event to get the file path
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);

    // Here only a single file is handled, of course you can also handle multiple files
    if (files?.Length > 0) {
      var filePath = files[0]; // Get the path of the dropped file
      MessageBox.Show($"File Path: {filePath}");

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

// Handle the DragOver event to prevent the system default behavior
private void blazorWebView1_DragOver(object sender, DragEventArgs e) {
  if (e.Data.GetDataPresent(DataFormats.FileDrop)) {
    e.Effect = DragDropEffects.Copy; // Explicitly allow file dropping
  }
  else {
    e.Effect = DragDropEffects.None;
  }
}

Solution

The current solutions are limited. Based on the research and my own exploration, there are a few approaches:

1. Use a native WinForms control to cover the WebView when drag-and-drop is needed.
2. Use hooking techniques to intercept the WebView's drag-and-drop events.
3. Override the Blazor WebView control provided by Microsoft and implement the WndProc method yourself.

The code for method 3 looks something like this (unverified):

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

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

      // Prevent message passing to avoid default system file handling
      return;
    }

    base.WndProc(ref m);
  }
}

PS: I found it too troublesome and haven't bothered to implement this drag-and-drop functionality yet. For now, I've only set up opening a dialog to select files.

Community Feedback

I've also seen many people raise similar issues on platforms like GitHub Issues and Stack Overflow, but it seems Microsoft isn't interested in addressing these problems.

Related Links:

• 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

Desktop Application Experience Differences

Blazor Hybrid, although running as a desktop application, behaves more like a web application.

Browser Keyboard Shortcuts

A clear example is that pressing the F5 key in a WebView refreshes the page just like in a browser. This behavior is obviously inconsistent with the user experience of traditional desktop software.

In similar technologies like Electron, similar limitations exist. However, the difference is that Electron provides more control over browser behaviors, allowing developers to block or redefine these actions. Blazor Hybrid, on the other hand, currently lacks such fine-grained control capabilities.

From the perspective of desktop applications, users expect a consistent and native operating experience. Therefore, these subtle differences may influence developers' expectations for Blazor Hybrid applications.

Performance During Window Resizing

While using Blazor Hybrid, I also noticed issues with the smoothness of window resizing. Compared to native desktop applications, Blazor Hybrid's performance is not as satisfactory. When a user resizes the window, the interface occasionally exhibits black edges or screen tearing.

This issue is not limited to Blazor Hybrid. In fact, I've observed similar problems in browsers (Chrome) and Electron-based applications (QQ).

To better understand this phenomenon, I also tested a native C++ application and found that native apps are relatively smoother during window resizing, without the issues of black edges or tearing.

I speculate that the reason for this difference might be that Blazor Hybrid and Electron rely on WebView as their rendering engine. The rendering mechanism of WebView is less efficient than that of native UI rendering engines when handling window resizing.

Summary

Blazor Hybrid is a very promising technology that enables C# developers to easily build cross-platform desktop applications.

However, during my usage, I identified several issues that require attention, particularly regarding drag-and-drop events, consistency in desktop application behavior, and performance during window resizing.

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

Next, I will find the time to try out the development experience with Electron and Wails to further explore the advantages of Blazor Hybrid in desktop software development.