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

Question

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

alt text http://tanguay.info/web/external/tabControlPlain.png

<TabControl Width="225" Height="150"> 
    <TabItem Header="One"> 
     <TextBlock Margin="10" Text="This is the text block"/> 
    </TabItem> 
    <TabItem Header="Two"/> 
    <TabItem Header="Three"/> 
    <TabItem Header="Four"/> 
</TabControl> 

但我数据绑定的TabControl看起来是这样的：

alt text http://tanguay.info/web/external/tabBound.png

<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 

我必须改变什么，以便我的databound tabcontrol看起来像我的常规非databound tabcontrol？

Answer 1

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}" /> 

Answer 2

我认为这里发生的是整个DataTemplate设置为TabItem的Header。看看这个链接，它给出了TabControl的Header和ContentTemplate的示例：http://psiman.wordpress.com/2006/12/07/databound-master-detail-tabcontrol/