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:
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:
Once your User Control is added, you will notice that the code behind file is inheriting a class UserControl as:
Step 3: Now add a control that is derived from the Control class, that is a Custom Control as:
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:
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:
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:
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:
Once you are done with all these, you will get the desired output as:
I hope you have gotten an idea of how to use what. Enjoy learning!!!