How to set up a dynamically-populated TabControl with ReactiveUI?

Question

I'm trying to wrap my head around ReactiveUI. Most of it makes some degree of sense if you don't look at it too closely, but when I try to set up a TabControl everything explodes in my face.

I have a TabControl on my Window. I want to be able to add multiple different types of tabs to it dynamically at runtime based on different user actions. This answer explains a standard WPF way to do that, and it almost works, but since it's not ReactiveUI, anytime I try to open a tab with a Reactive view on it, everything blows up because the ViewModel dependency property hasn't been bound.

XAML:

    <Window.Resources>
        <DataTemplate DataType="{x:Type vm:MyTabViewModel}">
            <views:MyTabEditor/>
        </DataTemplate>
    </Window.Resources>
...
        <TabControl Name="Multitab" Grid.Column="2" ItemsSource="{Binding Tabs}">
            <TabControl.ItemContainerStyle>
                <Style TargetType="{x:Type TabItem}">
                    <Setter Property="Header" Value="{Binding Name}" />
                </Style>
            </TabControl.ItemContainerStyle>
        </TabControl>

ViewModel:

        public ObservableCollection<ITabPage> Tabs { get; } = new();

        public void AddNewTab()
        {
            var vm = new MyTabEditorViewModel();
            Tabs.Add(vm);
        }

XAML.cs

        private void NewTab_Executed(object sender, ExecutedRoutedEventArgs e)
        {
            ViewModel.AddNewJob();
            Multitab.SelectedIndex = Multitab.Items.Count - 1;
            var last = Multitab.SelectedIndex;
            this.OneWayBind(ViewModel, vm => vm.Tabs[last], v => GAH WHAT GOES HERE?!?);
        }

And this is the part where I get lost. How do I set up the bindings to bind the new VM to the view that gets created for it? Multitab.SelectedItem returns the VM, not the View, and I can't seem to find any way to obtain the newly-created View object in order to bind it.

Does anyone know how to set this up properly?

Answer 1

Please refer to the below sample code.

Window1.xaml:

<reactiveui:ReactiveWindow x:Class="WpfApp1.Window1"
        x:TypeArguments="local:ViewModel"
        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"
        xmlns:local="clr-namespace:WpfApp1"
        xmlns:reactiveui="http://reactiveui.net"
        mc:Ignorable="d"
        Title="Window1" Height="450" Width="800">
    <Grid>
        <TabControl Name="Multitab">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" />
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <reactiveui:ViewModelViewHost ViewModel="{Binding}" />
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>
    </Grid>
</reactiveui:ReactiveWindow>

Window.xaml.cs:

public partial class Window1 : ReactiveWindow<ViewModel>
{
    public Window1()
    {
        InitializeComponent();
        ViewModel = new ViewModel();

        this.WhenActivated(disposableRegistration =>
        {
            this.OneWayBind(ViewModel,
                viewModel => viewModel.Tabs,
                view => view.Multitab.ItemsSource)
                .DisposeWith(disposableRegistration);
        });
    }
}

View Model:

public class ViewModel
{
    public ObservableCollection<ITabPage> Tabs { get; } = 
        new ObservableCollection<ITabPage>() { new MyTabEditorViewModel() };
}

Tab View Model:

public interface ITabPage { }

public class MyTabEditorViewModel : ITabPage
{
    public string Name { get; } = "Name...";
}

TabView.xaml:

<reactiveui:ReactiveUserControl x:Class="WpfApp1.TabEditorView"
             x:TypeArguments="local:MyTabEditorViewModel"
             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:reactiveui="http://reactiveui.net"
             xmlns:local="clr-namespace:WpfApp1"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBlock>Tab content...</TextBlock>
    </Grid>
</reactiveui:ReactiveUserControl>

TabView.xaml.cs:

public partial class TabEditorView : ReactiveUserControl<MyTabEditorViewModel>
{
    public TabEditorView()
    {
        InitializeComponent();
    }
}