multiple userControl instances in tabControl

Question

I have a tabControl that is bound to an observable collection. In the headerTemplate, I would like to bind to a string property, and in the contentTemplate I have placed a user-control.

Here's the code for the MainWindow.xaml:

<Grid>
    <Grid.Resources>            
        <DataTemplate x:Key="contentTemplate">
                <local:UserControl1 />
        </DataTemplate>

        <DataTemplate x:Key="itemTemplate">
                <Label Content="{Binding Path=Name}" />
        </DataTemplate>
    </Grid.Resources>

    <TabControl IsSynchronizedWithCurrentItem="True" 
                ItemsSource="{Binding Path=Pages}"
                ItemTemplate="{StaticResource itemTemplate}"
                ContentTemplate="{StaticResource contentTemplate}"/>

</Grid>

And its code behind:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = new MainWindowViewModel();
    }        
}

public class MainWindowViewModel
{
    public ObservableCollection<PageViewModel> Pages { get; set; }

    public MainWindowViewModel()
    {
        this.Pages = new ObservableCollection<PageViewModel>();
        this.Pages.Add(new PageViewModel("first"));
        this.Pages.Add(new PageViewModel("second"));
    }
}

public class PageViewModel
{
    public string Name { get; set; }

    public PageViewModel(string name)
    {
        this.Name = name;
    }
}

So the problem in this scenario (having specified an itemTemplate as well as a controlTemplate) is that I only get one instance for the user-control, where I want to have an instance for each item that is bound to.

_"I want to have an instance for each item"_ -- please clarify your need here. _Why_ do you specifically one a new instance for each item? Please be specific: provide a good [mcve] that reliably reproduces your problem, and explain precisely what that code does and how that's different from what you want it to do. _(My apologies for chiming in late...I only ran across this question [answering a different one](http://stackoverflow.com/q/33125188); this may or may not be the same issue I addressed in the other one, so I thought I'd ask for clarification)_. — Peter Duniho, Feb 26 '16 at 22:49

score 3 · Answer 1 · answered Apr 27 '12 at 22:26

Try this:

<TabControl IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Pages}">
    <TabControl.Resources>
        <DataTemplate x:Key="contentTemplate" x:Shared="False">
            <local:UserControl1/>
        </DataTemplate>
        <Style TargetType="{x:Type TabItem}">
            <Setter Property="Header" Value="{Binding Name}"/>
            <Setter Property="ContentTemplate" Value="{StaticResource contentTemplate}"/>
        </Style>
    </TabControl.Resources>
</TabControl>

score 1 · Answer 2 · answered Mar 02 '09 at 10:30

1

Try setting

x:Shared="False"

When set to false, modifies Windows Presentation Foundation (WPF) resource retrieval behavior such that requests for a resource will create a new instance for each request, rather than sharing the same instance for all requests.

answered Mar 02 '09 at 10:30

rudigrobler

17,045
12
60
74

Unfortunately, it doesn't work. I tried setting it on the contentTemplate but no luck. (not even when its defined in a separate resourceDictionary). And I'm not even allowed to set it on the userControl... – Jowen Mar 02 '09 at 12:32
Read this article by Josh Smith (http://joshsmithonwpf.wordpress.com/2009/01/27/my-mvvm-article-in-msdn-magazine/) In this article he host multiple views (usercontrols) in a tabcontrol... – rudigrobler Mar 04 '09 at 06:34
Also look at this article (http://www.dev102.com/2009/03/02/tidy-up-your-xaml-and-code-behind-use-usercontrols-inside-templates/) I found this morning – rudigrobler Mar 04 '09 at 06:37
Thanks for your replies, but in that example of Josh there's still only one instance created for the multiple views in the tabControl :s – Jowen Mar 17 '09 at 10:28

score -1 · Answer 3 · edited Sep 03 '13 at 16:23

-1

You need to override the Equals() Method of your PageViewModel class.

public override bool Equals(object obj)
{
    if (!(obj is PageViewModel)) return false;

    return (obj as PageViewModel).Name == this.Name;
}

Something like this should work.

Now it is looking for the same property of the value Name. Otherwise you could also add a ID Property which is unique.

edited Sep 03 '13 at 16:23

nhahtdh

55,989
15
126
162

answered Sep 03 '13 at 12:12

Johannes Wanzek

2,825
2
29
47

multiple userControl instances in tabControl

3 Answers3

Linked