WPF窗口无法导航至Razor页面（Blazor Hybrid）问题求助

以下是针对你遇到的问题的具体排查方向和解决办法：

1. 确保Blazor服务全局注册并传递到子窗口 #

BlazorWebView依赖已注册的服务集合，若仅在MainWindow中初始化服务，子窗口EditingWindow可能无法获取到正确的服务实例。

• 在App.xaml.cs中全局注册Blazor服务：

  protected override void OnStartup(StartupEventArgs e)
  {
      var services = new ServiceCollection();
      // 注册WPF Blazor WebView核心服务
      services.AddWpfBlazorWebView();
      // 可选：添加调试工具，方便排查问题
      services.AddBlazorWebViewDeveloperTools();
      // 构建服务提供者并赋值给App的Services属性
      Services = services.BuildServiceProvider();
  
      base.OnStartup(e);
  }
  
  public new static IServiceProvider Services { get; private set; }
  

• 在打开EditingWindow时，将全局服务提供者传入：

  // MainWindow.xaml.cs中的OpenOnClick方法
  private void OpenOnClick(object sender, RoutedEventArgs e)
  {
      var editingWindow = new EditingWindow(App.Services);
      editingWindow.Show();
  }
  

• 在EditingWindow的构造函数中为BlazorWebView赋值服务：

  public EditingWindow(IServiceProvider serviceProvider)
  {
      InitializeComponent();
      blazorWebView.Services = serviceProvider;
  }
  

2. 检查BlazorWebView的RootComponent配置 #

确保RootComponent的选择器与index.html中的元素匹配，且组件类型引用正确：

• EditingWindow.xaml中的BlazorWebView配置：

  <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Wpf;assembly=Microsoft.AspNetCore.Components.WebView.Wpf"
          xmlns:local="clr-namespace:你的项目命名空间"
          Title="EditingWindow" Height="450" Width="800">
      <Grid>
          <blazor:BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html"
                                HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
              <blazor:BlazorWebView.RootComponents>
                  <!-- 选择器需与index.html中的元素ID一致 -->
                  <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:IndexEditor}" />
              </blazor:BlazorWebView.RootComponents>
          </blazor:BlazorWebView>
      </Grid>
  </Window>
  

3. 验证wwwroot/index.html的完整性与属性设置 #

• 确保index.html包含Blazor WebView的必要脚本：

  <body>
      <div id="app"></div>
      <script src="_framework/blazor.webview.js"></script>
  </body>
  

• 右键index.html → 属性 → 设置复制到输出目录为「如果较新则复制」，避免运行时找不到页面文件。

4. 启用调试工具排查加载错误 #

通过开发者工具查看控制台错误，定位具体问题：

• 已在服务注册时添加AddBlazorWebViewDeveloperTools()，运行程序后打开EditingWindow，按F12调出开发者工具，查看「控制台」标签页的错误信息（如脚本加载失败、组件未找到等）。

5. 确认BlazorWebView控件尺寸正确 #

确保BlazorWebView占满整个窗口，避免因控件尺寸为0导致内容不可见：

• 在XAML中为BlazorWebView设置HorizontalAlignment="Stretch"和VerticalAlignment="Stretch"，并将其放置在Grid容器中（如上述XAML示例）。

内容的提问来源于stack exchange，提问作者AliSalehi