title: Binding TabControl ItemsSource to Collection of ViewModels
body: <p>For some reason I am having a heck of a time getting my <code>TabControl</code> to display properly when binding the <code>ItemsSource</code> to a <code>ObservableCollection</code> of view models. I'm basing my design off of the tutorial found here: <a href="http://msdn.microsoft.com/en-us/magazine/dd419663.aspx" rel="noreferrer">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx</a>. I did find a few questions like mine here but none addressed my particular situation.
  This is my <code>TabControl</code> in xaml.</p>
  
  <pre><code>&lt;TabControl ItemsSource="{Binding Workspaces}"
              SelectedIndex="{Binding ActiveWorkspaceIndex}"
              ItemTemplate="{StaticResource ClosableTabItemTemplate}"/&gt;
  </code></pre>
  
  <p>Where <code>ClosableTabItemTemplate</code> is the following.</p>
  
  <pre><code>&lt;DataTemplate x:Key="ClosableTabItemTemplate"&gt;
          &lt;DockPanel Width="120"&gt;
            &lt;Button 
                Command="{Binding Path=CloseCommand}"
                Content="X"
                Cursor="Hand"
                DockPanel.Dock="Right"
                Focusable="False"
                FontFamily="Courier" 
                FontSize="9"
                FontWeight="Bold"  
                Margin="0,1,0,0"
                Padding="0"
                VerticalContentAlignment="Bottom"
                Width="16" Height="16" 
                /&gt;
            &lt;ContentPresenter 
                Content="{Binding Path=DisplayName}" 
                VerticalAlignment="Center" 
                /&gt;
          &lt;/DockPanel&gt;
        &lt;/DataTemplate&gt;
  </code></pre>
  
  <p><code>Workspaces</code> is the <code>ObservableCollection</code> of view models. <code>ActiveWorkspaceIndex</code> is just the active workspace index that I keep track of in the view model. I associate my view model with an instance of a view through the following data template in my App.xaml file.</p>
  
  <pre><code>&lt;DataTemplate DataType="{x:Type vm:ViewModelStartPage}"&gt;
       &lt;v:ViewStartPage/&gt;
   &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>I only add one view model to my collection of workspaces. I see 2 views display in the tab control and they aren't tabbed. It's almost like the TabControl doesnt know to treat the different views as TabItems, its behaving more like a stack panel, stacking the views. If I create the tab items in code it works fine like this:</p>
  
  <pre><code>System.Windows.Controls.TabItem i = new System.Windows.Controls.TabItem();
  i.Content = new Views.ViewStartPage();
  i.Header = "A Tab Item";
  this.xTabControl.Items.Add(i); 
  </code></pre>
  
  <p>I must be missing some content template or something. I will be styling my tabs later but for now I would be happy just getting the basic tabs working. Also the views in the tab contents may be different for each tab so I can't use the simple textblock TabControl template examples I see all over the place...
  I.e. not this...</p>
  
  <pre><code>&lt;TabControl.ContentTemplate&gt;
      &lt;DataTemplate&gt;
          &lt;TextBlock
             Text="{Binding Content}" /&gt;
      &lt;/DataTemplate&gt;
  </code></pre>
  
  <p>Any ideas?</p>