Wie wird eine TabPage entworfen, wenn die ItemsSource der TabControl an eine Liste in WPF gebunden wird?

Question

Das sind meine Klassen:

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

und das ist mein Hauptfenster XAML-Code:

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

Jetzt offensichtlich werde ich für jeden Eintrag in der Liste eine TabControl mit einer Seite hat F und alle TabControl Seiten haben eine TextBlockEtwas 1 wie hier gezeigt:

, was ich will, ist nur eine der Seiten zu entwerfen. sagen Sie hinzufügen neue button auf der Kamelseite Something 3.

Answer 1

sich nach den obigen Ausführungen:

Erstellen Sie eine spezifische Ansichtsmodell Klasse für jeden Tab:

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

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

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

Dann eine bestimmte Ansicht erstellen (in der Regel in Form von Usercontrols) für jeden:

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

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

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

Dann erstellen DataTemplates für jeden ViewModel Typ und setzen Sie diese UserControls in ihnen:

Edit: Diese sollen in App.xaml unter Application.Resources definiert werden:

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

Schließlich legten ein ObservableCollection<ViewModelBase> in dem Hauptansichtsmodell und fügen Sie diesen Artikel:

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