UserControl In WPF

The purpose of UserControls is reusability.

 

We have seen how to reuse resources in WPF & code in C#.

 

Reusing the entire screen is just insane.

 

Let's say we want to create a login form in WPF. As usual, we can go ahead and add a Window as follows,

 

 

Code

<Window x:Class="A.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:A"
        mc:Ignorable="d"
        Title="MainWindow" Height="120" Width="250">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label x:Name="LabelUserName"
               Content="User Name:"/>
        <Label x:Name="LabelPassword"
               Content="Password:"
               Grid.Row="1"/>
        <TextBox x:Name="TextBoxUserName"
                 Height="20"
                 Width="150"
                 Grid.Column="1"/>
        <TextBox x:Name="TextBoxPassword"
                 Height="20"
                 Width="150"
                 Grid.Column="1"
                 Grid.Row="1"/>
        <Button x:Name="ButtonLogin"
                Height="20"
                Width="100"
                Content="Login"
                HorizontalAlignment="Center"
                Margin="20 0 0 0"
                Grid.Row="2"
                Grid.ColumnSpan="2"/>
    </Grid>
</Window>

Now, what if I want to resuse this screen? We can achieve this by adding UserControl in our project.

 

 

LoginPage.xaml (UserControl): Now cut your code from MainWindow.xaml and paste it in LoginPage.xaml.

<UserControl x:Class="A.LoginPage"
             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:local="clr-namespace:A"
             mc:Ignorable="d"
             d:DesignHeight="120" d:DesignWidth="250">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Label x:Name="LabelUserName"
               Content="User Name:"/>
        <Label x:Name="LabelPassword"
               Content="Password:"
               Grid.Row="1"/>
        <TextBox x:Name="TextBoxUserName"
                 Height="20"
                 Width="150"
                 Grid.Column="1"/>
        <TextBox x:Name="TextBoxPassword"
                 Height="20"
                 Width="150"
                 Grid.Column="1"
                 Grid.Row="1"/>
        <Button x:Name="ButtonLogin"
                Height="20"
                Width="100"
                Content="Login"
                HorizontalAlignment="Center"
                Margin="20 0 0 0"
                Grid.Row="2"
                Grid.ColumnSpan="2"/>
    </Grid>
</UserControl>

Now update your MainWindow.xaml as follows: Just add local namespcae, from where MainWindow is supposed to load UserLogin.xaml into itself.

 

The concept is the same as the HAS-A relationship in OOPS, reusing a class into another class.  

<Window x:Class="A.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:A"
        mc:Ignorable="d"
        Title="MainWindow" Height="120" Width="250">
    <Grid>
        <local:LoginPage></local:LoginPage>
    </Grid>
</Window>

 

Output screen

 

 

 

Now, there might be a question in your mind: Why do we need UserControl to serve the reusability purpose? We can directly reuse another Window. But you can't do that, as Window is the  top pest control in the visual tree, the Window cannot have another window as a child.

 

.Net will throw the following error:

 

InvalidOperationException: Window must be the root of the tree. Cannot add Window as a child of Visual.

 

That's why UserControl has been designed.

 

I hope you've come away from this with a real grasp of the UserControls and how it can be applied to your personal projects in the future.

If you've enjoyed the article, which I hope you have, please apply your knowledge to enliven the code in your projects.

 

if you have any questions or just want to connect, follow these links.

• Twitter 
• LinkedIn
• GitHub