Do you want to create your own WPF control? Why would you do that? One reason might be to simply split a large user interface into more than one file. Creating your own user control is not difficult. In other UI frameworks, this can be quite cumbersome, but WPF makes it pretty easy, offering you two ways of creating your own control: User Controls and Custom controls.

In Adam Nathan’s book WPF 4.5 Unleashed by O’Reilly, on page 719, he starts to describe the creation of a user control called FileInputBox. It combines a TextBox with a Browse Button. The user can either type the file and its path in the text box or click the Browse button to find it with a standard OpenFileDialog box.

“A WPF UserControl inherits the UserControl class and acts very much like a WPF Window: You have a XAML file and a Code-behind file. In the XAML file, you can add existing WPF controls to create the look you want and then combine it with code in the Code-behind file, to achieve the functionality you want. WPF will then allow you to embed this collection of functionality in one or several places in your application, allowing you to easily group and re-use functionality across your application(s)” is what the website WPF Tutorial says in the article on User Controls and Custom Controls.

WPF Tutorial says: “User controls, in WPF represented by the UserControl class, is the concept of grouping markup and code into a reusable container, so that the same interface, with the same functionality, can be used in several different places and even across several applications.” So the end result is that, as WPF Tutorial says: “we can reuse this entire piece of functionality in a single line of code”.

Creating a User Control

Add a user control to your project just like you would add another Window, by right-clicking on the project or folder name where you want to add it, clicking Add and then User Control. The default name is UserControl1, but you should give it a more descriptive name. I will use UserControl1. You get two files added to the project: UserControl1.xaml and UserControl1.xaml.cs. The initial main project is UserControlSimple.

Below is the MainWindow.xaml

<Window x:Class="UserControlSimple.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:UserControlSimple"
        xmlns:uc="clr-namespace:UserControlSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="UserControlSimple" Height="250" Width="400">
    <StackPanel>
        <TextBlock Margin="4">This is a User Control example program.</TextBlock>
        <TextBlock Margin="4">This text is in the main program.</TextBlock>
        <uc:UserControl1 Margin="4" Width="80"/>
    </StackPanel>
</Window>

Below is the UserControl1.xaml file.

<UserControl x:Class="UserControlSimple.UserControl1"
             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:UserControlSimple"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="100">
    <Button Name="myButton" Click="MyButton_Click">
            Click Me
    </Button>
</UserControl>

The code behind is just a message box that responds to the click event and I won’t show that code here for brevity.

Consuming (using) the User Control

With the above code in place, all we need is to consume (use) the User control within our Window. We’ll do that by adding a reference to the namespace the UserControl lives in, in the top of the XAML code of your Window.

xmlns:uc="clr-namespace:UserControlSimple"

In just one line of code in the main XAML file we get a button, as well as any of it’s code-behind. With that same one line of code would could have gotten a lot more controls if we had’ve coded them.

<uc:UserControl1 Margin="4" Width="80"/>