How to place an XAML usercontrol in a grid

Question

I have the following main.xaml and usercontrol.

I need to place several times the user control on the 2nd row, 2nd column of the grid, By using visual studio it wont allow to drag and drop the user control, so I suppose I have to do it by code, I just dont know how

MainPage.xaml

<Grid HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" x:Name="grid" Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="150"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="250"/>
        </Grid.ColumnDefinitions>
        <Border BorderBrush="White" BorderThickness="3" Grid.Column="1" Background="Red" CornerRadius="30"/>
        <TextBlock x:Name="txtCountry" Grid.Column="1" TextWrapping="Wrap"  FontSize="36" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <TextBlock x:Name="txtTime" Grid.Row="1" TextWrapping="Wrap" FontSize="180" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

Usercontrol

<UserControl
    x:Class="AlarmPro.TimeOnCity"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AlarmPro"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="150"
    d:DesignWidth="250">

    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Border BorderBrush="#FFDE6A6A" BorderThickness="1" Grid.Row="0" Grid.Column="0" Background="#FFDC4646">
            <TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
        </Border>
        <Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Background="#FFAE4F00">
            <TextBlock TextWrapping="Wrap" Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36"/>
        </Border>

    </Grid>
</UserControl>

Answer 1

Do you mean like this?

 <my:UserControlName Grid.Column="2" Grid.Row="2" ... />

<my: in this case is the alias for the CLR namespace the UserControl resides in. It is defined at the top of your XAML, inside the <Window> or <UserControl> tag depending on context.

For example,

<Window ... 
    xmlns:my="clr-namespace:AssemblyName"
    ...
/>

Answer 2

MainPage.Xaml

<Page
    x:Class="UserControlExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UserControlExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="MainContent" Background="Azure" >
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Hidden" 
                VerticalScrollBarVisibility="Hidden">                        
            <local:UserControl1 x:Name="MyHelloWorldUserControl" Grid.Row="1" />
        </ScrollViewer>
    </Grid>           
</Page>

UserControl1.xaml

<UserControl
    x:Class="UserControlExample.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UserControlExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid Background="Bisque">
        <StackPanel>
            <StackPanel Orientation="Horizontal" Height="81">
                <TextBlock Text="Your Name is" Foreground="Blue" FontSize="30" Margin="0,0,0,10"/>
                <TextBox x:Name="Input" Background="White" Width="225" />
             </StackPanel>
             <Button Content="Click Me" Foreground="Brown" FontSize="30" Click="Button_Click"/>
             <TextBlock x:Name="Output" FontSize="100"/>
         </StackPanel>
     </Grid>
 </UserControl>