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

【问题标题】：Why does my databound TabControl not look like my non-databound TabControl?为什么我的数据绑定 TabControl 看起来不像我的非数据绑定 TabControl？
【发布时间】：2009-06-12 00:22:03
【问题描述】：

我的非数据绑定 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>

但我的 databound 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

我必须进行哪些更改才能使我的数据绑定选项卡控件看起来像我的常规非数据绑定选项卡控件？

【问题讨论】：

标签： c# wpf xaml data-binding tabcontrol

【解决方案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}" />

【讨论】：

【解决方案2】：

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

【讨论】：