How to add new user control in TabControl.ContentTemplate?

Question

Hi

i am little stuck with adding new instances of a usercontrol in TabControl.ContentTemplate?

my Xaml is here

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

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

i am binding TabControl.ItemSource property to a obserablecollection and in content template i am adding a user control but when this app runs i am getting new item as tabitems but the content page is holding same user control but i want new user controls to be added for each new tabitem.

i am very new to the WPF and may be i am doing very basic mistake, kindly guide me.

Answer 1

The ControlTemplate determines the appearance of the elements of the tab control that are not part of the individual tab items. The ItemTemplate handles the content of the individual tab items. Additionally, a TabItem is a headered content control, which means it has two content type properties Content and Header with two separate templates ContentTemplate and HeaderTemplate. In order to be able to populate the tab items using binding, you need to style the TabItem 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>

The code behind:

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

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

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

Aviad ,

Thanks for your reply but your answer does not fullfilling my condition. i need to add a new user control ( i have a usercontrol SearchControl) and i want to add this control for each tab item created and this new tab item need to be added for TabControl.Contenttemplate.

i have tried your solution in my problem but no luck. i have modified this line

DataTemplate x:Key="TabItemContentTemplate"> Ellipse Fill="Green"/> /DataTemplate>

with DataTemplate x:Key="TabItemContentTemplate"> my USer Control> /DataTemplate> and i put breakpoint in the public constructor of my usercontrol so first time when i select any tab item that break point fiers but for subsequent tab items it never fires. so it give me only one user control for all tabitems's contenttemplate.

but thanks for your help, looking forward for ur reply.

Answer 3

Saurabh, When you set Template, usually DataTemplate, ControlTemplate etc, the visual elements inside these templates are reused in WPF with concept of UI Virtualization. TabControl typically displays only one item at a time, so it does not create new Visual Item for every tab item, instead it only changes that DataContext and refreshes bindings of "Selected Visual Item". Its loaded/unloaded events are fired, but the object is same always.

You can use loaded/unload events and write your code accordingly that your "Visual Element" which is your usercontrol, so that control should be stateless and is not dependent on old data. When new DataContext has applied you should refresh everything.

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

Otherwise, you an create a new TabItem manually with your UserControl as its Child and add it in TabControl instead of adding Data Items.

Adding TabItems manually will create new control for every item and in selected area different elements will appear based on selection.