c# - Load UserControl in TabItem programatically -

placing usercontrol inside tabitem pretty basic when using xaml.

<tabcontrol>     <tabitem>         <local:myusercontrol/>     </tabitem> </tabcontrol> 

but want load usercontrol using viewmodel. how go that? instance

<tabcontrol itemssource="{binding tabcollection}">     <tabitem header="{binding header}"              source="{binding myusercontrol}"> <!-- source not property of tabitem-->                                                <!-- i'm using in context example. how 'frame' work -->     </tabitem> </tabcontrol> 

assuming viewmodel has observablecollection use populate different tabs, headers, background colour , on, how populate view in tabitem programatically?

for instance, below basic sample of viewmodel:

public class tabviewmodel {     // 'tabmodel' simple class acts model class (tabviewmodel)     // store strings, integers, etc. properties     // i.e: fields 'header' , 'myusercontrol' in below method both strings declared in 'tabmodel'     public observablecollection<tabmodel> tabcollection { get; set; }      public tabviewmodel()     {         tabcollection = new observablecollection<tabmodel>();         populatetabcollection();     }      private void populatetabcollection()     {         tabcollection.add(new tabmodel()         {             header = "firstusercontrol",             myusercontrol = "views/myfirstusercontrol.xaml"         });          tabcollection.add(new tabmodel()         {             header = "secondusercontrol",             myusercontrol = "views/mysecondusercontrol.xaml"         });     } } 

so need display different view in each tab through databinding. i'm not sure if possible. if is, kindly educate me.

you can achieve using datatemplates. refer below code.

<window.resources>     <datatemplate datatype="{x:type local:personvm}">         <local:person/>     </datatemplate>     <datatemplate datatype="{x:type local:deptvm}">         <local:department/>     </datatemplate> </window.resources> <grid>     <tabcontrol itemssource="{binding tabcollection}" selectedindex="0">         <tabcontrol.itemtemplate>             <datatemplate>                 <textblock text="{binding tabname}"/>             </datatemplate>         </tabcontrol.itemtemplate>         <tabcontrol.contenttemplate>             <datatemplate>                 <contentcontrol  content="{binding }"/>             </datatemplate>         </tabcontrol.contenttemplate>     </tabcontrol> </grid>   public partial class mainwindow : window     {         public mainwindow()         {             initializecomponent();             this.datacontext = new tabviewmodel();         }     }      public class tabviewmodel     {         public observablecollection<object> tabcollection { get; set; }          public tabviewmodel()         {             tabcollection = new observablecollection<object>();             populatetabcollection();         }          private void populatetabcollection()         {             tabcollection.add(new personvm()             {                 personname = "firstusercontrol",                 address = "address",                 tabname = "person tab"             });              tabcollection.add(new deptvm()             {                 deptname = "secondusercontrol",                 tabname = "depttab"             });         }     }      public class personvm     {         public string personname { get; set; }         public string address { get; set; }         public string tabname { get; set; }      }      public class deptvm     {         public string deptname { get; set; }         public string tabname { get; set; }     }