参照ReactiveUI官方路由示例开发WPF项目报错如何解决？

问题复现 #

• 参照ReactiveUI官方路由文档开发WPF项目，仅安装ReactiveUI和ReactiveUI.WPF两个NuGet包
• 核心代码如下：

MainWindow.xaml.cs #

using ReactiveUI;

namespace KardexTerminal_WPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : ReactiveWindow<MainViewModel>
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

MainWindow.xaml #

<rxui:ReactiveWindow x:Class="KardexTerminal_WPF.MainWindow"
         xmlns:rxui="https://reactiveui.net" 
        x:TypeArguments="local:MainViewModel"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:KardexTerminal_WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</rxui:ReactiveWindow>

MainViewModel.cs #

using ReactiveUI;

namespace KardexTerminal_WPF
{
    public class MainViewModel : ReactiveObject, IScreen
    {
        public MainViewModel()
        {
            Router = new RoutingState();
        }

        public RoutingState Router { get; }
    }
}

运行时抛出视图相关错误，自行实现IViewFor接口后首版问题解决，新增LoginView用户控件后又出现编译错误：

LoginView.xaml #

<rxui:ReactiveUserControl x:Class="KardexTerminal_WPF.Views.LoginView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:KardexTerminal_WPF.Views"
             mc:Ignorable="d" 
             xmlns:vm="clr-namespace:KardexTerminal.ViewModels;assembly=KardexTerminal"
             x:TypeArguments="vm:LoginViewModel"
             xmlns:rxui="https://reactiveui.net"
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
            
    </Grid>
</rxui:ReactiveUserControl>

LoginView.xaml.cs #

namespace KardexTerminal_WPF.Views
{
    /// <summary>
    /// Interaction logic for LoginView.xaml
    /// </summary>
    public partial class LoginView
    {
        public LoginView()
        {
            InitializeComponent();
        }
    }
}

修复编译问题后仍有残留设计器错误。

解决方案 #

1. 编译错误修复
   ReactiveUI的泛型基类在WPF环境中不会自动同步XAML与后台代码的继承关系，需要手动在控件后台代码中显式声明继承泛型基类，LoginView的后台代码修改为以下内容即可解决编译错误：

using ReactiveUI;
using KardexTerminal.ViewModels;

namespace KardexTerminal_WPF.Views
{
    /// <summary>
    /// Interaction logic for LoginView.xaml
    /// </summary>
    public partial class LoginView : ReactiveUserControl<LoginViewModel>
    {
        public LoginView()
        {
            InitializeComponent();
        }
    }
}

2. 残留设计器错误处理
   该错误属于WPF设计器与ReactiveUI泛型控件的兼容性问题，不影响程序实际运行，可按以下步骤尝试清除：

• 关闭Visual Studio
• 删除项目根目录下的.vs隐藏文件夹
• 删除所有项目的bin、obj文件夹
• 重新打开Visual Studio重新编译项目
  如果错误仍存在可直接忽略，不会影响程序的正常发布和运行。

内容的提问来源于stack exchange，提问作者Tomáš Filip