能否在WinUI 3中实现WPF的ViewModel-first隐式DataTemplates关联模式？

可以实现，WinUI 3支持通过数据模板匹配ViewModel类型自动渲染对应视图，你遇到的仅显示ToString()结果的问题，是因为WinUI 3中DataTemplate的类型匹配逻辑和WPF存在细微差异，调整定义方式即可解决。

核心差异说明 #

WPF通过{x:Type}为DataTemplate指定DataType，而WinUI 3需要直接在DataTemplate标签上用x:DataType属性声明匹配的类型，同时要确保ViewModel的命名空间正确引入。

完整实现步骤 #

1. 实现ViewModel基类（处理属性变更通知） #

using System.ComponentModel;
using System.Runtime.CompilerServices;

public class ViewModelBase : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 定义具体ViewModel与对应视图 #

以CustomerListViewModel和CustomerListView、OrderViewModel和OrderView为例：

// CustomerListViewModel.cs
public class CustomerListViewModel : ViewModelBase
{
    // 可添加视图所需的属性、命令
}

// OrderViewModel.cs
public class OrderViewModel : ViewModelBase
{
    // 可添加视图所需的属性、命令
}

对应的视图示例（CustomerListView.xaml）：

<UserControl
    x:Class="YourApp.Views.CustomerListView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid Background="#FFE0F7FA">
        <TextBlock Text="客户列表视图" FontSize="24" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Grid>
</UserControl>

OrderView.xaml可参考上述结构，替换显示内容即可。

3. 主窗口ViewModel（MainWindowViewModel） #

using System.Windows.Input;

public class MainWindowViewModel : ViewModelBase
{
    private ViewModelBase _currentViewModel;
    public ViewModelBase CurrentViewModel
    {
        get => _currentViewModel;
        set
        {
            _currentViewModel = value;
            OnPropertyChanged();
        }
    }

    public ICommand ShowCustomerListCommand { get; }
    public ICommand ShowOrderCommand { get; }

    public MainWindowViewModel()
    {
        // 默认加载客户列表视图
        CurrentViewModel = new CustomerListViewModel();

        ShowCustomerListCommand = new RelayCommand(() => CurrentViewModel = new CustomerListViewModel());
        ShowOrderCommand = new RelayCommand(() => CurrentViewModel = new OrderViewModel());
    }
}

// 简易RelayCommand实现
public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func<bool>? _canExecute;

    public event EventHandler? CanExecuteChanged;

    public RelayCommand(Action execute, Func<bool>? canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object? parameter) => _canExecute?.Invoke() ?? true;

    public void Execute(object? parameter) => _execute();

    public void RaiseCanExecuteChanged() => CanExecuteChanged?.Invoke(this, EventArgs.Empty);
}

4. 主窗口XAML（MainWindow.xaml） #

核心是在资源中定义带x:DataType的DataTemplate，并正确绑定CurrentViewModel：

<Window
    x:Class="YourApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourApp"
    xmlns:vm="using:YourApp.ViewModels"
    xmlns:views="using:YourApp.Views"
    Title="WinUI3 MVVM导航">

    <Window.Resources>
        <!-- 绑定CustomerListViewModel到对应视图 -->
        <DataTemplate x:DataType="vm:CustomerListViewModel">
            <views:CustomerListView />
        </DataTemplate>
        <!-- 绑定OrderViewModel到对应视图 -->
        <DataTemplate x:DataType="vm:OrderViewModel">
            <views:OrderView />
        </DataTemplate>
    </Window.Resources>

    <Window.DataContext>
        <local:MainWindowViewModel />
    </Window.DataContext>

    <Grid>
        <!-- 导航按钮区 -->
        <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="10">
            <Button Content="客户列表" Command="{Binding ShowCustomerListCommand}" Margin="0 0 10 0"/>
            <Button Content="订单页面" Command="{Binding ShowOrderCommand}"/>
        </StackPanel>

        <!-- 视图展示区 -->
        <ContentControl 
            Content="{Binding CurrentViewModel}"
            Margin="0 50 0 0"/>
    </Grid>
</Window>

关键注意事项 #

• 确保x:DataType对应的命名空间（如vm:）已正确引入ViewModel所在的命名空间
• DataTemplate需定义在全局资源中（Window.Resources、App.xaml的Resources均可），避免嵌套在局部元素资源中导致匹配失效
• 若使用x:Bind绑定CurrentViewModel，需设置Mode=OneWay（默认是OneTime），同时在MainWindow.xaml.cs中声明public MainWindowViewModel ViewModel => (MainWindowViewModel)DataContext;

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