Click here to Skip to main content
12,957,731 members (62,085 online)
Rate this:
 
Please Sign up or sign in to vote.
For some reason I am having a heck of a time getting my TabControl to display properly when binding the ItemsSource to a ObservableCollection of view models. I'm basing my design off of the tutorial found here: http://msdn.microsoft.com/en-us/magazine/dd419663.aspx. I did find a few questions like mine here but none addressed my particular situation. This is my TabControl in xaml.

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


Where ClosableTabItemTemplate is the following.

<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 is the ObservableCollection of view models. ActiveWorkspaceIndex 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.

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


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:

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


The C# code above is what I want to accomplish through binding the view models.

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...

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


Any ideas?
Posted 23-Dec-12 11:46am
akak6669
Updated 23-Dec-12 12:02pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 6,994
CHill60 3,550
Maciej Los 3,312
ppolymorphe 2,170
Jochen Arndt 1,973


Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 23 Dec 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100