user controls - WPF Caliburn Micro: Exchanging UserControls in a Window dynamically using ContentControl -

this question related add usercontrol caliburm micro dynamically. have read other related threads before open new thread, still don't understand , find no solution. please accept apology if of take duplicate.

i have window (mainview) contains "main" grid (aka layoutroot) 2 columns.

on left column there 2 buttons: "display view 1" , "display view 2".

• if user click "display view 1", "display1view" (is usercontrol contains textblock text "view 1") should shown on right column, replace current one.
• if user click "display view 2", "display2view" (is usercontrol contains textblock text "view 2") should shown on right column, replace current one.

my sample code contains following views , viewmodels:

• mainview.xaml , mainviewmodel.cs
• display1view.xaml , display1viewmodel.cs
• display2view.xaml , display2viewmodel.cs

in sample code contentcontrol doesn't recognize usercontrol. doing wrong? how bind contentcontrol correctly? please feel free modify sample code. thank in advance

mainview.xaml

<window x:class="testcalimicontentcontrol.mainview"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     title="main view"     width="525"     height="350">     <grid x:name="layoutroot" showgridlines="true">         <grid.columndefinitions>             <columndefinition width="30*" />             <columndefinition width="100*" />         </grid.columndefinitions>         <stackpanel x:name="leftnavpanel" grid.column="0">             <button x:name="display1" content="display view 1" />             <button x:name="display2" content="display view 2" />         </stackpanel>         <contentcontrol x:name="maingridcontent" grid.column="1" />     </grid> </window> 

mainviewmodel.cs

public class mainviewmodel : propertychangedbase {     private contentcontrol _maingridcontent;     public contentcontrol maingridcontent     {         { return _maingridcontent; }         set         {             _maingridcontent = value;             notifyofpropertychange(() => maingridcontent);         }     }      public void display1()     {         //maingridcontent = new display1viewmodel(); // cannot convert source type error     }      public void display2()     {         // maingridcontent = new display2viewmodel(); // cannot convert source type error               } } 

display1view.xaml

<usercontrol x:class="testcalimicontentcontrol.display1view"          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"          d:designheight="300"          d:designwidth="300"          mc:ignorable="d">     <grid>         <textblock horizontalalignment="center" fontsize="72"                     text="view 1"/>      </grid> </usercontrol> 

display1viewmodel.cs

using system; using system.windows.controls; using caliburn.micro;  namespace testcalimicontentcontrol {     public class display1viewmodel : propertychangedbase {} } 

first, start recommending read caliburn.micro documentation, part screens, conductors, , composition: http://caliburnmicro.com/documentation/composition

that being said, can modify code working.

1) since mainviewmodel supposed conducting other items, should descend conductor<t>. in case, have conduct caliburn screen class.

public class mainviewmodel : conductor<screen> 

2) in mvvm, view models should know nothing of view. should not see ui classes such contentcontrol. change property of type screen, don't need property @ since using conductor. so, remove maingridcontent property , backing field.

3) within display1 , display2 methods, invoke caliburn's conductor method activateitem show appropriate item.

public void display1() {     activateitem(new display1viewmodel()); } 

4) in mainview.xaml need bind contentcontrol conductor's active item property, is, convention, activeitem.

<contentcontrol x:name="activeitem" grid.column="1" /> 

5) finally, since conductor conducting screens, need make them screens. screens helpful because have lifecycle , allow know when activated/deactivated. both display1 , display2.

public class display1viewmodel : screen {} 

this should , running.