WPF/MVVM Load same UserControl multiple times in tab control - wpf

Question

I'm quite new to WPF/MVVM and have a lot to learn still, but I'm hitting an issue at the moment that i can't seem to find good answers for. Most probably because I'm asking the wrong questions.
What I have:
I have a main form with some buttons which load user controls. One of these user controls contains a TabControl.
This TabControl has a manually populated first Tab, which I've excluded from below snippet, but all other tabs should be populated with another user control, which will load database data depending on its viewmodel constructor.
XAML:
<TabItem Header="Two"
Name="Two"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
<ContentControl cal:View.Model="{Binding LoadedControl}"></ContentControl>
</TabItem>
<TabItem Header="Three"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
<ContentControl cal:View.Model="{Binding LoadedControl}"></ContentControl>
</TabItem>
<TabItem Header="Four"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
<ContentControl cal:View.Model="{Binding LoadedControl}"></ContentControl>
</TabItem>
C#
private DocumentTemplateControlViewModel _loadedControl;
public DocumentTemplateControlViewModel LoadedControl
{
get { return _loadedControl; }
set
{
if (value == _loadedControl)
return;
_loadedControl = value;
NotifyOfPropertyChange(() => LoadedControl);
}
}
public int SelectedTabIndex
{
get
{
return _selectedTabIndex;
}
set
{
Task.Run(() => LoadData());
_selectedTabIndex = value;
LoadedControl = new DocumentTemplateControlViewModel(Templates, _selectedTabIndex);
}
Now, This works as I intended it to work for Tab Two, but if I add the same line of
<ContentControl cal:View.Model="{Binding LoadedControl}">
to Tab Three,Four,etc.. (as I've done in the XAML snippet above) it will only work on the last tab that I've added the binding to, and Tab two,three will be blank.
I also tried to achieve the same thing with Caliburn Micro ActivateItem but this means i can also only declare one ActiveItem in my TabControl XAML as well.
TLDR: What is the best way to dynamically show a new user control viewmodel within a tabitem?
Thanks so much

Answer 1

Derive your view model from Conductor<IScreen>.Collection.OneActive and add the DocumentTemplateControlViewModel objects that you want to bind to the tabs to the Items property:
public class ShellViewModel : Conductor<IScreen>.Collection.OneActive
{
public ShellViewModel()
{
Items.Add(new DocumentTemplateControlViewModel { DisplayName = "1" });
Items.Add(new DocumentTemplateControlViewModel { DisplayName = "2" });
Items.Add(new DocumentTemplateControlViewModel { DisplayName = "3" });
}
}
DocumentTemplateControlViewModel must implement IScreen and the easiest way to do this is to derive from Screen:
public class DocumentTemplateControlViewModel : Screen
{
}
In the XAML you could then simply add a TabControl with a ContentTemplate, e.g.:
<TabControl Name="Items">
<TabControl.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding DisplayName}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
You may replace the TextBlock with a UserControl or any other UI element.