.net Blazor 桌面文件夹选择器？

Question

我正在使用带有 BlazorWebView 的 WPF 桌面应用程序。我想打开文件资源管理器并让用户选择一个文件夹来选择路径。我可以使用浏览器输入来选择文件，但据我了解，浏览器的限制允许我选择文件夹路径。是否有用于本机访问的文件夹选择器？

Process.Start 似乎只打开文件资源管理器，不允许我选择文件夹。

<blazor:BlazorWebView HostPage="wwwroot\index.html" Services="{DynamicResource services}">
            <blazor:BlazorWebView.RootComponents>
                <blazor:RootComponent Selector="#app" ComponentType="{x:Type shared:App}" />
            </blazor:BlazorWebView.RootComponents>
        </blazor:BlazorWebView>

@using System.Diagnostics


<button @onclick="OnClickOpenNativeFileExplorer">Open</button>

@code {
    private void OnClickOpenNativeFileExplorer(MouseEventArgs e)
    {
        Process.Start("explorer.exe");
    }
}

Answer 1

对于任何想知道的人，我可以通过执行以下操作来解决它。

我将 IFolderPicker 接口添加到我的 razor 类库中。然后使用NuGet包在WPF项目中实现FolderPicker。

Install-Package WindowsAPICodePack-Shell -Version 1.1.1

public interface IFolderPicker
{
    public string DisplayFolderPicker();
}

public class FolderPicker : IFolderPicker
{
        public string DisplayFolderPicker()
        {
            var dialog = new CommonOpenFileDialog();
            dialog.IsFolderPicker = true;
            CommonFileDialogResult result = dialog.ShowDialog();
            if (result == CommonFileDialogResult.Ok)
                return dialog.FileName;
            return "";
        }
}

然后，我使用 MainWindow.xaml.cs 文件中的 DI 容器注册依赖项。

public MainWindow()
        {
            InitializeComponent();

            Application.Current.MainWindow.WindowState = WindowState.Maximized;

            var serviceCollection = new ServiceCollection();
            serviceCollection.AddWpfBlazorWebView();

            serviceCollection.AddTransient<IFolderPicker, FolderPicker>();

            Resources.Add("services", serviceCollection.BuildServiceProvider());
        }

然后在 razor 组件中，我有一个调用 DisplayFolderPicker 方法的按钮。

@inject IFolderPicker _folderPicker


<button @onclick="OnClickOpenNativeFileExplorer">Open</button>
<p>@path</p>

@code {
    private string path = "";
    private void OnClickOpenNativeFileExplorer(MouseEventArgs e)
    {
        path = _folderPicker.DisplayFolderPicker();

    }
}

要点：我想这不仅适用于FolderPicker，而且适用于调用任何本机组件。

Answer 2

现在，同样在 Blazor 中，您可以使用 JavaScript 打开并选取目录。大多数但并非所有浏览器都支持此脚本，并且 Blazor 客户端必须位于 HTTPS 环境中，而不是 HTTP。

脚本（index.html）：

window.selectDirectory = async function () { /* Folder picker window */
    try {
        const dirHandle = await window.showDirectoryPicker();
        return dirHandle.name;
    } catch (error) {
        console.error("Error selecting directory:", error);
        return null;
    }
}

调用脚本的客户端服务类中的代码示例：

using Microsoft.JSInterop;

private readonly IJSRuntime _js;

public async Task<string> FolderPicker()
{
    var folder = await _js.InvokeAsync<string>("selectDirectory");
    return folder;
}

这里我们称之为服务类：

var path = await MyService.FolderPicker();
// do what you want with path...