Extending Xamarin.Forms with Control Plugins

With an enhanced extensibility framework, Xamarin.Forms is an amazing platform for developing plugins that add cross-platform functionality; however, you can take it a step further by developing custom controls for Xamarin.Forms and packaging them into your very own Control Plugin for Xamarin.Forms. We have had several posts on how to use custom controls in Android, Windows Phone. More recently how to create elegant circle images for Xamarin.Forms across all three platforms. Let’s see how we can take this custom control and create a re-distributable control plugin for Xamarin.Forms that you could enter in our holiday plugin for Xamarin contest.

Getting Started

Instead of embedding all of the circle image logic, which we have already finished, into our Xamarin.Forms application you will want to create your own library specifically for the control. This will consist of a Portable Class Library with the CircleImage class and then a class library for iOS, Android, and Windows Phone. I have created some handy templates for Visual Studio to get you started.

An important addition is that in each of your custom renderers you will need to add an initialization method:

public static void Init() { }

This will be familiar to you if you have been creating plugins for Xamarin.Forms, as this insures our control does not getting linked out in the application we add it to.

Adding Bindable Properties

Since your control plugin will be distributed you may want add a few custom bindable properties if it makes sense for your control. For the CircleImage I have added BorderThickness and BorderColor as additional properties that the CircleImage can use.

/// <summary>
/// Thickness property of border
/// </summary>
public static readonly BindableProperty BorderThicknessProperty =
  BindableProperty.Create<CircleImage, int>(
    p => p.BorderThickness, 0);

/// <summary>
/// Border thickness of circle image
/// </summary>
public int BorderThickness
{
  get { return (int)GetValue(BorderThicknessProperty); }
  set { SetValue(BorderThicknessProperty, value); }
}

Packaging the Plugin

After moving all of the logic into this new project you are ready to package your control and publish it on NuGet. Part of the Visual Studio templates that are available will automatically create the nuspec that will need to be uploaded. Here is what the Circle Image’s looks like:

<?xml version="1.0" encoding="utf-8"?>
<package xmlns="http://schemas.microsoft.com/packaging/2010/07/nuspec.xsd">
   <metadata minClientVersion="2.8.1">
       <id>Xam.Plugins.Forms.ImageCircle</id>
       <version>1.0.0.2</version>
       <title>Image Circle Control Plugin for Xamarin.Forms</title>
       <dependencies>
         <dependency id="Xamarin.Forms" version="1.2.3.6257" />
       </dependencies>
   </metadata>
   <files>
      <!--Core-->
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.dll" target="lib\portable-net45+wp8+win8+MonoAndroid10+MonoTouch10\ImageCircle.Forms.Plugin.Abstractions.dll" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.xml" target="lib\portable-net45+wp8+win8+MonoAndroid10+MonoTouch10+Xamarin.iOS10\ImageCircle.Forms.Plugin.Abstractions.xml" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.pdb" target="lib\portable-net45+wp8+win8+MonoAndroid10+MonoTouch10+Xamarin.iOS10\ImageCircle.Forms.Plugin.Abstractions.pdb" />

     <!--Win Phone Silverlight-->
     <file src="ImageCircle.Forms.Plugin.WindowsPhone\bin\Release\ImageCircle.Forms.Plugin.WindowsPhone.dll" target="lib\wp8\ImageCircle.Forms.Plugin.WindowsPhone.dll" />
     <file src="ImageCircle.Forms.Plugin.WindowsPhone\bin\Release\ImageCircle.Forms.Plugin.WindowsPhone.xml" target="lib\wp8\ImageCircle.Forms.Plugin.WindowsPhone.xml" />
     <file src="ImageCircle.Forms.Plugin.WindowsPhone\bin\Release\ImageCircle.Forms.Plugin.WindowsPhone.pdb" target="lib\wp8\ImageCircle.Forms.Plugin.WindowsPhone.pdb" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.dll" target="lib\wp8\ImageCircle.Forms.Plugin.Abstractions.dll" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.xml" target="lib\wp8\ImageCircle.Forms.Plugin.Abstractions.xml" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.pdb" target="lib\wp8\ImageCircle.Forms.Plugin.Abstractions.pdb" />

     
     <!--Xamarin.Android-->
     <file src="ImageCircle.Forms.Plugin.Android\bin\Release\ImageCircle.Forms.Plugin.Android.dll" target="lib\MonoAndroid10\ImageCircle.Forms.Plugin.Android.dll" />
     <file src="ImageCircle.Forms.Plugin.Android\bin\Release\ImageCircle.Forms.Plugin.Android.xml" target="lib\MonoAndroid10\ImageCircle.Forms.Plugin.Android.xml" />
     <file src="ImageCircle.Forms.Plugin.Android\bin\Release\ImageCircle.Forms.Plugin.Android.pdb" target="lib\MonoAndroid10\ImageCircle.Forms.Plugin.Android.pdb" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.dll" target="lib\MonoAndroid10\ImageCircle.Forms.Plugin.Abstractions.dll" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.xml" target="lib\MonoAndroid10\ImageCircle.Forms.Plugin.Abstractions.xml" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.pdb" target="lib\MonoAndroid10\ImageCircle.Forms.Plugin.Abstractions.pdb" />

     <!--Xamarin.iOS-->
     <file src="ImageCircle.Forms.Plugin.iOS\bin\iPhone\Release\ImageCircle.Forms.Plugin.iOS.dll" target="lib\MonoTouch10\ImageCircle.Forms.Plugin.iOS.dll" />
     <file src="ImageCircle.Forms.Plugin.iOS\bin\iPhone\Release\ImageCircle.Forms.Plugin.iOS.xml" target="lib\MonoTouch10\ImageCircle.Forms.Plugin.iOS.xml" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.dll" target="lib\MonoTouch10\ImageCircle.Forms.Plugin.Abstractions.dll" />
     <file src="ImageCircle.Forms.Plugin.Abstractions\bin\Release\ImageCircle.Forms.Plugin.Abstractions.xml" target="lib\MonoTouch10\ImageCircle.Forms.Plugin.Abstractions.xml" />

   </files>
</package>

With your control plugin packaged up you are now free to distribute it to everyone via NuGet. Be sure to read the NuGet documentation on how to get started.

Learn More

You can find the Circle Image Control Plugin live on NuGet and the full source code available on GitHub. To find out more information on creating plugins for Xamarin be sure to watch the recording of our live Google+ Hangouts session from last week.

In addition to these resources I have recorded a short getting started with the Plugin for Xamarin templates that enables you to get up and running quickly.