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

Question

fellow programmers. I'm trying to build my first WPF app with tabbed interface. I've decided to not rely on any MVVM framework, since I'm only starting my journey.

I've found quite a few tutorials, but can't make WPF to pick up correct view for viewmodels.

What I have is Shell view, with underlying DataContext with ObservableCollection of my "Tabs viewmodels":

    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>

All I with - to get my views inside tab's of tabcontrol. But, no matter where I put my DataTemplate (window.resources, tabcontrol.resources, etc), I only get something like this:

As I can understand - somehow WPF doesn't see my views, but I don't understand why. My "views" are simple UserControls, like this:

    <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>

and corresponding ViewModel is:

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

Could somebody tell me what's wrong with my code?

Edit:

ShellViewModel:

        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;
        }
    }
}

App.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

The DataTemplate definition is incorrect. You must use curly braces for x:Type markup extension with DataType attribute value:

<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>