将 TabControl ItemsSource 绑定到 ViewModel 集合答案

【问题标题】：Binding TabControl ItemsSource to Collection of ViewModels将 TabControl ItemsSource 绑定到 ViewModel 集合
【发布时间】：2012-12-10 03:38:05
【问题描述】：

由于某种原因，在将ItemsSource 绑定到视图模型的ObservableCollection 时，我有一段时间让我的TabControl 正确显示。我的设计基于此处的教程：http://msdn.microsoft.com/en-us/magazine/dd419663.aspx。我确实在这里找到了一些像我这样的问题，但没有一个能解决我的特殊情况。这是我在 xaml 中的 TabControl。

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

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

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

我只将一个视图模型添加到我的工作区集合中。我看到选项卡控件中显示了 2 个视图，并且它们没有被标记。这几乎就像 TabControl 不知道将不同的视图视为 TabItems，它的行为更像一个堆栈面板，堆叠视图。如果我在代码中创建选项卡项目，它可以像这样正常工作：

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 模板示例...... IE。不是这个……

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

有什么想法吗？

【问题讨论】：

我在一个测试项目中尝试了您的代码，并且 TabControl 在这里按预期工作。您能否发布“堆叠”TabControl 的图像？
感谢您试一试。我最终使用了带有 TabControl 数据模板的 ContentControl。这似乎解决了问题。老实说，我没有足够的经验来解释为什么这会改变事情，但它现在正在起作用。我将发布我的工作代码。

标签： wpf xaml binding tabcontrol

【解决方案1】：

我最终使用了 ContentControl 和 TabControl 数据模板（就像原始教程项目一样）。这是我最终得到的 xaml 代码。我没有更改原始示例项目的代码隐藏来完成这项工作。 ContentControl 在我的 MainWindow.xaml 中，另外两段代码在 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>

【讨论】：