WPF 在 TabControl 的 DataTemplate 中绑定不同的 UserControl答案

【问题标题】：WPF binding different UserControls in a DataTemplate of TabControlWPF 在 TabControl 的 DataTemplate 中绑定不同的 UserControl
【发布时间】：2017-09-10 15:08:06
【问题描述】：

作为 WPF 和 MVVM 的新成员，我正在努力在 TabControl 中应用 MVVM 模式。我会给你一个我正在努力实现的例子。

TabOne xaml 及其视图模型

<UserControl x:Class="TestTabControl.TabOne"
             xmlns:local="clr-namespace:TestTabControl"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock Text="tab one ..." FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</UserControl>

//TabOne ViewModel
class TabOne : ViewModelBase
{
    public string TabName
    {
        get
        {
            return "TabOne";
        }
    }
}

TabTwo xaml 及其视图模型

<UserControl x:Class="TestTabControl.TabTwo"
             xmlns:local="clr-namespace:TestTabControl"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock Text="tab two ..." FontWeight="Bold" FontSize="14" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</UserControl>

//TabTwo ViewModel
class TabTwo : ViewModelBase
{
    public string TabName
    {
        get
        {
            return "TabTwo";
        }
    }
}

最后是 MainWindow xaml 及其视图模型

<Window x:Class="TestTabControl.MainWindow"
        xmlns:local="clr-namespace:TestTabControl"
        mc:Ignorable="d"
        Title="Test Tab Control" MinWidth="500" Width="1000" Height="800">
    <TabControl ItemsSource="{Binding TabViewModels}" >
        <TabControl.ItemTemplate >
            <!-- header template -->
            <DataTemplate>
                <TextBlock Text="{Binding TabName}" />
            </DataTemplate>
        </TabControl.ItemTemplate>
        <TabControl.ContentTemplate>
            <DataTemplate>
                ?????????
            </DataTemplate>
        </TabControl.ContentTemplate>
    </TabControl>
</Window>


//MainWindow ViewModel 
class MainWindowViewModel : ViewModelBase
{
    private ObservableCollection<ViewModelBase> _tabViewModels;

    public MainWindowViewModel()
    {
        _tabViewModels = new ObservableCollection<ViewModelBase>();
        TabViewModels.Add(new TabOne());
        TabViewModels.Add(new TabTwo());
    }

    public ObservableCollection<ViewModelBase> TabViewModels
    {
        get
        {
            return _tabViewModels;
        }
        set  // is that part right?
        {
            _tabViewModels = value;
            RaisePropertyChanged(() => TabViewModels);
        }
    }
}

我应该在 DataTemplate 中写什么？我可以在此 DataTemplate 中同时传递 TabOne 和 TabTwo 的用户控件，以便获取我单击的每个选项卡的视图吗？还是我需要编写另一个 DataTemplate？

【问题讨论】：

How can I bind a List collection to TabControl headers in WPF?的可能重复
@AlexPaven 没有解决我的问题。这不是同一个问题！ ...我改变了我的问题。
我引用的问题提供了充足的细节，但好吧，也许我不明白问题到底是什么。你到底想完成什么？应该是选项卡控件内容的属性是什么？如果每个选项卡视图模型上有另一个属性，则可以将其绑定为内容。
当我运行应用程序时，选项卡标题会正确更新。但我也不知道如何更新选项卡的内容。如何在选项卡内容中绑定每个用户控件的 xaml？
看到这个属性了吗？ msdn.microsoft.com/en-us/library/… 您可以将 DataTemplate 与类型相关联。当内容控件（如 TabControl）绑定到对象（在本例中为 ItemsSource 的内容）时，它会查找与对象类型匹配的 DataTemplate。因此，为了简单起见，每个标签页都应绑定到不同类型的对象（根据需要），并且每个相应的 UserControl 应放置在带有适当 {x 标记的 DataTemplate (...) 中:类型...}

标签： c# wpf xaml mvvm mvvm-light

【解决方案1】：

您现在可能已经知道答案了。但是为了他人的利益，你需要做的是：

    <Grid Margin="10">
      <Grid.Resources>
            <DataTemplate DataType="{x:Type local:TabOne}">
               <local:UserControlOne/>
            </DataTemplate>
            <DataTemplate DataType="{x:Type local:TabTwo}">
               <local:UserControlTwo/>
            </DataTemplate>
      </Grid.Resources>
      <TabControl Margin="10" 
         ItemsSource="{Binding TabViewModels}">
      </TabControl>
   </Grid>

请注意，TabOne ViewModel 的 UserControl 也被命名为 TabOne。我将其更改为UserControlOne。这同样适用于 UserControlTwo。

【讨论】：