How to add a new user control to TabControl.ContentTemplate?

Question

Am I a little stuck in adding new instances of usercontrol in TabControl.ContentTemplate ?

My haml is here:

 <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> 

I bind the TabControl.ItemsSource property to an ObservableCollection , and add a user control in the content template, but when this application starts, I get new elements like TabItem , but the same user control is performed on the content page, but I want to add new user controls for each new TabItem .

I am very new to WPF and maybe I am making a very basic mistake, kindly directing me.

Answer 1

ControlTemplate defines the appearance of tab control elements that are not part of individual tabs. ItemTemplate processes the contents of individual tab elements. In addition, TabItem is a title-controlled content control, which means that it has two properties, such as Content and Header with two separate templates, ContentTemplate and HeaderTemplate . To be able to fill tabs using anchors, you need to create a TabItem style using the above properties.

Example:

 <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> 

Code behind:

 public partial class Window2 : Window { public TabControlVM VM { get; set; } public Window2() { VM = new TabControlVM(); InitializeComponent(); } } 

And view model classes:

 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. When you install a Template, usually a DataTemplate, ControlTemplate, etc., the visual elements inside these templates are reused in WPF with the concept of user interface virtualization. TabControl usually only displays one item at a time, so it does not create a new visual item for each tab item, instead, it only changes the DataContext and updates the "Selected Visual Item" bindings. Its loaded / unloaded events are fired, but the object is always the same.

You can use load / unload events and write your code accordingly so that your “Visual Element”, which is your user control, so that the control is not stateless and does not depend on old data. When the new DataContext is applied, you must update everything.

The DataContextChanged, Loaded, and Unloaded events can help you remove all dependencies on old data.

Otherwise, you will create a new TabItem manually using UserControl as your child and add it to TabControl instead of adding data items.

Adding TabItems manually will create a new control for each item, and various items based on the selection will be displayed in the selected area.