C# WPF MVVM TabItem HeaderTemplate 不起作用？答案

【问题标题】：C# WPF MVVM TabItem HeaderTemplate won't work?C# WPF MVVM TabItem HeaderTemplate 不起作用？
【发布时间】：2017-04-03 02:21:13
【问题描述】：

我目前正在开发一个带有 TabControl 的应用程序，每个选项卡都有一个继承自 ITabViewModel 的 ViewModel，它有两个属性：HeaderText 和 HeaderImage。我希望从每个 ViewModel 设置这些。因此，我尝试使用HeaderTemplate 样式，但这不起作用。谁能告诉我怎样才能让它工作？

<TabControl>
    <TabControl.Resources>
        <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding HeaderImage}" Height="20" Margin="5, 0"/>
                            <TextBlock Text="{Binding HeaderText}"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem DataContext="{Binding ViewModelStart}">

    </TabItem>

    <TabItem DataContext="{Binding ViewModelStartupManager}">

    </TabItem>
</TabControl>

【问题讨论】：

标签： c# wpf mvvm

【解决方案1】：

只需在 ItemTemplate 部分下定义 DataTemplate

 <TabControl>
    <TabControl.ItemTemplate>
        <DataTemplate>
             <StackPanel Orientation="Horizontal">

你的绑定等等

ItemTemplate 是用于格式化 ItemsSource 中的每个项目以创建标题的模板

【讨论】：

【解决方案2】：

我认为您至少有两个选择。

首先（我假设ViewModelStart 和ViewModelStartupManager 是属性）：

 <TabItem Header="{Binding ViewModelStart}">
 <TabItem Header="{Binding ViewModelStartupManager}">

第二，使用ItemsSource 并在 ViewModel 的某个集合中定义您的选项卡。

视图模型：

public ObservableCollection<ITabViewModel> Tabs{ get; set; }

XAML，删除你的TabItem's 并将它们添加到上面的属性中。还将以下属性添加到TabControl：

ItemsSource="{Binding Tabs}"

【讨论】：

我本来想做第二个选项，但是除了标题之外，我该如何添加内容？我在每个选项卡中有很多复杂的元素。我还有一个 DockPanel，它充当每个选项卡中的辅助标题，并且具有与标题相同的属性（图像和文本），以及其他一些看起来不错的属性。

【解决方案3】：

您需要为HeaderTemplate 设置TabItem 的Header 属性才能应用：

<TabItem DataContext="{Binding ViewModelStart}" Header="{Binding}">

</TabItem>

<TabItem DataContext="{Binding ViewModelStartupManager}" Header="{Binding}">

</TabItem>

这行得通：

<TabControl>
    <TabControl.Resources>
        <Style TargetType="TabItem" BasedOn="{StaticResource {x:Type TabItem}}">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding HeaderImage}" Height="20" Margin="5, 0"/>
                            <TextBlock Text="{Binding HeaderText}"/>
                        </StackPanel>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TabControl.Resources>

    <TabItem DataContext="{Binding ViewModelStart}" Header="{Binding}">

    </TabItem>

    <TabItem DataContext="{Binding ViewModelStartupManager}" Header="{Binding}">

    </TabItem>
</TabControl>

【讨论】：