How to fix this behavior in a WPF TabControl?

Question

I have a WPF .NET Core 5.0 project which has a TabControl that I can add a new TabItem by clicking on a Button represented as [+].

MainWindow.cs:

using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        int TabIndex = 1;
        ObservableCollection<TabVM> Tabs = 
            new ObservableCollection<TabVM>();
        public MainWindow()
        {
            InitializeComponent();
            var tab1 = new TabVM()
            {
                Header = $"Tab {TabIndex}"
            };
            Tabs.Add(tab1);
            AddNewPlusButton();

            MyTabControl.ItemsSource = Tabs;
            MyTabControl.SelectionChanged += 
                MyTabControl_SelectionChanged;

        }

        private void MyTabControl_SelectionChanged(object sender, 
            SelectionChangedEventArgs e)
        {
            if (e.Source is TabControl)
            {
                var pos = MyTabControl.SelectedIndex;
                if (pos != 0 && pos == Tabs.Count - 1) //last tab
                {
                    var tab = Tabs.Last();
                    ConvertPlusToNewTab(tab);
                    AddNewPlusButton();
                }
            }
        }

        void ConvertPlusToNewTab(TabVM tab)
        {
            //Do things to make it a new tab.
            TabIndex++;
            tab.Header = $"Tab {TabIndex}";
            tab.IsPlaceholder = false;
        }

        void AddNewPlusButton()
        {
            var plusTab = new TabVM()
            {
                Header = "+",
                IsPlaceholder = true
            };
            Tabs.Add(plusTab);
        }

        class TabVM : INotifyPropertyChanged
        {
            string _Header;
            public string Header
            {
                get => _Header;
                set
                {
                    _Header = value;
                    OnPropertyChanged();
                }
            }

            bool _IsPlaceholder = false;
            public bool IsPlaceholder
            {
                get => _IsPlaceholder;
                set
                {
                    _IsPlaceholder = value;
                    OnPropertyChanged();
                }
            }

            public event PropertyChangedEventHandler PropertyChanged;
            void OnPropertyChanged([CallerMemberName] string property = "")
            {
                PropertyChanged?.Invoke(this, 
                    new PropertyChangedEventArgs(property));
            }
        }

        private void OnTabCloseClick(object sender, RoutedEventArgs e)
        {
            var tab = (sender as Button).DataContext as TabVM;
            if (Tabs.Count > 2)
            {
                var index = Tabs.IndexOf(tab);
                if (index == Tabs.Count - 2)//last tab before [+]
                {
                    MyTabControl.SelectedIndex--;
                }
                Tabs.RemoveAt(index);
            }
        }
    }
}

XAML:

<TabControl x:Name="MyTabControl">
    <TabControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Header, Mode=OneWay}"/>
                <Button Click="OnTabCloseClick" 
                        Width="20" 
                        Padding="0" 
                        Margin="8 0 0 0" 
                        Content="X">
                    <Button.Style>
                        <Style TargetType="Button" 
                               x:Key="CloseButtonStyle">
                            <Setter Property="Visibility" 
                                    Value="Visible"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsPlaceholder}" 
                                             Value="True">
                                    <Setter Property="Visibility" 
                                            Value="Collapsed"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </StackPanel>
        </DataTemplate>
    </TabControl.ItemTemplate>    
    <TabControl.ContentTemplate>
        <DataTemplate>
            <ContentControl>
                <ContentControl.Resources>
                    <ContentControl x:Key="TabContentTemplate">
                        <Grid>
                            <Label Content="Enter your text here:" 
                                    HorizontalAlignment="Left" 
                                    Margin="30,101,0,0" 
                                    VerticalAlignment="Top" 
                                    Width="298" 
                                    FontSize="18"/>
                            <RichTextBox HorizontalAlignment="Left"
                                            Height="191" 
                                            Margin="8,135,0,0" 
                                            VerticalAlignment="Top" 
                                            Width="330">
                                <FlowDocument/>
                            </RichTextBox>
                        </Grid>
                    </ContentControl>
                </ContentControl.Resources>
                <ContentControl.Style>
                    <Style TargetType="ContentControl">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding IsPlaceholder}" 
                                            Value="True">
                                <Setter Property="Content"
                                        Value="{x:Null}"/>
                            </DataTrigger>
                            <DataTrigger Binding="{Binding IsPlaceholder}" 
                                            Value="False">
                                <Setter Property="Content"
                                        Value="{StaticResource TabContentTemplate}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </DataTemplate>
    </TabControl.ContentTemplate>
</TabControl>

In the XAML I set a Grid in the ContentControl TabContentTemplate, but any control of the Grid like that RichTextBox if I change its text so it reflects to the RichTextBox of all tabs. How to add a Grid there without reflecting its control values to the other tabs?

The gif below shows the problem, whatever I type in the RichTextBox reflects in the other tabs.

Answer 1

A simplified example.

Collection item:

using Simplified;

namespace AddTabItem
{
    public class TabVm : BaseInpc
    {
        string _header;
        bool _isPlaceholder;
        private string _text;

        public string Header { get => _header; set => Set(ref _header, value); }

        public bool IsPlaceholder { get => _isPlaceholder; set => Set(ref _isPlaceholder, value); }

        public string Text { get => _text; set => Set(ref _text, value); }
    }
}

ViewModel:

using Simplified;
using System.Collections.ObjectModel;

namespace AddTabItem
{
    public class TabsCollectionViewModel : BaseInpc
    {
        private TabVm _selectedTab;
        private RelayCommand _addNewTabCommand;
        private RelayCommand _removeTabCommand;

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

        public TabVm SelectedTab { get => _selectedTab; set => Set(ref _selectedTab, value); }

        public RelayCommand AddNewTabCommand => _addNewTabCommand
            ?? (_addNewTabCommand = new RelayCommand(
                () =>
                {
                    TabVm tab = new TabVm() { Header = $"Tab{Tabs.Count}" };
                    Tabs.Add(tab);
                    SelectedTab = tab;
                }));

        public RelayCommand RemoveTabCommand => _removeTabCommand
            ?? (_removeTabCommand = new RelayCommand<TabVm>(
                tab =>
                {
                    int index = Tabs.IndexOf(tab);
                    if (index >= 0)
                    {
                        Tabs.RemoveAt(index);
                        if (index >= Tabs.Count)
                            index = Tabs.Count - 1;
                        if (index < 0)
                            SelectedTab = null;
                        else
                            SelectedTab = Tabs[index];
                    }
                },
                tab => Tabs.Contains(tab)));
    }
}

Window XAML:

<Window x:Class="AddTabItem.AddTabExamleWindow"
        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:AddTabItem"
        mc:Ignorable="d"
        Title="AddTabExamleWindow" Height="450" Width="800"
        DataContext="{DynamicResource viewModel}">
    <FrameworkElement.Resources>
        <local:TabsCollectionViewModel x:Key="viewModel"/>
        <local:TabVm x:Key="newTab"/>
        <CollectionViewSource x:Key="tabsCollectionView"
                              Source="{Binding Tabs}"/>
        <CompositeCollection x:Key="tabs">
            <CollectionContainer Collection="{Binding Mode=OneWay, Source={StaticResource tabsCollectionView}}"/>
            <StaticResource ResourceKey="newTab"/>
        </CompositeCollection>
        <DataTemplate x:Key="TabItem.HeaderTemplate"
                      DataType="{x:Type local:TabVm}">
            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Panel.Style>
                        <Style TargetType="StackPanel">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding}" Value="{StaticResource newTab}">
                                    <Setter Property="Visibility" Value="Collapsed"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Panel.Style>
                    <TextBlock Text="{Binding Header}"
                               Margin="2"/>
                    <Button Content="❌" FontWeight="Bold" Foreground="Red"
                            Command="{Binding RemoveTabCommand, Mode=OneWay, Source={StaticResource viewModel}}"
                            CommandParameter="{Binding Mode=OneWay}"/>
                </StackPanel>
                <Button Content="✚" FontWeight="Bold" Foreground="Green"
                        Command="{Binding AddNewTabCommand, Mode=OneWay, Source={StaticResource viewModel}}">
                    <Button.Style>
                        <Style TargetType="Button">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding}" Value="{StaticResource newTab}">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="TabItem.ContentTemplate"
                      DataType="{x:Type local:TabVm}">
            <TextBox Text="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
                <TextBox.Style>
                    <Style TargetType="TextBox">
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding}" Value="{StaticResource newTab}">
                                <Setter Property="Visibility" Value="Collapsed"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TextBox.Style>
            </TextBox>
        </DataTemplate>
    </FrameworkElement.Resources>
    <Grid>
        <TabControl ItemsSource="{DynamicResource tabs}"
                    ItemTemplate="{DynamicResource TabItem.HeaderTemplate}"
                    ContentTemplate="{DynamicResource TabItem.ContentTemplate}"
                    SelectedItem="{Binding SelectedTab, Mode=TwoWay}"/>
    </Grid>
</Window>

To eliminate ambiguities, I give the codes of the classes used in the example: BaseInpc:

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace Simplified
{
    /// <summary>Base class with implementation of the <see cref="INotifyPropertyChanged"/> interface.</summary>
    public abstract class BaseInpc : INotifyPropertyChanged
    {
        /// <inheritdoc cref="INotifyPropertyChanged"/>
        public event PropertyChangedEventHandler PropertyChanged;

        /// <summary>The protected method for raising the event <see cref = "PropertyChanged"/>.</summary>
        /// <param name="propertyName">The name of the changed property.
        /// If the value is not specified, the name of the method in which the call was made is used.</param>
        protected void RaisePropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }

        /// <summary> Protected method for assigning a value to a field and raising 
        /// an event <see cref = "PropertyChanged" />. </summary>
        /// <typeparam name = "T"> The type of the field and assigned value. </typeparam>
        /// <param name = "propertyFiled"> Field reference. </param>
        /// <param name = "newValue"> The value to assign. </param>
        /// <param name = "propertyName"> The name of the changed property.
        /// If no value is specified, then the name of the method 
        /// in which the call was made is used. </param>
        /// <returns>Returns <see langword="true"/> if the value being assigned
        /// was not equal to the value of the field and
        /// therefore the value of the field was changed.</returns>
        /// <remarks> The method is intended for use in the property setter. <br/>
        /// To check for changes,
        /// used the <see cref = "object.Equals (object, object)" /> method.
        /// If the assigned value is not equivalent to the field value,
        /// then it is assigned to the field. <br/>
        /// After the assignment, an event is created <see cref = "PropertyChanged" />
        /// by calling the method <see cref = "RaisePropertyChanged (string)" />
        /// passing the parameter <paramref name = "propertyName" />. <br/>
        /// After the event is created,
        /// the <see cref = "OnPropertyChanged (string, object, object)" />
        /// method is called. </remarks>
        protected bool Set<T>(ref T propertyFiled, T newValue, [CallerMemberName] string propertyName = null)
        {
            bool notEquals = !object.Equals(propertyFiled, newValue);
            if (notEquals)
            {
                T oldValue = propertyFiled;
                propertyFiled = newValue;
                RaisePropertyChanged(propertyName);

                OnPropertyChanged(propertyName, oldValue, newValue);
            }
            return notEquals;
        }

        /// <summary> The protected virtual method is called after the property has been assigned a value and after the event is raised <see cref = "PropertyChanged" />. </summary>
        /// <param name = "propertyName"> The name of the changed property. </param>
        /// <param name = "oldValue"> The old value of the property. </param>
        /// <param name = "newValue"> The new value of the property. </param>
        /// <remarks> Can be overridden in derived classes to respond to property value changes. <br/>
        /// It is recommended to call the base method as the first operator in the overridden method. <br/>
        /// If the overridden method does not call the base class, then an unwanted change in the base class logic is possible. </remarks>
        protected virtual void OnPropertyChanged(string propertyName, object oldValue, object newValue) { }
    }
}

RelayCommand:

using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Threading;

namespace Simplified
{
    #region Delegates for WPF Command Methods
    public delegate void ExecuteHandler(object parameter);
    public delegate bool CanExecuteHandler(object parameter);
    #endregion

    #region Класс команд - RelayCommand
    /// <summary> A class that implements <see cref = "ICommand" />. <br/>
    /// Implementation taken from <see href = "https://www.cyberforum.ru/wpf-silverlight/thread2390714-page4.html#post13535649" />
    /// and added a constructor for methods without a parameter.</summary>
    public class RelayCommand : ICommand
    {
        private readonly CanExecuteHandler canExecute;
        private readonly ExecuteHandler execute;
        private readonly EventHandler requerySuggested;

        /// <inheritdoc cref="ICommand.CanExecuteChanged"/>
        public event EventHandler CanExecuteChanged;

        /// <summary> Command constructor. </summary>
        /// <param name = "execute"> Command method to execute. </param>
        /// <param name = "canExecute"> Method that returns the state of the command. </param>
        public RelayCommand(ExecuteHandler execute, CanExecuteHandler canExecute = null)
           : this()
        {
            this.execute = execute ?? throw new ArgumentNullException(nameof(execute));
            this.canExecute = canExecute;

            requerySuggested = (o, e) => Invalidate();
            CommandManager.RequerySuggested += requerySuggested;
        }

        /// <inheritdoc cref="RelayCommand(ExecuteHandler, CanExecuteHandler)"/>
        public RelayCommand(Action execute, Func<bool> canExecute = null)
                : this
                (
                      p => execute(),
                      p => canExecute?.Invoke() ?? true
                )
        { }

        private RelayCommand()
            => dispatcher = Application.Current.Dispatcher;

        private readonly Dispatcher dispatcher;

        /// <summary> The method that raises the event <see cref = "CanExecuteChanged" />. </summary>
        public void RaiseCanExecuteChanged()
        {
            if (dispatcher.CheckAccess())
                Invalidate();
            else
                dispatcher.BeginInvoke((Action)Invalidate);
        }
        private void Invalidate()
            => CanExecuteChanged?.Invoke(this, EventArgs.Empty);

        /// <inheritdoc cref="ICommand.CanExecute(object)"/>
        public bool CanExecute(object parameter) => canExecute?.Invoke(parameter) ?? true;

        /// <inheritdoc cref="ICommand.Execute(object)"/>
        public void Execute(object parameter) => execute?.Invoke(parameter);
    }
    #endregion
}

RelayCommand<T>:

using System;
using System.Windows.Input;
namespace Simplified
{
    #region Delegates for WPF Command Methods
    public delegate void ExecuteHandler<T>(T parameter);
    public delegate bool CanExecuteHandler<T>(T parameter);
    #endregion

    /// <summary> RelayCommand implementation for generic parameter methods. </summary>
    /// <typeparam name = "T"> Method parameter type. </typeparam>  
    public class RelayCommand<T> : RelayCommand
    {
        /// <inheritdoc cref="RelayCommand(ExecuteHandler, CanExecuteHandler)"/>
        public RelayCommand(ExecuteHandler<T> execute, CanExecuteHandler<T> canExecute = null)
            : base
            (
                  p =>
                  {
                      if (p is T t)
                          execute(t);
                  },
                  p => (p is T t) && (canExecute?.Invoke(t) ?? true)
            )
        { }
    }
}