Creating User Controls In Xamarin Forms

In my earlier blog about accordion user control, I missed explaining about the whole need and purpose of user controls.The concept of User Controls is not new, and exists in many different platforms including ASP.NET, XAML for Windows and Windows Phone as well as Web Forms. Basically the idea is to create a collection of controls that will be reused as a single control throughout the application.The User Control exposes properties allowing you to reuse the control while allowing each instance of the control to have different settings, layout, or behavior.

Another benefit of user control is that we can bundle them separately in a project and can use them as a custom control in any other project /application and because of this very reason I personally prefer to create user controls for any repetitive UI I need in any of my applications.

As per Xamarin documentation, the view which should be mostly used to create user control should be ContentView. In an earlier article I explained that to create an accordion and in this article I will be creating a very commonly required user control ‘Form Containers’ which looks something like the following MockUp:
Here we have a Container with Title with one background and content with different background, giving the screen a feel like Form control. Let's create similar UI in Xamarin Forms.

Firstly, create a new project in Xamarin/Visual Studio (see this article for steps) and add new ContentView XAML page. Add the following XAML to the control page:

In the above code we are creating a Grid with 2 Rows (one for header and second for content) and 3 columns (first and last is for giving the spacing). In the first row we are putting the Frame with Header label and in second row we are putting a blank frame for the content of the control.
As we can’t create properties of the control in XAML, so write the following code in code behind of control to create it’s properties:

As you can see from the above code the control will have five properties, their names are self-explanatory for their requirements like one for ContainerContent, another for Content Background Color and so on. This completes the code of the user control.

As an example on how to use the control in XAML lets create a new XAML ContentPage and add the following code in that to create two forms one for Login and one for SignUp:

I have just scratched the surface of user control creation in Xamarin Forms, you can dig deeper into it buy executing the code for Android & Windows.The source code of sample application containing this user control and pages using the control can be downloaded from GitHub.

Let me know if I have missed anything or you have any queries/suggestions.