WPF 隐式数据模板不显示视图

Question

程序员小伙伴。我正在尝试使用选项卡式界面构建我的第一个 WPF 应用程序。我决定不依赖任何 MVVM 框架，因为我才刚刚开始我的旅程。

我找到了很多教程，但无法让 WPF 为视图模型选择正确的视图。

我拥有的是 Shell 视图，底层 DataContext 带有我的“选项卡视图模型”的 ObservableCollection：

    Shell.Xaml
    <Controls:MetroWindow x:Class="WpfApplication1.View.Shell"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Shell" Height="327" Width="667"
    xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
    xmlns:v="clr-namespace:WpfApplication1.View"
    xmlns:vm="clr-namespace:WpfApplication1.ViewModel"
    >
<Grid>
    <TabControl ItemsSource="{Binding Pages}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding DisplayName}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.Resources>
            <DataTemplate DataType="x:Type vm:FirstPageModel">
                <v:FirstPageView />
            </DataTemplate>
            <DataTemplate DataType="x:Type vm:SecondPageModel">
                <v:SecondPageView />
            </DataTemplate>
        </TabControl.Resources>
    </TabControl>
</Grid>

我所拥有的 - 在 tabcontrol 的选项卡中获取我的视图。但是，无论我将 DataTemplate 放在哪里（window.resources、tabcontrol.resources 等），我都只会得到如下内容：

据我所知 - 不知何故，WPF 没有看到我的观点，但我不明白为什么。我的“视图”是简单的用户控件，如下所示：

    <UserControl x:Class="WpfApplication1.View.FirstPageView"
         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" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<Grid>
    <TextBlock Text="{Binding Message}" Margin="36,131,47,127" />  
</Grid>

和相应的 ViewModel 是：

        public class FirstPageModel:BaseViewModel
            {
                public override string DisplayName
                {
                    get
                    {
                        return "First page";
                    }
                }
                public string Message { get { return "Hi from " + DisplayName; } }
            }

有人能告诉我我的代码有什么问题吗？

编辑：

外壳视图模型：

        public class ShellViewModel : BaseViewModel
{
    public override string DisplayName
    {
        get
        {
            return "First";
        }
    }
    private ObservableCollection<BaseViewModel> pages;
    public ObservableCollection<BaseViewModel> Pages
    {
        get{
            if(this.pages==null)
            {
                this.pages = new ObservableCollection<BaseViewModel>{
                    new FirstPageModel(),
                    new SecondPageModel()
                };
            }
            return this.pages;
        }
    }
}

应用程序.xaml.cs：

public partial class App : Application
{
    protected override void OnStartup(StartupEventArgs e)
    {
        base.OnStartup(e);
        Shell sh = new Shell();
        ShellViewModel shvm = new ShellViewModel();
        sh.DataContext = shvm;
        sh.Show();
    }
}

Answer 1

该DataTemplate定义不正确。您必须使用花括号作为x:Type具有DataType属性值的标记扩展：

<TabControl ItemsSource="{Binding Pages}">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding DisplayName}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.Resources>
        <!-- Use curly braces for x:Type markup extension -->
        <DataTemplate DataType="{x:Type vm:FirstPageModel}">
            <v:FirstPageView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type vm:SecondPageModel}">
            <v:SecondPageView />
        </DataTemplate>
    </TabControl.Resources>
</TabControl>