Creating a custom control is a common thing to do when developing a Xamarin Forms application. In many cases, the main purpose of creating one is to have a reusable control that we can use across all our application.
In this article, I’m NOT going to show you how to create a custom control (if you want to learn about that you can read this great article by the MFractor blog). My goal is to give some tips and tricks that you can apply when creating one.
Tip 1: Use Control Templates as part of your Control
If you are creating a Custom Control that has XAML + CodeBehind, using a Control Template in the control XAML will give you access to the control bindable properties.
For example:
If you are creating an ExpandableParagraph Control with some bindable properties that the user can set when interacting with it:
If you want to use the bindable properties of the control in the XAML part, the first thing that comes to mind is to change the BindingContext to be the control itself.
A better way to do this is to wrap the view within Control Template, that way the BindingContext will be the control itself:
Check the source of the control here.
Tip 2: Use C# code for controls with a Simple UI
If you are creating a control with a simple UI that creates/updates UI elements dynamically or the UI content for the elements will be defined where it’s used. Personally, I prefer to do it all in C# code. Why? Because I think is:
- Easier to maintain
- Performance is better since it won’t have to render the XAML part.
- Full control of the UI Elements
- Part of the UI will be defined when using the control
For example: A Dynamic Segmented Tab Control
If you analyze the UI above, each tab is quite simple, just a Label and a BoxView wrapped into a dynamic collection. For this scenario, I would do it all in C# code since it’s easier to replicate and it will give me the flexibility of specifying the UI content for the elements when using the control.
Check the source for the control here.
Tip 3: Use a Default Value Creator when is necessary
If you have a Bindable Property that needs to execute a function to set a default value, you can do it by using DefaultValueCreator.
For example:
Tip 4: Use a PropertyChanged method for the specific property
When handling property changes of a property, you could override the OnPropertyChanged method of the control and check for that property. The problem with this approach is that it will listen to the property changes for all the properties defined in the control.
A better way is to define a Property Changed method for that specific property so that it only listens to the changes of that property.
Tip 5: DON’T FORGET TO UNSUBSCRIBE
Handling events is quite common when creating a new control, but when we subscribe to an event is important to unsubscribe. If we don’t do that it will cause memory leaks in our application.
For example:
As you can see every time this ListView is constructed, it will subscribe to the OnItemAppearing event.
A better version of this code would be:
That’s all for now, stay tuned for the second part of this article with more tips.
Happy coding!
