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>

Bourse

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

Eberhard

How do you define which namespace the actual UserControl is in? Is that the xmlns:local="using:UwpProjectName.Namespace" definition in the UserControl? – Calvin

@DenisG.Labrecque yes, that's the xmlns:my="clr-namespace:AssemblyName" line – Eberhard

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>

Mediacy

Any chance to highlight the relevant namespaces? This isn't really helping. – Calvin

Answer 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...     
}

Unscrew

Answer 4

For UWP, in UserControl.xaml, find the local namespace xmlns:local notation: xmlns:local="using:ProjectName.Folder" at the top (by convention, C# namespaces are named the same way as the folder that contains them, so folder also means namespace).

In MainPage.xaml, add a reference to this namespace. The reference prefix can be any name desired: for example, CustomPrefix, as in xmlns:CustomPrefix="using:ProjectName.Folder". Then, anywhere in MainPage.xaml, display the control by prefixing its name with <CustomPrefix:...>.

UserControl.xaml

<UserControl
   xmlns:local="using:ProjectName.Folder">

MainPage.xaml

<Page
   xmlns:CustomPrefix="using:ProjectName.Folder">

   <CustomPrefix:UserControl />

</Page>

The project needs to be built to discard XAML errors in Visual Studio, otherwise the design view remains blank and the XAML has green squiggles.

Calvin