将 UserControl 托管为选项卡内容答案

【问题标题】：Hosting a UserControl as Tab Content将 UserControl 托管为选项卡内容
【发布时间】：2010-11-16 21:49:31
【问题描述】：

我在尝试将用户控件作为选项卡内容托管在 TabControl 的选项卡项中时遇到问题。

我的代码结构如下：

我有一个视图模型，它应该通过 DataTemplate 呈现到视图中。

<DataTemplate x:Key="TabItemContentTemplate" DataType="{x:Type ViewModels:MyViewModel}">
  <Views:MyView />
</DataTemplate>

我想在一个 TabControl（实际上是一个 XamTabControl，但无论哪种方式，问题仍然存在。）

   <UserControl>
        <UserControl.Resources>
        <DataTemplate x:Key="TabItemHeaderTemplate">
                <StackPanel>
                  <TextBlock Text="{Binding Path=Name}" />
                  <TextBlock Text="{Binding Path=Description}"/>              
                </StackPanel>
        </DataTemplate>
            <DataTemplate x:Key="TabItemContentTemplate" DataType="{x:Type ViewModels:MyViewModel}">
              <Views:MyView />
            </DataTemplate>
        <Style x:Key="TabItemContainerStyle" TargetType="Controls:TabItemEx">
          <Setter Property="Header" Value="{Binding}"/>
          <Setter Property="HeaderTemplate"
                  Value="{DynamicResource TabItemHeaderTemplate}"/>
          <Setter Property="Content" Value="{Binding}"/>
          <Setter Property="ContentTemplate"
                  Value="{DynamicResource TabItemContentTemplate}"/>
        </Style>                   
      </UserControl.Resources>
      <Grid >
       <Controls:XamTabControl 
        ItemsSource="{Binding Items}"
        ItemContainerStyle="{DynamicResource TabItemContainerStyle}"
        TabStripPlacement="Left"
        TabLayoutStyle="SingleRowAutoSize"
        AllowTabClosing="True"                               
        Grid.Row="1"
        TabItemCloseButtonVisibility="WhenSelectedOrHotTracked">
        </Controls:XamTabControl>
      </Grid>
    </UserControl>

问题是内容没有呈现。 Tab header 渲染得很好，但是标签中没有内容。

我相当确定问题出在 View/Viewmodel 映射中，因为当我将模板更改为以下内容时，我确实得到了呈现的内容：

<DataTemplate x:Key="TabItemHeaderTemplate">
  <Grid>
    <TextBlock Text="{Binding Header}"/>
    <Ellipse Fill="Red" Width="40" Height="40" Margin="0,20,0,0"/>
  </Grid>
</DataTemplate>
<DataTemplate x:Key="TabItemContentTemplate">
  <Ellipse Fill="Green"/>
</DataTemplate>
<Style x:Key="TabItemContainerStyle" TargetType="Controls:TabItemEx">
  <Setter Property="Header" Value="{Binding}"/>
  <Setter Property="HeaderTemplate"
          Value="{StaticResource TabItemHeaderTemplate}"/>
  <Setter Property="Content" Value="{Binding}"/>
  <Setter Property="ContentTemplate"
          Value="{StaticResource TabItemContentTemplate}"/>
</Style>

有人知道我在这里做错了什么吗？

提前致谢！

【问题讨论】：

用给定的代码重现你的场景需要做大量的工作——也许你可以减少问题？

标签： c# wpf mvvm datatemplate

【解决方案1】：

如果我理解你是正确的，那么我认为问题在于你尝试将属性从 VM 绑定到视图

  <Setter Property="Header" Value="{Binding}"/>                    
  <Setter Property="HeaderTemplate" Value="{StaticResource TabItemHeaderTemplate}"/>
    <DataTemplate x:Key="TabItemHeaderTemplate">                       
            <StackPanel>                       
              <TextBlock Text="{Binding Path=Name}" />                       
              <TextBlock Text="{Binding Path=Description}"/>                                     
            </StackPanel>                       
    </DataTemplate>

同时您尝试使用相同的绑定来“替换”虚拟机与视图

      <Setter Property="Content" Value="{Binding}"/>                            
      <Setter Property="ContentTemplate" Value="{StaticResource TabItemContentTemplate}"/>
      <DataTemplate x:Key="TabItemContentTemplate" DataType="{x:Type ViewModels:MyViewModel}">                             
          <Views:MyView />                             
      </DataTemplate>

在您的第二个示例中，您没有将 vm 映射到具有相同绑定的视图，因此您会看到绿色椭圆。

【讨论】：

【解决方案2】：

我已经设法使它与 MyView.xaml 一起工作，如下所示：

<UserControl x:Class="WpfApplication27.MyView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >
    <StackPanel>
        <TextBox Text="{Binding Path=Name}"></TextBox>
        <TextBox Text="{Binding Path=Description}"></TextBox>
    </StackPanel>
</UserControl>

【讨论】：

你成功了？问题是以 MVVM 方式将用户控件呈现到 tabcontrol 内容窗格中。
对不起，但不一样。我正在使用 DataTemplate 将视图模型映射到视图。

【解决方案3】：

解决了这个问题。由于重命名操作，BAML 已损坏！ :(

【讨论】：