title: WPF TabControl MVVM ViewModel get instantiated every time i toggle between tabs
body: <p>I wrote some WPF application with MVVM pattern that holds a TabControl bound to collection of "TabViewModelItem".</p>
  
  <p>The main window XAML:</p>
  
  <pre><code>&lt;Window
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:ViewModel="clr-namespace:XcomSavesGameEditor.ViewModel"
          x:Class="XcomSavesGameEditor.MainWindow"
          xmlns:Views="clr-namespace:XcomSavesGameEditor.View"
          Title="X-COM Saved Game Editor" Height="650" Width="850" Background="#FF1B0000"&gt;
      &lt;Window.DataContext&gt;
          &lt;ViewModel:TabsManagerViewModel/&gt;
      &lt;/Window.DataContext&gt;
      &lt;Grid&gt;
  
  ... (some not relevant code removed for clearity of question) ...
  
  &lt;TabControl x:Name="myTabs" Background="Black" Margin="0,25,0,0" BorderThickness="0,0,0,0" BorderBrush="Black" ItemsSource="{Binding Tabs}" &gt;
  
              &lt;TabControl.Resources&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab0a_FileSaveData_ViewModel}"&gt;
                      &lt;Views:Tab0a_FileSaveData_View /&gt;
                  &lt;/DataTemplate&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab0b_Summary_ViewModel}"&gt;
                      &lt;Views:Tab0b_Summary_View /&gt;
                  &lt;/DataTemplate&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab1_Research_ViewModel}"&gt;
                      &lt;Views:Tab1_Research_View /&gt;
                  &lt;/DataTemplate&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab2_Engineering_ViewModel}"&gt;
                      &lt;Views:Tab2_Engineering_View /&gt;
                  &lt;/DataTemplate&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab3_Barracks_ViewModel}"&gt;
                      &lt;Views:Tab3_Barracks_View /&gt;
                  &lt;/DataTemplate&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab4_Hangar_ViewModel}"&gt;
                      &lt;Views:Tab4_Hangar_View /&gt;
                  &lt;/DataTemplate&gt;
                  &lt;DataTemplate DataType="{x:Type ViewModel:Tab5_SituationRoom_ViewModel}"&gt;
                      &lt;Views:Tab5_SituationRoom_View /&gt;
                  &lt;/DataTemplate&gt;
              &lt;/TabControl.Resources&gt;
  
              &lt;TabControl.ItemTemplate&gt;
                  &lt;!-- this is the header template--&gt;
                  &lt;DataTemplate&gt;
                      &lt;Grid Margin="0"&gt;
                          &lt;Border Margin="0,0,0,0" 
                                  Background="Black"
                                  BorderBrush="Black" 
                                  BorderThickness="0,0,0,0" Padding="0,0,0,0"&gt;
                              &lt;StackPanel   Orientation="Horizontal"
                                              Margin="0,0,0,0"&gt;
                                  &lt;Image Name ="tabImage" Source="{Binding TabImage_Disabled}" /&gt;
                              &lt;/StackPanel&gt;
                          &lt;/Border&gt;
                      &lt;/Grid&gt;
                      &lt;DataTemplate.Triggers&gt;
                          &lt;DataTrigger Binding="{Binding Path=IsSelected,RelativeSource={RelativeSource TemplatedParent}}" Value="True"&gt;
                              &lt;Setter TargetName="tabImage" Property="Source" Value="{Binding TabImage_Enabled}"/&gt;
                          &lt;/DataTrigger&gt;
                      &lt;/DataTemplate.Triggers&gt;
                  &lt;/DataTemplate&gt;
              &lt;/TabControl.ItemTemplate&gt;
              &lt;TabControl.ContentTemplate&gt;
                  &lt;!-- this is the body of the TabItem template--&gt;
                  &lt;DataTemplate&gt;
                      &lt;Grid&gt;
                          &lt;Grid.Background&gt;
                              &lt;ImageBrush ImageSource="{Binding TabImage_Background}"/&gt;
                          &lt;/Grid.Background&gt;
                          &lt;UniformGrid&gt;
                              &lt;ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Content="{Binding TabContents}" /&gt;
                          &lt;/UniformGrid&gt;
                      &lt;/Grid&gt;
                  &lt;/DataTemplate&gt;
              &lt;/TabControl.ContentTemplate&gt;
         &lt;/TabControl&gt;
  </code></pre>
  
  <p>and the ViewModel that hold collection of tab is code:</p>
  
  <pre><code> public sealed class TabsManagerViewModel : ViewModelBase
   {
  
  private ObservableCollection&lt;TabViewModelItem&gt; _tabs;
  
          public ObservableCollection&lt;TabViewModelItem&gt; Tabs
          {
              get { return _tabs; }
              set
              {
                  _tabs = value;
                  RaisePropertyChanged("Tabs");
              }
          }
  
          public TabsManagerViewModel()
          {
              Tabs = new ObservableCollection&lt;TabViewModelItem&gt;();
              Tabs.Add(new TabViewModelItem { TabName = "File_Save_Data", TabImage_Enabled = _aEnabledTabImages[(int)enum_Tabs.SaveFileData_Tab], TabImage_Disabled = _aDisabledTabImages[(int)enum_Tabs.SaveFileData_Tab], TabImage_Background = _aBackgroundTabImages[(int)enum_Tabs.SaveFileData_Tab], TabContents = new Tab0a_FileSaveData_ViewModel() });
              Tabs.Add(new TabViewModelItem { TabName = "Summary", TabImage_Enabled = _aEnabledTabImages[(int)enum_Tabs.Summary_Tab], TabImage_Disabled = _aDisabledTabImages[(int)enum_Tabs.Summary_Tab], TabImage_Background = _aBackgroundTabImages[(int)enum_Tabs.Summary_Tab], TabContents = new Tab0b_Summary_ViewModel() });
  
  ... (rest of code removed for clearity of question)
  
          }
  
  }
  </code></pre>
  
  <p>So basically it's tab control that is bound to a collection of "TabViews".
  and based of the object data type it's showing View1 or View2.
  Note: View1 &amp; View 2 are UserControls, each bound to it's own ViewModel.
  This concept works fine.</p>
  
  <p>Now where is the problem you my ask ?
  My problem is:
  EVERY time I click on another tab &amp; then return to same tab, I get that specifc tab ViewModel constructor called again, where as I would expect the ViewModel object would remain.</p>
  
  <p>This is problem, because it cause me to lose any modification made on that page, when I toggle between tabs. and since the ctor is called everytime, over &amp; over, I can't even use the VIewModel to store this information.</p>
  
  <p>My questions are:
  1) Is there any way I can prevent the TabControl to dispose ViewModel objects when tab is inactive ? Meaning to pre-create all ViewModel's object &amp; not dispose them when hidden ?
  2) What "workarounds" using this concept exist, that allow me to store "visual tree" of the given tab, so if i navigate away from it &amp; then re-open it, it will store all information on it (such as selected check boxes, written text, etc.)</p>
  
  <p>Would appreciate any help on matter.</p>
  
  <p>regards,
  Idan</p>