Làm thế nào để thiết kế một TabPage khi ItemsSource của TabControl là Bind vào một danh sách trong WPF?

Question

Đây là lớp học của tôi:

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

Và Đây là MainWindow XAML Mã của tôi:

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

Bây giờ rõ ràng là tôi sẽ có một TabControl với một trang cho mỗi mục trong danh sách F và tất cả các trang TabControl có một số TextBlockĐiều gì đó 1 như được hiển thị ở đây:

những gì tôi muốn chỉ là thiết kế một trong các trang. nói thêm button mới vào trang Camel có tên Điều gì đó 3.

Answer 1

Theo các ý kiến ​​trên:

Tạo một lớp ViewModel cụ thể cho từng Tab:

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

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

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

Sau đó Tạo một Xem cụ thể (thường là dưới hình thức UserControls) cho mỗi:

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

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

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

Sau đó, tạo DataTemplates cho từng loại ViewModel và đặt các UserControls này vào bên trong:

Edit: Những nên được quy định tại App.xaml dưới 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> 

Cuối cùng, chấm ObservableCollection<ViewModelBase> trong ViewModel chính của bạn và thêm các mục:

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