绑定的TabControl的ItemsSource到的ViewModels集 [英] Binding TabControl ItemsSource to Collection of ViewModels

问题描述

出于某种原因，我有一个时间让赫克我的的TabControl 来正确显示当绑定的ItemsSource 到的ObservableCollection 视图模型。我在我的基础设计在这里下车发现教程：<一href=\"http://msdn.microsoft.com/en-us/magazine/dd419663.aspx\">http://msdn.microsoft.com/en-us/magazine/dd419663.aspx.我在这里找到像我这样的一些问题，但没有解决我的特殊情况。
这是我的的TabControl 在XAML。

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}"/>

其中， ClosableTabItemTemplate 如下。

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

工作区是的ObservableCollection 视图模型。 ActiveWorkspaceIndex 就是我在视图模型保持跟踪活动工作区的索引。我在我的视图模型通过在我的App.xaml文件以下数据模板的视图的实例关联。

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>

我只添加一个视图模型我收集的工作区。我看到2次在标签控件中显示，他们没有标签。这几乎就像在TabControl的完全不认识的治疗作为的TabItems，它的表现更像是一个堆叠面板，堆放的意见，不同的看法。如果我创建code标签项目正常工作是这样的：

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

我必须失去了一些内容模板或东西。我将在后面的造型我的标签，但现在我会很高兴刚开工作的基本标签。另外在标签内容的看法可能是为每个标签不同，所以我不能用简单的文字块的TabControl模板例子，我看到所有的地方...
即不是这...

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>

任何想法？

推荐答案

我结束了使用 ContentControl中与的TabControl 数据模板（像原来的教程项目）。这里是XAML code我结束了。我没有C-背后从原来的样本项目改变$ C $，使这项工作。在 ContentControl中是我的MainWindow.xaml和code的另两件是在一个 ResourceDictionary中。

I ended up using a ContentControl with a TabControl data template (like the original tutorial project). Here is the xaml code I ended up with. I did not change the code-behind from the original sample project to make this work. The ContentControl is in my MainWindow.xaml and the other two pieces of code were in a 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>

这篇关于绑定的TabControl的ItemsSource到的ViewModels集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！