当 TabControl 的 ItemsSource 绑定到 WPF 中的列表时，如何设计 TabPage？答案

【问题标题】：How to design a TabPage when the TabControl's ItemsSource is Bind to a List in WPF?当 TabControl 的 ItemsSource 绑定到 WPF 中的列表时，如何设计 TabPage？
【发布时间】：2013-07-30 16:20:09
【问题描述】：

这些是我的课程：

   class mainViewModel
    {       
        public List<Foo> F { get; set; }
        public mainViewModel()
        {
        F=new List<Foo>()
              {
                  new Foo(new Animal(){Name = "Cat"}),
                  new Foo(new Animal(){Name = "Dog"}),
                  new Foo(new Animal(){Name = "Camel"})
              };
        }
     }

    public class Foo
    {
        public Animal Animal { get; set; }
        public Foo(Animal animal)
        {
            Animal = animal;
        }
    }

    public class Animal
    {
        public string Name { get; set; }
    }

这是我的 MainWindow Xaml 代码：

  <TabControl ItemsSource="{Binding Path=F}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Animal.Name}"/>
                </DataTemplate>
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
              <DataTemplate>
                    <TextBlock Text="Something 1"/>
              </DataTemplate>
            </TabControl.ContentTemplate>
  </TabControl>

现在显然我将有一个TabControl，列表中的每个项目都有一个页面F，所有TabControl 页面都有一个TextBlockSomething 1，如下所示：

我想要的只是设计其中一个页面。说在名为 Something 3 的 Camel 页面中添加新的 button。

【问题讨论】：

为每个选项卡创建一个特定的 ViewModel，并根据每个 ViewModel 类型使用DataTemplates。见my example
只是想知道我是否理解，这一行 [<DataTemplate DataType="{x:Type local:FileSection}">] 告诉WPF 对于所有类型为 T（此处为 FileSection）的 TabPages，DataTemplate 将如下所示。我必须在这条线下面添加我的控件。我说的对吗？
没错。然后为每个视图创建一个特定的视图。
@HighCore 我应该为每个ViewModel 创建一个view 还是我必须在上述行下做我的设计工作？如果我必须创建一个视图，我应该在哪里设置它以显示在 TabControl Pages 中，因为我在你的示例中看不到这样的东西。

标签： c# .net wpf xaml tabcontrol

【解决方案1】：

根据上述cmets：

为每个选项卡创建一个特定的 ViewModel 类：

public class Tab1: ViewModelBase
{
   //... functionality, properties, etc
}

public class Tab2: ViewModelBase
{
   //... functionality, properties, etc    
}

public class Tab3: ViewModelBase
{
   //... functionality, properties, etc    
}

然后为每个创建一个特定的View（通常以UserControls的形式）：

<UserControl x:Class"UserControl1" ...>
   <!-- UI Elements, etc -->
</UserControl>

<UserControl x:Class"UserControl2" ...>
   <!-- UI Elements, etc -->
</UserControl>

<UserControl x:Class"UserControl3" ...>
   <!-- UI Elements, etc -->
</UserControl>

然后为每个 ViewModel 类型创建 DataTemplates 并将这些 UserControls 放入其中：

编辑：这些应该定义在App.xaml下Application.Resources：

<Application ....>
    <Application.Resources>
        <DataTemplate DataType="{x:Type local:ViewModel1}">
            <local:UserControl1/>
        </DataTemplate>

        <DataTemplate DataType="{x:Type local:ViewModel2}">
            <local:UserControl2/>
       </DataTemplate>

       <DataTemplate DataType="{x:Type local:ViewModel3}">
           <local:UserControl2/>
      </DataTemplate>
   </Application.Resources>
</Application>

最后，将ObservableCollection<ViewModelBase> 添加到您的主 ViewModel 中并添加这些项目：

public ObservableCollection<ViewModelBase> Tabs {get;set;} //Representing each Tab Item

public MainViewModel() //Constructor
{
    Tabs = new ObservableCollection<ViewModelBase>();
    Tabs.Add(new ViewModel1());
    Tabs.Add(new ViewModel2());
    Tabs.Add(new ViewModel2());
}

【讨论】：

对不起@HighCore，但我是WPF 的新手。 create DataTemplates for each ViewModel Type and put these UserControls inside them 是什么意思？如何为 ViewModel 创建 DataTemplates？其实我不知道我应该在哪里写这些行<DataTemplate DataType="{x:Type local:ViewModel1}"> <local:UserControl1/> </DataTemplate>
噗！！！终于奏效了。我将这些行放在我的应用程序中的任何地方，但它没有工作;）@HighCore你是一个救生员:)
这个 ViewModelBase.cs 由什么组成？
@Sss mvvmlight.net/help/NET35/html/…