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>

Solution 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"
    ...
/>

Solution 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>

Solution 3

MainPage.xaml, I am binding a login UserControl by using the namespace : xmlns:UC="clr-namespace:Test.Views" , since I have my usercontrol in Folder named "Views".

<ScrollViewer>
<UC:Login BtnLoginClick="Login_BtnLoginClick"/>
</ScrollViewer>

Login.cs

public partial class Login : UserControl    {

    public event EventHandler BtnLoginClick;

    public Login()
    {
        InitializeComponent();
    }

    private void btnLogin_Click(object sender, RoutedEventArgs e)
    {
        string userName = txtUserName.Text;
        string userPassword = txtUserPassword.Password.Trim();
        if (userName != null && userName != string.Empty && userPassword != null &&       userPassword != string.Empty)
        {
            if (this.BtnLoginClick != null)
            {
                this.BtnLoginClick(this, e);
            }
        }
        else
        {
            MessageBox.Show("Invalid username or password");
        }
    }

}

Finally, dont forgot to use the event handler in MainPage.xaml to capture the button clicked event from Login Usercontrol to do other actions.

MainPage.xaml

<UC:Login BtnLoginClick="Login_BtnLoginClick"/>

Here "BtnLoginClick" its an event Handler defined in the Login.xaml[User Control].

Create new event for this "BtnLoginClick" event as i created "Login_BtnLoginClick".

MainPage.cs

private void Login_BtnLoginClick(object sender, EventArgs e)
{
Messagebox.Show("Event captured successfully");
////Here you can add your stuffs...     
}