First of all, I'm kind new to WPF and MVVM, so you can expect some crazy mix here, just suggest changes, I'm here to learn.
This question comes as continuation of this one.
I have a TabControl
with some TabItem
's defined in XAML
each of them has his own UserControl
.
XAML
<Window x:Class="WPF.GUI.Views.MainWindow"
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:viewModels="clr-namespace:WPF.GUI.ViewModels"
xmlns:views="clr-namespace:WPF.GUI.Views"
xmlns:mainWindow="clr-namespace:WPF.GUI.ViewModels.MainWindow"
xmlns:model="clr-namespace:WPF.Processing.Model"
xmlns:helpers="clr-namespace:WPF.GUI.Helpers"
mc:Ignorable="d">
<!--#region Resources-->
<Window.Resources>
<DataTemplate DataType="{x:Type viewModels:ResultViewModel}">
<views:ResultView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:ConfigurationViewModel}">
<views:ConfigurationView />
</DataTemplate>
<DataTemplate DataType="{x:Type viewModels:DetailedViewModel}">
<views:DetailedView />
</DataTemplate>
</Window.Resources>
<!--#endregion Resources-->
<!--#region DataContext-->
<Window.DataContext>
<mainWindow:MainWindowViewModel />
</Window.DataContext>
<!--#endregion DataContext-->
<!--#region Main Grid-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--#region Tabs-->
<TabControl>
<TabControl.Resources>
<CollectionViewSource Source="{Binding Model.TabItemsVM}" x:Key="Tabs"/>
<DataTemplate DataType="{x:Type helpers:VMWrap}">
<ContentPresenter Content="{Binding VModel}"/>
</DataTemplate>
</TabControl.Resources>
<TabControl.ItemsSource>
<CompositeCollection>
<!--Result Tab-->
<TabItem Header="Result">
<ContentPresenter Content="{Binding ResultViewModel}"/>
</TabItem>
<!--Configuration Tab-->
<TabItem Header="Configuration">
<ContentPresenter Content="{Binding ConfigViewModel}"/>
</TabItem>
<!--Others-->
<CollectionContainer Collection="{Binding Source={StaticResource Tabs}}"/>
</CompositeCollection>
</TabControl.ItemsSource>
</TabControl>
<!--#endregion-->
</Grid>
<!--#endregion Main Grid-->
</Window>
If I use the example of the answer linked above is working fine, I can create tabs individually and Result Tab and Configuration Tab, stays the same.
However if I use a UserControl
the new TabItem
I create out of my Collection put my UserControl
inside the TabItem.Header
If I do not follow MVVM and I create a ObservableCollection<TabItem>
works as expected, so I assume the problem is on the TabControl.DataTemplate
Any ideas or suggestions would be highly appreciated.
Edit: As I cannot provide a Working example because the complexity of the app and the code involved, I add the following pictures to explain the problem:
Expected View