How to design a TabPage when the TabControl's ItemsSource is Bind to a List in WPF?

.net, c#, tabcontrol, wpf, xaml

Solution

As per the above comments:

Create a specific ViewModel class for each Tab:

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

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

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

Then Create a specific View (usually in the form of UserControls) for each:

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

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

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

Then create `DataTemplates` for each ViewModel Type and put these `UserControls` inside them:

Edit: These should be defined in `App.xaml` under `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>

Finally, put an `ObservableCollection<ViewModelBase>` in your main ViewModel and add these Items:

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

Problem

These are my Classes: ``` 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; } } ``` And This is my MainWindow 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> ``` Now obviously I will have a `TabControl` with one page for each Item in the List `F` and all the `TabControl` pages have a `TextBlock` Something 1 as shown here: what I want is to design just one of the pages. say add new `button` to the Camel page named Something 3.

Original source