title: WPF Caliburn Micro: Exchanging UserControls in a Window dynamically using ContentControl
body: <p>This question is related to <a href="https://stackoverflow.com/questions/10971253/add-a-usercontrol-to-caliburm-micro-dynamically">Add a usercontrol to caliburm micro dynamically</a>. 
  I have read any other related threads before open this new thread, but I still don't understand and find no solution. Please accept my apology if some of you take this as duplicate.</p>
  
  <p>I have a window (MainView) contains "main" Grid (aka LayoutRoot) with 2 columns. </p>
  
  <p>On left column there are 2 buttons: "Display View 1" and "Display View 2".</p>
  
  <ul>
  <li>If user click "Display View 1", the "Display1View" (is a UserControl contains TextBlock with Text "View 1") should be shown on the right column, replace the current one. </li>
  <li>If user click "Display View 2", the "Display2View" (is a UserControl contains TextBlock with Text "View 2") should be shown on the right column, replace the current one.</li>
  </ul>
  
  <p>My sample code contains following views and viewmodels:</p>
  
  <ul>
  <li>MainView.xaml and MainViewModel.cs</li>
  <li>Display1View.xaml and Display1ViewModel.cs</li>
  <li>Display2View.xaml and Display2ViewModel.cs</li>
  </ul>
  
  <p>In my sample code the ContentControl doesn't recognize the UserControl. What am I doing wrong? How to bind ContentControl correctly? Please feel free to modify my sample code. Thank you in advance</p>
  
  <p>MainView.xaml</p>
  
  <pre><code>&lt;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"&gt;
      &lt;Grid x:Name="LayoutRoot" ShowGridLines="True"&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="30*" /&gt;
              &lt;ColumnDefinition Width="100*" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;StackPanel x:Name="LeftNavPanel" Grid.Column="0"&gt;
              &lt;Button x:Name="Display1" Content="Display View 1" /&gt;
              &lt;Button x:Name="Display2" Content="Display View 2" /&gt;
          &lt;/StackPanel&gt;
          &lt;ContentControl x:Name="MainGridContent" Grid.Column="1" /&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>MainViewModel.cs</p>
  
  <pre><code>public class MainViewModel : PropertyChangedBase
  {
      private ContentControl _mainGridContent;
      public ContentControl MainGridContent
      {
          get { return _mainGridContent; }
          set
          {
              _mainGridContent = value;
              NotifyOfPropertyChange(() =&gt; MainGridContent);
          }
      }
  
      public void Display1()
      {
          //MainGridContent = new Display1ViewModel(); // cannot convert source type error
      }
  
      public void Display2()
      {
          // MainGridContent = new Display2ViewModel(); // cannot convert source type error          
      }
  }
  </code></pre>
  
  <p>Display1View.xaml</p>
  
  <pre><code>&lt;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"&gt;
      &lt;Grid&gt;
          &lt;TextBlock HorizontalAlignment="Center" FontSize="72" 
                     Text="View 1"/&gt;
       &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p>Display1ViewModel.cs</p>
  
  <pre><code>using System;
  using System.Windows.Controls;
  using Caliburn.Micro;
  
  namespace TestCaliMiContentControl
  {
      public class Display1ViewModel : PropertyChangedBase {}
  }
  </code></pre>