爲什麼我的數據綁定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/