如何在 TabControl.ContentTemplate 中添加新的用户控件？答案

【问题标题】：How to add new user control in TabControl.ContentTemplate?如何在 TabControl.ContentTemplate 中添加新的用户控件？
【发布时间】：2011-09-09 02:00:30
【问题描述】：

在TabControl.ContentTemplate 中添加用户控件的新实例时，我很少坚持？

我的 Xaml 在这里：

<TabControl ItemsSource="{Binding Tables}">
    <TabControl.ItemTemplate>
        <DataTemplate>

        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="{x:Type uc:mytest1}">
            <uc:mytest1>

            </uc:mytest1>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

我将TabControl.ItemsSource 属性绑定到ObservableCollection 并在内容模板中添加一个用户控件，但是当这个应用程序运行时，我得到了TabItems 的新项目，但内容页面包含相同的用户控件，但我希望为每个新的TabItem 添加新的用户控件。

我对 WPF 很陌生，可能我犯了一个非常基本的错误，请指导我。

【问题讨论】：

标签： wpf templates tabcontrol

【解决方案1】：

ControlTemplate 确定不属于单个选项卡项的选项卡控件元素的外观。 ItemTemplate 处理各个选项卡项的内容。此外，TabItem 是一个带标题的内容控件，这意味着它具有两个内容类型属性 Content 和 Header 以及两个单独的模板 ContentTemplate 和 HeaderTemplate。为了能够使用绑定填充选项卡项，您需要使用上述属性设置 TabItem 的样式。

例子：

<Window x:Class="Example.Window2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Name="Window"
    Title="Window2" Height="300" Width="300">
    <Window.DataContext>
        <Binding ElementName="Window" Path="VM"/>
    </Window.DataContext>
    <Window.Resources>
        <DataTemplate x:Key="TabItemHeaderTemplate">
            <Grid>
                <TextBlock Text="{Binding Header}"/>
                <Ellipse Fill="Red" Width="40" Height="40" Margin="0,20,0,0"/>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="TabItemContentTemplate">
            <Ellipse Fill="Green"/>
        </DataTemplate>
        <Style x:Key="TabItemContainerStyle" TargetType="TabItem">
            <Setter Property="Header" Value="{Binding}"/>
            <Setter Property="HeaderTemplate" 
                    Value="{StaticResource TabItemHeaderTemplate}"/>
            <Setter Property="Content" Value="{Binding}"/>
            <Setter Property="ContentTemplate" 
                    Value="{StaticResource TabItemContentTemplate}"/>
        </Style>
    </Window.Resources>
    <Grid>
        <TabControl ItemsSource="{Binding Items}" 
                    ItemContainerStyle="{StaticResource TabItemContainerStyle}"/>
    </Grid>
</Window>

背后的代码：

public partial class Window2 : Window
{
    public TabControlVM VM { get; set; }

    public Window2()
    {
        VM = new TabControlVM();
        InitializeComponent();
    }
}

以及视图模型类：

public class TabControlVM
{
    public ObservableCollection<TabItemVM> Items { get; set; }

    public TabControlVM()
    {
        Items = new ObservableCollection<TabItemVM>();
        Items.Add(new TabItemVM("tabitem1"));
        Items.Add(new TabItemVM("tabitem2"));
        Items.Add(new TabItemVM("tabitem3"));
        Items.Add(new TabItemVM("tabitem4"));
    }
}

public class TabItemVM
{
    public string Header { get; set; }

    public TabItemVM(string header)
    {
        Header = header;
    }
}

【讨论】：

【解决方案2】：

Saurabh，当您设置模板时，通常是 DataTemplate、ControlTemplate 等，这些模板中的可视元素在 WPF 中以 UI 虚拟化的概念重用。 TabControl 通常一次只显示一项，因此它不会为每个选项卡项创建新的可视项，而是仅更改该 DataContext 并刷新“选定可视项”的绑定。它的加载/卸载事件被触发，但对象始终相同。

您可以使用加载/卸载事件并相应地编写代码，以便您的“可视元素”是您的用户控件，因此该控件应该是无状态的并且不依赖于旧数据。应用新的 DataContext 后，您应该刷新所有内容。

DataContextChanged、Loaded 和 Unloaded 事件可以帮助您消除对旧数据的所有依赖。

否则，您需要手动创建一个新的 TabItem，并将您的 UserControl 作为其子项，并将其添加到 TabControl 中，而不是添加数据项。

手动添加 TabItems 将为每个项目创建新控件，并且在选定区域中将根据选择显示不同的元素。

【讨论】：