C# 为什么我的数据绑定TabControl看起来不像我的非数据绑定TabControl？

我的非数据绑定TabControl看起来不错：

但是我的数据绑定TabControl如下所示：

公共主视图模型（）
{
AreaNames.Add（新区域{Title=“Area1”，Description=“这是区域1的描述”}）；
AreaNames.Add（新区域{Title=“Area2”，Description=“这是区域2的描述”}）；
AreaNames.Add（新区域{Title=“Area3”，Description=“这是区域3的描述”}）；
}
#区域ViewModelProperty:区域名称
私有ObservableCollection_areaNames=新ObservableCollection（）；
公共可观察收集区域名称
{
得到
{
返回区域名称；
}
设置
{
_区域名称=值；
物业变更（“区域名称”）；
}
}
#端区

---

我需要做什么更改才能使我的数据绑定tabcontrol看起来像常规的非数据绑定tabcontrol？

我认为这里发生的事情是，将整个数据模板设置为TabItem的标题。看看这个链接，它给出了TabControl的标题和内容模板的示例：

TabControl使用两个不同的模板来定义其结构。ItemTemplate用于标题（“选项卡”），ContentTemplate用于每个选项卡下显示的内容

此XAML看起来更像您的第一个屏幕截图：

<Window.Resources>
    <DataTemplate x:Key="TabHeaderTemplate">
        <TextBlock Text="{Binding Title}"/>
    </DataTemplate>

    <DataTemplate x:Key="TabItemTemplate">
        <TextBlock Text="{Binding Description}" Margin="10"/>
    </DataTemplate>
</Window.Resources>

<TabControl Width="225" Height="150" 
            ItemsSource="{Binding AreaNames}"            
            ContentTemplate="{StaticResource TabItemTemplate}"         
            ItemTemplate="{StaticResource TabHeaderTemplate}" />

<Window.Resources>
    <DataTemplate x:Key="TheTabControl">
        <TabItem Header="{Binding Title}">
            <TextBlock Text="{Binding Description}" Margin="10"/>
        </TabItem>
    </DataTemplate>
</Window.Resources>

<TabControl Width="225" Height="150" ItemsSource="{Binding AreaNames}"
            ItemTemplate="{StaticResource TheTabControl}">
</TabControl>

public MainViewModel()
{
    AreaNames.Add(new Area { Title = "Area1", Description = "this is the description for area 1" });
    AreaNames.Add(new Area { Title = "Area2", Description = "this is the description for area 2" });
    AreaNames.Add(new Area { Title = "Area3", Description = "this is the description for area 3" });
}

#region ViewModelProperty: AreaNames
private ObservableCollection<Area> _areaNames = new ObservableCollection<Area>();
public ObservableCollection<Area> AreaNames
{
    get
    {
        return _areaNames;
    }

    set
    {
        _areaNames = value;
        OnPropertyChanged("AreaNames");
    }
}
#endregion

<Window.Resources>
    <DataTemplate x:Key="TabHeaderTemplate">
        <TextBlock Text="{Binding Title}"/>
    </DataTemplate>

    <DataTemplate x:Key="TabItemTemplate">
        <TextBlock Text="{Binding Description}" Margin="10"/>
    </DataTemplate>
</Window.Resources>

<TabControl Width="225" Height="150" 
            ItemsSource="{Binding AreaNames}"            
            ContentTemplate="{StaticResource TabItemTemplate}"         
            ItemTemplate="{StaticResource TabHeaderTemplate}" />