WPF MVVM下ContentControl无法渲染UserControl，显示ViewModel字符串

我是WPF和MVVM新手，已经花两天查Stack Overflow的问答，但还是没解决问题，肯定是漏了某个简单的点。

我想用DataTemplate结合ContentControl，在切换Fluent Ribbon标签时切换内容区域的DataGrid，而且因为DataGrid填充成本高，希望能复用视图。

我的视图/ViewModel结构：

• MainWindow.xaml / MainWindowViewModel.cs：主窗口，包含Fluent Ribbon相关控件。类里有跟踪当前内容的CurrentViewModel属性，处理Ribbon按钮点击的命令，其他ViewModel作为私有成员在这里实例化。
• ProviderView.xaml / ProviderViewModel.cs：显示Providers列表，视图是包含DataGrid的UserControl，DataGrid绑定到MainWindowViewModel里ProviderViewModel实例的Providers属性。

现在运行时（设计器里也一样），ContentControl只显示字符串ViewModel.ProviderViewModel，就像它不知道该怎么渲染对应的控件，或者我的层级设置错了。

现有代码片段 #

MainWindow.xaml #

<Fluent:RibbonWindow x:Class="MainWindow"
                     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:vm="clr-namespace:ViewModel"
                     xmlns:local="clr-namespace:MyProgram"
                     xmlns:Fluent="urn:fluent-ribbon"
                     mc:Ignorable="d"
                     Width="800" 
                     Height="600"
                     Name="MainRibbonWindow"
                     Icon="{DynamicResource logo}">
    <Fluent:RibbonWindow.Resources>
        <DataTemplate x:Key="g_ProviderViewModel" DataType="{x:Type vm:ProviderViewModel}">
            <local:ProviderView/>
        </DataTemplate>
    </Fluent:RibbonWindow.Resources>
    <Fluent:RibbonWindow.DataContext><vm:MainWindowViewModel/></Fluent:RibbonWindow.DataContext>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Fluent:Ribbon VerticalAlignment="Top"
                       IsDisplayOptionsButtonVisible="False"
                       Name="MainWindowRibbon"
                       SelectedTabChanged="MainWindowRibbon_SelectedTabChanged">

            <!--Tabs-->
            <Fluent:RibbonTabItem Header="Providers" Name="ProvidersTab">
                <Fluent:RibbonGroupBox Header="Options" Width="120">
                    <Fluent:Button Header="Refresh"
                                   Icon="{DynamicResource refresh}"
                                   Command="{Binding LoadProvidersCommand}"/>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>            
        </Fluent:Ribbon>
        <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="1">
            <ContentControl Content="{Binding CurrentViewModel}"/>
        </StackPanel>
    </Grid>
</Fluent:RibbonWindow>

MainWindowViewModel.cs #

namespace MyProgram.ViewModel
{
    class MainWindowViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private ViewModelBase _CurrentViewModel;
        public ViewModelBase CurrentViewModel
        {
            get => _CurrentViewModel;
            set
            {
                _CurrentViewModel = value;
                OnPropertyChanged("CurrentViewModel");
            }
        }

        public ProviderViewModel m_ProviderViewModel = new ProviderViewModel();
        private ProviderManifestViewModel m_ProviderManifestViewModel = new ProviderManifestViewModel();

        private ICommand _loadProvidersCommand;
        public ICommand LoadProvidersCommand
        {
            get
            {
                return _loadProvidersCommand ?? (_loadProvidersCommand = new AsyncRelayCommand(Command_LoadProviders, GlobalUiCanExecute));
            }
        }

        private AsyncRelayCommand<Guid> _loadProviderCommand;
        public AsyncRelayCommand<Guid> LoadProviderCommand
        {
            get
            {
                return _loadProviderCommand ?? (_loadProviderCommand = new AsyncRelayCommand<Guid>(Command_LoadProvider));
            }
        }

        public MainWindowViewModel()
        {
            CurrentViewModel = m_ProviderViewModel;
        }

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

        public void ShowProviderViewModel()
        {
            CurrentViewModel = m_ProviderViewModel;
        }

        private async Task Command_LoadProviders()
        {
            g_UiBusy = true;
            CurrentViewModel = m_ProviderViewModel;
            await m_ProviderViewModel.LoadProviders();
            g_UiBusy = false;
        }

        private async Task<MyProvider?> Command_LoadProvider(Guid Id)
        {
            if (!GlobalUiCanExecute())
            {
                return null;
            }
            g_UiBusy = true;
            var provider = await m_ProviderViewModel.LoadProvider(Id);
            g_UiBusy = false;
            return provider;
        }
    }
}

ProviderView.xaml #

<UserControl x:Class="MyProgram.ProviderView"
             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:MyProgram.ViewModel"
             xmlns:Fluent="urn:fluent-ribbon"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             Name="ProviderViewControl">
    <UserControl.DataContext><local:MainWindowViewModel/></UserControl.DataContext>
    <Grid Name="ProvidersGrid">
        <DataGrid Name="ProvidersDataGrid"
                  IsReadOnly="true"
                  AutoGenerateColumns="false"
                  ItemsSource="{Binding m_ProviderViewModel.Providers}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="ID" Binding="{Binding Id}"/>
                <DataGridTextColumn Header="Name" Binding="{Binding Name}" />
                <DataGridTextColumn Header="Source" Binding="{Binding Source}" />
            </DataGrid.Columns>
        </DataGrid>
    </Grid>
</UserControl>

ProviderViewModel.cs #

namespace MyProgram.ViewModel
{
    class ProviderViewModel : ViewModelBase
    {
        private ObservableCollection<MyProvider> _providers;
        public ObservableCollection<MyProvider> Providers
        {
            get => _providers;
            set
            {
                _providers = value;
                OnPropertyChanged("Providers");
            }
        }

        public ProviderViewModel()
        {
            _providers = new ObservableCollection<MyProvider>();
        }

        public async Task LoadProviders()
        {
            var providers = await ProviderLoader.GetProviders();
            if (providers == null)
            {
                return;
            }
            providers.ForEach(f => Providers.Add(f));
        }
    }
}

问题根源及修复步骤 #

1. DataTemplate命名空间与匹配规则错误 #

MainWindow.xaml中vm命名空间指向的是clr-namespace:ViewModel，但你的ProviderViewModel实际在MyProgram.ViewModel下，导致WPF无法将DataTemplate和ViewModel匹配；同时给DataTemplate加了x:Key，会让WPF自动匹配逻辑失效，只能默认显示ViewModel的ToString()结果。

修改MainWindow.xaml：

<!-- 修正命名空间指向正确的ViewModel所在位置 -->
xmlns:vm="clr-namespace:MyProgram.ViewModel"

<!-- 移除x:Key，让WPF自动根据DataType匹配视图 -->
<Fluent:RibbonWindow.Resources>
    <DataTemplate DataType="{x:Type vm:ProviderViewModel}">
        <local:ProviderView/>
    </DataTemplate>
</Fluent:RibbonWindow.Resources>

2. ProviderView硬编码DataContext导致绑定失效 #

你在ProviderView中直接创建了新的MainWindowViewModel实例作为DataContext，覆盖了ContentControl传递过来的ProviderViewModel；同时绑定的是私有字段m_ProviderViewModel，WPF绑定系统无法访问私有成员。

修改ProviderView.xaml：

<!-- 删除硬编码的DataContext，让ContentControl自动传递当前ViewModel -->
<!-- <UserControl.DataContext><local:MainWindowViewModel/></UserControl.DataContext> -->

<!-- 直接绑定到当前DataContext（即ProviderViewModel）的Providers属性 -->
<DataGrid Name="ProvidersDataGrid"
          IsReadOnly="true"
          AutoGenerateColumns="false"
          ItemsSource="{Binding Providers}">

3. 规范ViewModel成员访问（可选但推荐） #

将MainWindowViewModel中的私有字段改为公共属性，符合MVVM规范，避免后续绑定问题：

修改MainWindowViewModel.cs：

// 替换原有的公共字段为私有字段+公共属性
private ProviderViewModel _providerViewModel = new ProviderViewModel();
public ProviderViewModel ProviderViewModel
{
    get => _providerViewModel;
    set
    {
        _providerViewModel = value;
        OnPropertyChanged();
    }
}

// 构造函数和命令中同步修改引用
public MainWindowViewModel()
{
    CurrentViewModel = ProviderViewModel;
}

private async Task Command_LoadProviders()
{
    g_UiBusy = true;
    CurrentViewModel = ProviderViewModel;
    await ProviderViewModel.LoadProviders();
    g_UiBusy = false;
}

验证修复 #

修改完成后运行程序：

• ContentControl会自动根据CurrentViewModel的类型匹配DataTemplate，渲染ProviderView
• ProviderView的DataContext自动继承为当前的ProviderViewModel实例，DataGrid可正确绑定到Providers属性
• 切换标签时只需修改CurrentViewModel的值，即可复用已实例化的ViewModel和视图，避免重复创建DataGrid

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