How to Create a Custom Color Picker for Xamarin.Forms

In this blog post I'll show you how to create a custom color picker control for Xamarin.Forms. This component is built entirely in Xamarin.Forms in the portable or shared project. It demonstrates the simplest kind of custom component that you could create in Xamarin.Forms, as it doesn’t require any platform-specific code in the Android or iOS modules. This means the component does not require a custom renderer, but I’ll explain more on that later. Download ColorPickerApp Sample >>

Defining the Appearance

The first step is to define the appearance of our custom control. Since this control is built entirely in Xamarin.Forms, we're limited to what the platform offers. This color picker component will be defined with a BoxView, and Image and a Picker control that is not visible. ColorPicker.XAML: For the ColorPicker component, we need to extend some basic View so we inherit all the necessary layout and rendering capabilities. Since our UI is basically just a Grid, we'll extend the Grid class: To add this to your project you can simply add a new Forms XAML Page and replace ContentPage with Grid.

Defining the Object Model

Next we need to define the public properties that we can set individually for each instance of our control. For a color picker we just need the selected Color value, but you can get more creative here based on your requirements, for instance you could expose the name of the color as well.

Initializing the Color Picker Component

Next we need to initialize the color picker. This includes populating the control with the available colors. For this version I defined a Dictionary of available colors by name. We also need to set the image on the control. When building a component, it’s cleaner to use an embedded resource rather than local images. To embed an image in a project just set BuildAction = EmbeddedResource. If you want a different image for Android or iOS, then you could use the local image approach.

Capturing the User Input

Next, we need to capture input on our control since it’s just a Grid containing a BoxView and an Image. It doesn’t have any input handling already. For this, we'll initialize a TapGestureRecognizer and add it to the GestureRecognizers collection for our UI element that will handle the gesture. In this case, it’s the image. In the Tapped event we need to set focus to our picker control so it appears. Put the first three lines of code within the control’s constructor.

Selecting a Color

Finally, we need to listen to the selected index changed on the picker and set the custom Color property on our control. That’s it! You can download a full sample below. Download ColorPickerApp Sample >>

Creating More Complex Components with Custom Renderers

What other types of controls can you make in Xamarin.Forms? If you don’t create a custom renderer, then you're limited to using just the elements supported in Xamarin.Forms. Another clever example would be a numeric textbox that's just an Entry and a Stepper. If you can’t define the appearance or behavior of your custom control in Xamarin.Forms alone, you aren’t stuck, but you'll have to create a custom renderer. Custom renderers let developers customize the appearance and behavior of a Xamarin.Forms control for each mobile platform. I'll be covering this in a future blog post.