Binding TabControl ItemsSource to Collection of ViewModels

Question

Per qualche motivo, ho un bel po 'di tempo per far sì che il mio TabControl venga visualizzato correttamente quando si associa il modello ItemsSource a un modello ObservableCollection di viste. Sto basando il mio disegno sul tutorial trovato qui: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx. Ho trovato alcune domande come le mie ma nessuna ha affrontato la mia situazione particolare. Questo è il mio TabControl in xaml.

<TabControl ItemsSource="{Binding Workspaces}" 
      SelectedIndex="{Binding ActiveWorkspaceIndex}" 
      ItemTemplate="{StaticResource ClosableTabItemTemplate}"/> 

Dove ClosableTabItemTemplate è la seguente.

<DataTemplate x:Key="ClosableTabItemTemplate"> 
     <DockPanel Width="120"> 
      <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" 
       /> 
      <ContentPresenter 
       Content="{Binding Path=DisplayName}" 
       VerticalAlignment="Center" 
       /> 
     </DockPanel> 
     </DataTemplate> 

Workspaces è la ObservableCollection dei modelli di visualizzazione. ActiveWorkspaceIndex è solo l'indice dell'area di lavoro attivo di cui tengo traccia nel modello di visualizzazione. Associo il mio modello di vista con un'istanza di una vista attraverso il seguente modello di dati nel mio file App.xaml.

<DataTemplate DataType="{x:Type vm:ViewModelStartPage}"> 
    <v:ViewStartPage/> 
</DataTemplate> 

Aggiungo solo un modello di visualizzazione alla mia raccolta di aree di lavoro. Vedo il display a 2 visualizzazioni nel controllo a schede e non sono tabbed. È quasi come se TabControl non sapesse trattare le diverse visualizzazioni come TabItems, comportandosi più come un pannello di stack, impilando le viste. Se creo gli elementi di tabulazione nel codice funziona così:

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); 

Mi manca qualche modello di contenuto o qualcosa del genere. In seguito, modellerò le mie schede ma per ora sarei felice di avere le schede di base funzionanti. Anche le viste nel contenuto delle schede possono essere diverse per ogni scheda, quindi non posso usare gli esempi di modelli TabControl di testo semplici che vedo dappertutto ... I.e. non questo ...

<TabControl.ContentTemplate> 
    <DataTemplate> 
     <TextBlock 
      Text="{Binding Content}" /> 
    </DataTemplate> 

Qualche idea?

Answer 1

Ho finito per utilizzare uno ContentControl con un modello di dati TabControl (come il progetto tutorial originale). Ecco il codice xaml con cui ho finito. Non ho modificato il code-behind dal progetto di esempio originale per farlo funzionare. Il ContentControl è nel mio MainWindow.xaml e gli altri due pezzi di codice erano in uno ResourceDictionary.

<!-- Workspaces Tab Control --> 
     <ContentControl Grid.Row="1" 
         VerticalAlignment="Stretch" 
         HorizontalAlignment="Stretch" 
         Content="{Binding Path=Workspaces}" 
         ContentTemplate="{StaticResource WorkspacesTemplate}"/> 

<!-- Workspaces Template --> 
    <DataTemplate x:Key="WorkspacesTemplate"> 
    <TabControl Style="{StaticResource ClosableTabControl}" 
       IsSynchronizedWithCurrentItem="True" 
       ItemsSource="{Binding}" 
       ItemTemplate="{StaticResource WorkspaceTabItemTemplate}" 
       Margin="1"/> 
    </DataTemplate> 


<!-- Workspace Tab Item Template --> 
    <DataTemplate x:Key="WorkspaceTabItemTemplate"> 
    <Grid Width="Auto" Height="Auto"> 
     <ContentPresenter ContentSource="Header" Margin="3" 
         Content="{Binding Path=DisplayName}" 
         HorizontalAlignment="Center" VerticalAlignment="Center"> 
     <ContentPresenter.Resources> 
      <Style TargetType="TextBlock"> 
      <Setter Property="Foreground" Value="{StaticResource Foreground}"/> 
      </Style> 
     </ContentPresenter.Resources> 
     </ContentPresenter> 
    </Grid> 
    </DataTemplate>