How to place XAML user control in a grid

Question

I have the following main.xaml and usercontrol.

I need to add a user control several times to the second row, the second grid column. Using visual studio, it will not allow the user control to be dragged, so I suppose I need to do this with code, I just don’t 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 this?

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

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

For instance,

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

Answer 3

MainPage.xaml , I bind the UserControl login using the namespace : xmlns: UC = "clr-namespace: Test.Views", since I have usercontrol in the 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, remember to use the event handler in MainPage.xaml to grab the held event from the User User to perform other actions.

MainPage.xaml

 <UC:Login BtnLoginClick="Login_BtnLoginClick"/> 

Here "BtnLoginClick" is the event handler defined in Login.xaml [User Control].

Create a new event for this "BtnLoginClick" event when 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... }