bind different modelview and view to each TabItem via MVVM in WPF -

i'm using mvvm dynamically create tabs viewmodel. in code, attempt hold collection of "tabitem" specify how tab appears (custom template) & in addition modelview object, , based on modelview display on tabitem view #1 / or view #2.

my current s/w architecture follows:

my mainwindow.xaml:

<window     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:viewmodel="clr-namespace:myapp.viewmodel" x:class="myapp.mainwindow"     xmlns:views="clr-namespace:myapp.view"     height="700" width="1000" background="#ff1b0000" resizemode="noresize">  <window.datacontext>     <viewmodel:tabitemviewmodel/> </window.datacontext> <grid>      <tabcontrol background="black" margin="0,25,0,0" borderthickness="0,0,0,0" itemssource="{binding tabs}" borderbrush="black" >              <tabcontrol.itemtemplate>                 <!-- header template-->                 <datatemplate>                     <grid margin="0">                         <border margin="0,0,0,0"                              background="black"                             borderbrush="black"                              borderthickness="0,0,0,0" padding="0,0,0,0">                             <stackpanel   orientation="horizontal"                                         margin="0,0,0,0">                                 <image name ="tabimage" source="{binding tabimage_disabled}" />                             </stackpanel>                         </border>                     </grid>                     <datatemplate.triggers>                         <datatrigger binding="{binding path=isselected,relativesource={relativesource templatedparent}}" value="true">                             <setter targetname="tabimage" property="source" value="{binding tabimage_enabled}"/>                         </datatrigger>                     </datatemplate.triggers>                 </datatemplate>             </tabcontrol.itemtemplate>             <tabcontrol.contenttemplate>                 <!-- body of tabitem template-->                 <datatemplate>                     <textblock text="{binding tabcontents}" foreground="white" />                 </datatemplate>             </tabcontrol.contenttemplate>        </tabcontrol>       </grid> </window> 

tabitem.cs:

using system; using system.collections.generic; using system.linq; using system.text; using system.windows; using system.windows.media.imaging; using myapp.viewmodel;  namespace myapp.model {     public sealed class tabitem     {         public string tabname { get; set; }         public bitmapimage tabimage_enabled { get; set; }         public bitmapimage tabimage_disabled { get; set; }         public bitmapimage tabimage_background { get; set; }         public viewmodelbase tabcontents { get; set; }     } } 

viewmodelbase.cs:

using system; using system.collections.generic; using system.componentmodel; using system.linq; using system.text; using system.threading.tasks;  namespace myapp.viewmodel {     public class viewmodelbase : inotifypropertychanged     {           public event propertychangedeventhandler propertychanged;           protected virtual void raisepropertychanged(string propertyname)          {               var handler = this.propertychanged;               if (handler != null)               {                   handler(this, new propertychangedeventargs(propertyname));               }          }     } } 

tabitemviewmodel.cs:

using system; using system.collections.generic; using system.collections.objectmodel; using system.linq; using system.text; using system.windows.media.imaging; using myapp.model;  namespace myapp.viewmodel { public sealed class tabitemviewmodel : viewmodelbase {      const int number_of_tabs = 2;      enum enum_tabs     {         research_tab = 0,         engineering_tab = 1     }      uri[] _aurisenabled = new uri[number_of_tabs];     uri[] _aurisdisabled = new uri[number_of_tabs];     uri[] _aurisbackgroundpics = new uri[number_of_tabs];     bitmapimage[] _aenabledtabimages = new bitmapimage[number_of_tabs];     bitmapimage[] _adisabledtabimages = new bitmapimage[number_of_tabs];     bitmapimage[] _abackgroundtabimages = new bitmapimage[number_of_tabs];      private observablecollection<tabitem> _tabs;      public observablecollection<tabitem> tabs     {         { return _tabs; }         set         {             _tabs = value;             raisepropertychanged("tabs");         }     }      public tabitemviewmodel()     {         tabs = new observablecollection<tabitem>();           // uris          // enabled pics         _aurisenabled[(int)enum_tabs.research_tab] = new uri("pack://application:,,,/images/research_enabled.png");         _aurisenabled[(int)enum_tabs.engineering_tab] = new uri("pack://application:,,,/images/engineering_enabled.png");          // disabled pics         _aurisdisabled[(int)enum_tabs.research_tab] = new uri("pack://application:,,,/images/research_disabled.png");         _aurisdisabled[(int)enum_tabs.engineering_tab] = new uri("pack://application:,,,/images/engineering_disabled.png");          // tab backgrounds         _aurisbackgroundpics[(int)enum_tabs.research_tab] = new uri("pack://application:,,,/images/research_background.png");         _aurisbackgroundpics[(int)enum_tabs.engineering_tab] = new uri("pack://application:,,,/images/engineering_background.png");          // load images         (int iimageindex = 0; iimageindex < number_of_tabs; iimageindex++)         {             _aenabledtabimages[iimageindex] = new bitmapimage(_aurisenabled[iimageindex]);             _adisabledtabimages[iimageindex] = new bitmapimage(_aurisdisabled[iimageindex]);             _abackgroundtabimages[iimageindex] = new bitmapimage(_aurisbackgroundpics[iimageindex]);         }           tabs.add(new tabitem { tabname = "research", tabimage_enabled = _aenabledtabimages[(int)enum_tabs.research_tab], tabimage_disabled = _adisabledtabimages[(int)enum_tabs.research_tab], tabimage_background = _abackgroundtabimages[(int)enum_tabs.research_tab], tabcontents = new tabresearchviewmodel() });         tabs.add(new tabitem { tabname = "engineering", tabimage_enabled = _aenabledtabimages[(int)enum_tabs.engineering_tab], tabimage_disabled = _adisabledtabimages[(int)enum_tabs.engineering_tab], tabimage_background = _abackgroundtabimages[(int)enum_tabs.engineering_tab], tabcontents = new tabengineeringviewmodel() });          }       } } 

my problem id how specify custom template (for tabheader, since im showing picture instead of textblock) in addition view.

i've tried searching on google & on site, couldn't find solution use custom template. i've found solution of templeateselector, i'm unsure how combine mvvm.

i've attempted write in mainwindow.xaml:

        <tabcontrol background="black" margin="0,25,0,0" borderthickness="0,0,0,0"  itemssource="{binding tabs}" borderbrush="black" >              <tabcontrol.resources>                 <datatemplate datatype="{x:type viewmodel:tabresearchviewmodel}">                     <views:tabresearchview />                 </datatemplate>                 <datatemplate datatype="{x:type viewmodel:tabengineeringviewmodel}">                     <views:tabengineeringview />                 </datatemplate>             </tabcontrol.resources>          ... (removed clarity) 

i want replace <textblock text="{binding tabcontents}" foreground="white" /> </datatemplate> display "view" (page), while binding tabs collection...

would appreciate on matter. in advanced...

nevermind, i've figured out myself.

my solution was: 1. replace views page usercontrol 2. replace "textblock" line line:

<contentpresenter content="{binding tabcontents}" />