Custom Controls in WPF

This article will briefly introduce the types of custom controls one can build in WPF. Someone might ask why we need custom controls if we can do everything with Styles and Control Templates. Well, I would say still there are scenarios where one may need custom controls. One of them can be, while creating a reusable control that is composed of many other controls, in other words I want to create a control for data entry that will take a Temporary Address and a Permanent Address. Here I don’t want to copy/paste XAML code repeatedly for these two addresses. So, here it’s better to create a one User Control and reuse it. Another scenario can be, when we need a functionality that is not provided by existing WPF controls, here custom control can be the best solution.

UserControl vs Control

Now before proceeding further, it is important to have a look at the two most common classes of WPF namely UserControl and Control.

A UserControl should be chosen when you want to combine existing components, but here complex customizations won’t be supported. So, if you need a lot of customizations or you want control templates, then a Control class will be your choice. The best example can be themes that require a Control class.

Now, let’s quickly dig into the code.

Step 1: Create a new project of WPF application type as in the following:

new project in WPF 

Once the project is created, here I will use both types of controls to provide you a better idea of how stuff works.

Step 2: Right-click on the project and create a new user control. Please ensure that you are adding the right user control that is of WPF and not of Windows Forms as in the following:

Adding user control 

Once your User Control is added, you will notice that the code behind file is inheriting a class UserControl as:

class UserControl 

Step 3: Now add a control that is derived from the Control class, that is a Custom Control as:

add a control 

After adding the control, if you see in the Solution Explorer, you will find that this time the XAML file is not added for a newly created custom control, but there is a new file under Themes as:

 Solution explorer 
On opening the CustomControlAddress.cs, you will notice that it is inherited from the Control class.

Step 4: Now before going forward, let’s proceed and first populate our ResidentialDetails control. For simplicity purposes, I am taking here only two fields named Address and City as:

XAML file 

Now the code snippet above will provide you a simple address control that is a best example of a User control. Now let’s proceed to and modify our Custom control.

Step 5: Let’s modify the Generic.xaml with simple code as in the following:

Generic 

Now in order to test all these controls we need to modify our MainWindow.xaml as in the following.

Step 6: Let’s integrate all the user controls:

 integrate all the user controls 
Once you are done with all these, you will get the desired output as:

output  

I hope you have gotten an idea of how to use what. Enjoy learning!!!