WPF + Caliburn Micro + MVVM: TabItem handling

Question

I am trying to make a popup window which contains tabcontrol using WPF, Caliburn Micro and MVVM pattern, no need to use code behind in this case. The tabcontrol contains more than 1 tabitem. After digging some threads in SO for a while I combine the found solutions and can create the popup window and fill it with tabcontrol and its tabitems ( I take it from this thread ).

Problem: the tabitems show content (text) from view model but show no content from view. Please take a look the code attached here.

Expected I expect to see the text "Tab Item 1" as TabItem1 header and the text "Selection One" as content in TabItem1. Right now both the header and the content of TabItems contains same text "Tab Item 1".

Am I missing something? I attach here the code. Please feel free change the code. Any hints are highly appreciated.

Sequence of code:

• TabItem1, TabItem2 view and viewmodel
• ITabItem
• PopUp window view and viewmodel
• AppBootstrapper, Shell view and viewmodel

TabItem1ViewModel (TabItem2ViewModel has same content)

public class TabItem1ViewModel : Screen, ITabItem
{
    public TabItem1ViewModel() => DisplayName = "Tab Item 1";
}

Attention: in following TabItem view I use Label to show the text "Selection One", but this text doesn't appear at all. Only the display name "Tab Item 1" defined in view model appears as content of TabItem1

TabItem1View (TabItem2View has same content)

<UserControl
    x:Class="CmTabControl.Views.TabItem1View"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <Grid>
        <TabItem x:Name="TabItem1" Header="{Binding Path=DisplayName}">
            <Grid x:Name="TabItem1ContentGrid">
                <Label HorizontalAlignment="Left"                     
                    VerticalAlignment="Top"
                    Content="Selection One" />
            </Grid>
        </TabItem>
    </Grid>
</UserControl>

ITabItem (yes, it is only empty interface)

public interface ITabItem : IScreen
{
}

PopUpViewModel

public class PopUpViewModel : Screen
{
    public PopUpViewModel()
    {
        TabItems.Add(new TabItem1ViewModel());
        TabItems.Add(new TabItem2ViewModel());
    }

    private readonly BindableCollection<ITabItem> _tabItems = new BindableCollection<ITabItem>();
    public BindableCollection<ITabItem> TabItems
    {
        get => _tabItems;
        set
        {
            if (_tabItems == null)
            {
                return;
            }
            _tabItems.Clear();
            _tabItems.AddRange(value);
            NotifyOfPropertyChange(() => TabItems);
        }
    }
}

PopUpView

<Window
    x:Class="CmTabControl.Views.PopUpView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:CmTabControl.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="PopUpView"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid Margin="3,8,3,3" HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <TabControl x:Name="TabItems" />
    </Grid>
</Window>

AppBootstrapper

public class AppBootstrapper : BootstrapperBase
{
    private readonly SimpleContainer _container = new SimpleContainer();

    public AppBootstrapper() => Initialize();
    protected override object GetInstance(Type serviceType, string key) => _container.GetInstance(serviceType, key);
    protected override IEnumerable<object> GetAllInstances(Type serviceType) => _container.GetAllInstances(serviceType);
    protected override void BuildUp(object instance) => _container.BuildUp(instance);

    protected override void Configure()
    {
        base.Configure();

        _container.Singleton<IWindowManager, WindowManager>();
        _container.Singleton<IEventAggregator, EventAggregator>();
        _container.Singleton<ShellViewModel>();
        _container.PerRequest<PopUpViewModel>(); // Or Singleton if there'll only ever be one
    }

    protected override void OnStartup(object sender, StartupEventArgs e)
    {
        base.OnStartup(sender, e);
        DisplayRootViewFor<ShellViewModel>();
    }
}

ShellViewModel

public class ShellViewModel : Conductor<object>.Collection.AllActive
{
    private IWindowManager _windowManager;

    public ShellViewModel(PopUpViewModel popUpVm)
    {
        DisplayName = "Shell Window";
        PopUpViewModel = popUpVm;
    }

    public PopUpViewModel PopUpViewModel { get; set; }

    public sealed override void ActivateItem(object item) => base.ActivateItem(item);

    public void OpenPopUp()
    {
        ActivateItem(PopUpViewModel);
        if (_windowManager == null) _windowManager = new WindowManager();
        _windowManager.ShowDialog(PopUpViewModel, null, null);
    }

    public sealed override string DisplayName { get; set; }
}

ShellView

<UserControl
    x:Class="CmTabControl.Views.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    d:DesignHeight="300"
    d:DesignWidth="300"
    mc:Ignorable="d">
    <Grid Width="300" Height="300"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="OpenPopUp" Width="100" Height="35"
            Content="Open Popup" />
    </Grid>
</UserControl>

Added: Screenshot of Live Visual Tree.

Answer 1

I found a solution that uses Templates:

PopUpViewModel add SelectedTab :

public sealed class PopUpViewModel : Screen
{
    private readonly BindableCollection<ITabItem> _tabItems = new BindableCollection<ITabItem>();
    private IScreen _selectedTab;


    public PopUpViewModel()
    {
        DisplayName = "Popup";
        TabItems.Add(new TabItem1ViewModel());
        TabItems.Add(new TabItem2ViewModel());
        SelectedTab = TabItems.FirstOrDefault();
    }


    public BindableCollection<ITabItem> TabItems
    {
        get => _tabItems;
        set
        {
            if(_tabItems == null)
                return;
            _tabItems.Clear();
            _tabItems.AddRange(value);
            NotifyOfPropertyChange(() => TabItems);
        }
    }

    public IScreen SelectedTab
    {
        get => _selectedTab;
        set
        {
            _selectedTab = value;
            NotifyOfPropertyChange();
        }
    }
}

PopUpView :

<Grid Margin="3, 8, 3, 3"
      HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch">
    <TabControl ItemsSource="{Binding TabItems}"
                SelectedItem="{Binding SelectedTab,
                               UpdateSourceTrigger=PropertyChanged}">
        <TabControl.ItemTemplate>
            <DataTemplate>
                <Label Content="{Binding DisplayName}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                <ContentControl cal:View.Model="{Binding}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Grid>

Now you only add the TabItem content to your pages, TabItem1View :

<UserControl x:Class="WpfTestApp.Views.Tabs.TabItem1View"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:WpfTestApp.Views.Tabs"
             mc:Ignorable="d"
             d:DesignHeight="450"
             d:DesignWidth="800">

    <Grid x:Name="TabItem1ContentGrid">
        <Label HorizontalAlignment="Left"
               VerticalAlignment="Top"
               Content="Selection One" />
    </Grid>
</UserControl>

Edit:

SelectedTab is just there so the first tab is selected by default.