title: How to display user control within the main window in WPF using MVVM
body: <p>I have a WPF application and just embarked in learning MVVM pattern.</p>
  
  <p>My goal is that in my application the main window has a button. When this button is clicked, another window (or user control) will appear on top of the main window.</p>
  
  <p>This is the code of MainWindow.xaml</p>
  
  <pre><code>&lt;Window x:Class="SmartPole1080.View.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:utilities="clr-namespace:SoltaLabs.Avalon.Core.Utilities;assembly=SoltaLabs.Avalon.Core"
      xmlns:userControls="clr-namespace:SoltaLabs.Avalon.View.Core.UserControls;assembly=SoltaLabs.Avalon.View.Core"
      xmlns:controls="clr-namespace:WpfKb.Controls;assembly=SmartPole.WpfKb"
      xmlns:wpf="clr-namespace:WebEye.Controls.Wpf;assembly=WebEye.Controls.Wpf.WebCameraControl"
      xmlns:view="clr-namespace:SmartPole.View;assembly=SmartPole.View"
      xmlns:view1="clr-namespace:SmartPole1080.View"
      xmlns:behaviors="clr-namespace:SoltaLabs.Avalon.Core.Behaviors;assembly=SoltaLabs.Avalon.Core"
      Title="Smart Pole" 
      WindowStartupLocation="CenterScreen"
      Name="mainWindow"
      behaviors:IdleBehavior.IsAutoReset="True" WindowState="Maximized" WindowStyle="None"&gt;
  &lt;Canvas Background="DarkGray"&gt;
      &lt;!--Main Grid--&gt;
      &lt;Grid Width="1080" Height="1920" Background="White" Name="MainGrid"
            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"&gt;
          &lt;StackPanel Background="Black"&gt;                
              &lt;Grid Background="#253341"&gt;
                  &lt;Grid.RowDefinitions&gt;
                      &lt;RowDefinition Height="5"/&gt;
                      &lt;RowDefinition Height="*"/&gt;
                      &lt;RowDefinition Height="5"/&gt;
                  &lt;/Grid.RowDefinitions&gt;
                  &lt;Grid.ColumnDefinitions&gt;
                      &lt;ColumnDefinition Width="5"/&gt;
                      &lt;ColumnDefinition Width="264"/&gt;
                  &lt;/Grid.ColumnDefinitions&gt;
  
                  &lt;Grid Grid.Row="1" Grid.Column="1"&gt;
                      &lt;Button Tag="{StaticResource EmergencyImg}" Name="EmergencyButton"
                              Command="{Binding ShowEmergencyPanel}"&gt;
                          &lt;Image Source="{StaticResource EmergencyImg}" /&gt;
                      &lt;/Button&gt;
                  &lt;/Grid&gt;
  
                  &lt;!--Emergency Window Dialog--&gt;
                  &lt;Grid Name="EmergencyPanel"&gt;
                      &lt;view1:EmergencyInfo x:Name="EmergencyInfoPanel"/&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/StackPanel&gt;
      &lt;/Grid&gt;
      &lt;!--Main Grid--&gt;
  &lt;/Canvas&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the other window (user control - EmergencyInfo.xaml)</p>
  
  <pre><code>&lt;UserControl x:Class="SmartPole1080.View.EmergencyInfo"
           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" 
           xmlns:local="clr-namespace:SmartPole1080.View"
           mc:Ignorable="d" 
           d:DesignHeight="1920" d:DesignWidth="1050"
           x:Name="EmergencyInfoPanel"&gt;
  &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="50"/&gt;
          &lt;RowDefinition Height="*"/&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Border Grid.Row="0" BorderBrush="White" Background="White"&gt;
          &lt;Button Background="White" BorderThickness="0" FontWeight="Bold" Foreground="Red" 
                  HorizontalAlignment="Right" FontSize="25" Margin="0,0,15,0"
                  Command="{Binding HideEmergencyPanel}"&gt;
              close X
          &lt;/Button&gt;
      &lt;/Border&gt;
      &lt;Image Grid.Row="1" Source="{StaticResource EdenParkInfoImg}" HorizontalAlignment="Left" /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <p>I want to implement this behavior using an MVVM pattern.  I have set the binding <code>ShowEmergencyPanel</code> in button EmergencyButton to show EmergencyInfo when this button is click.</p>
  
  <p>Any help is greatly appreciated.</p>