Add a UserControl programmatically

Hi, I need help with WPF and this is my scenario.
I have a user control form(which code and image can be seen below, this control is initially not  shown in the page, and upon processing my logics/business, if its comply with the condition, this form form will be SHOWN/added to the main window - with an initial data comes from the the logics, thenupon clicking save button, the data will be stored in db then hide the form. another way to display this form is by manually clicking a [+] button that is visible in my main form

(unfortunately can't add the image the msdn says "Body text cannot contain images or links until we are able to verify your account.")

<UserControl x:Class="MyWPF.Views.FormControl"
             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:c="clr-namespace:MyWPF.Commands"
             xmlns:xctk="clr-namespace:Xceed.Wpf.Toolkit;assembly=WPFToolkit.Extended"
             d:DesignHeight="30" d:DesignWidth="450" ><Grid Width="450" Height="30" ><Grid.ColumnDefinitions><ColumnDefinition Width="30"/><ColumnDefinition Width="40"/><ColumnDefinition Width="290"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><CheckBox Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"></CheckBox><TextBox Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"
          Width="280"></TextBox><xctk:IntegerUpDown Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Center" Maximum="120" Minimum="1" Value="1"/></Grid></UserControl>