Question

我很难在TabControl.ContentTemplate中添加新的usercontrol实例？

我的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，在内容模板中我添加了一个用户控件，但是当这个应用程序运行时，我得到的新项目为TabItem但是内容页面持有相同的用户控件，但我希望为每个新TabItem添加新的用户控件。

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

Answer 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;
    }
}

Answer 2

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

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

DataContextChanged，Loaded和Unloaded事件可以帮助您删除旧数据的所有依赖项。

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

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

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

2 个答案: