WPF popup UserControl

Learn how to create UserControl in WPF.

Create a WPF project and create a UserControl. The UserControl contains one calendar.
 
 <UserControl x:Class="WpfApplication6.UserControl1 "
              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" Name="user"
              d:DesignHeight="158" d:DesignWidth="183">
     <Grid Height="154" Width="186">
         <Calendar Height="150" HorizontalAlignment="Left" Name="calendar1" VerticalAlignment="Top" Width="189" />
     </Grid>
 </UserControl>
 
In the main window create a popup xaml code.Create a reference of theUserControl. Then call the UserControl inside the popup.
 
 <Window x:Class="WpfApplication6.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:usr="clr-namespace:WpfApplication6"
         Title="MainWindow" Height="350" Width="525">
     <StackPanel>
         <ToggleButton Name = "button" Height="45" Width="154" Foreground="Green">
             <ToggleButton.Template>
                 <ControlTemplate  TargetType="ToggleButton">
                     <TextBlock> Click here to view the popup</TextBlock>
                 </ControlTemplate>
             </ToggleButton.Template>
         </ToggleButton>
         <Popup IsOpen="{Binding IsChecked, ElementName=button}">
             <Border Background="Green">
                 <usr:UserControl1></usr:UserControl1>
             </Border>
         </Popup>
     </StackPanel>
 </Window>