Jak zaprojektować stronę TabPage, gdy pozycja ItemsSource TabControl jest powiązana z listą w WPF?

Question

Są moich klas:

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

a to mój MainWindow kod 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> 

Teraz oczywiście będę miał TabControl z jednej strony dla każdego elementu na liście F a wszystkie strony TabControl mają TextBlockCoś 1 jak pokazano poniżej:

czego chcę jest zaprojektowanie tylko jedną ze stron. powiedz: dodaj nową button do strony o nazwie Camel o nazwie Something 3.

Answer 1

Zgodnie z powyższych uwag:

Tworzenie konkretną klasę ViewModel dla każdej zakładce:

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

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

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

następnie utworzyć szczególne widzenia (zwykle w postaci UserControls) dla każdego:

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

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

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

Następnie utwórz DataTemplates dla każdego modelu ViewModel i umieść w nich UserControls:

Edit: te powinny być określone w App.xaml pod 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> 

Wreszcie umieścić ObservableCollection<ViewModelBase> w głównym ViewModel i dodać następujące elementy:

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