TabControl Content Binding

[xybschin]

I am trying to bind tabs with dynamic content to a TabControl. I read the guide and tried to adapt to my use case. I created a TabItemViewModel and bound my TabControl.ItemsSource to an array of these in the corresponding view model like this:

<TabControl ItemsSource="{Binding Tabs}">
    <TabControl.ItemTemplate>
        <DataTemplate x:DataType="vm:TabItemViewModel">
            <TextBlock Text="{Binding Header}" />
        </DataTemplate>
    </TabControl.ItemTemplate>
    <TabControl.ContentTemplate>
        <DataTemplate DataType="vm:TabItemViewModel">
            <ContentPresenter Content="{Binding Content}" />
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

public partial class MainWindowViewModel : ViewModelBase

{
    public TabItemViewModel[] Tabs { get; set; } =
    [
        new() { Header = "Tab1", Content = new HomeTabViewModel() },
        new() { Header = "Tab2", Content = new SettingsTabViewModel() }
    ];
}

My view model for the tabs looks like this:

public class TabItemViewModel
{
    public required string Header { get; set; }

    public required ViewModelBase Content { get; set; }
}

with content view models look like this:

public class HomeTabViewModel : ViewModelBase
{
    public string Content => "Home Tab Content";
}

But I am getting the following CastException:

System.InvalidCastException: Unable to cast object of type 'AvaloniaTabControlBinding.ViewModels.HomeTabViewModel' to type 'AvaloniaTabControlBinding.ViewModels.TabItemViewModel'.

What am I getting wrong/missing?

[tobyfirth]

I think you want to use a ContentControl not a ContentPresenter.

ContentPresenter is for use inside of a ControlTemplate when creating a ControlTheme for example Button. Basically if a class has 'Presenter' in the name it is for use with in a ControlTemplate and not for general use in a UserControl.

[xybschin]

Great! Thank you, it worked.