title: Change the User Control of a Window dynamically in WPF (MVVM)
body: <p>I'm new with <strong>WPF</strong> and I was just doing a simple menu using <strong>MVVM</strong> with <strong>bindings</strong> and <strong>commands</strong> but I think I'm doing something wrong. I just want to change all the Window Content importing a new <code>UserControl</code> I defined, everytime I press a Menu Button. That means I want to disappear the menu and show a new content (the UserControls I mentioned before).</p>
  
  <p>Well I have the <strong>main window</strong> (ControlPanel):</p>
  
  <pre><code>&lt;Window x:Class="OfficeMenu.Views.Menu.ControlPanel"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="Control Panel" Height="800" Width="800"&gt;
  &lt;Grid&gt;
  
      &lt;ContentControl Content="{Binding contentWindow}"/&gt;
  
  &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>This one of the <strong>UserControls</strong> that provides a Menu of buttons to the Main Window when I run the project:</p>
  
  <pre><code>&lt;UserControl x:Class="OfficeMenu.Views.ButtonsMenu"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
           mc:Ignorable="d" 
           d:DesignHeight="300" d:DesignWidth="300"&gt;
  &lt;UserControl.Resources&gt;
      &lt;!-- One style for each *type* of control on the window --&gt;
      &lt;Style TargetType="Button"&gt;
          &lt;Setter Property="Margin" Value="5"/&gt;
      &lt;/Style&gt;
  
  &lt;/UserControl.Resources&gt;
   &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="1*" /&gt;
          &lt;ColumnDefinition Width="1*" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="1*" /&gt;
          &lt;RowDefinition Height="1*" /&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Button Command="{Binding OpenUsersCommand}"&gt;BUTTON 1&lt;/Button&gt;
      &lt;Button Grid.Column="1"&gt;BUTTON 2&lt;/Button&gt;
      &lt;Button Grid.Column="1" Grid.Row="2" &gt;BUTTON 3&lt;/Button&gt;
      &lt;Button Grid.Row="1"&gt;BUTTON 4&lt;/Button&gt;
  &lt;/Grid&gt;
  &lt;/UserControl&gt;
  </code></pre>
  
  <p><strong>This is the ViewModel Im using for it:</strong></p>
  
  <pre><code>class MenuViewModel : ViewModelBase
  {
      RandomModel _model;  &lt;!-- It does nothing important --&gt;
      private UserControl _content;
  
      public ICommand OpenUsersCommand { get; private set; }
  
      public UserControl Content
      {
          get { return _content; }
          set {
              _content = value;
              NotifyPropertyChanged("contentWindow");
          }
      }
  
      public MenuViewModel(RandomModel model )
      {
          this._model= model;
          OpenUsersCommand = new RelayCommand(OpenUsers,null);
      }
  
      private void OpenUsers()
      {
          Content = new UsersPanel();  //This is the UserControl we need to load dinamically
      }
  }
  </code></pre>
  
  <p>In App.xaml.cs we load the main window:</p>
  
  <pre><code>public partial class App : Application
  {
  
      private void OnStartup(object sender, StartupEventArgs e)
      {
          ControlPanel view = new ControlPanel();
          view.ShowDialog();
      }
  }
  </code></pre>
  
  <p>Now, the controlPanel.xaml.cs:</p>
  
  <pre><code>public ControlPanel()
      {
          InitializeComponent();
  
          ModelRandom model = new ModelRandom(); &lt;!-- It does nothing yet --&gt;
          MenuViewModel viewmodel = new MenuViewModel(model);
          Content = new BottonsMenu();  &lt;!-- We load a default UserControl when we run the program --&gt;
          this.DataContext = viewmodel;
      }
  }
  </code></pre>
  
  <p>Thank you very much.</p>