{"id":11573,"date":"2014-06-23T13:00:25","date_gmt":"2014-06-23T17:00:25","guid":{"rendered":"http:\/\/blog.xamarin.com\/?p=11573"},"modified":"2014-06-23T13:00:25","modified_gmt":"2014-06-23T17:00:25","slug":"using-custom-controls-in-xamarin-forms-on-android","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/using-custom-controls-in-xamarin-forms-on-android\/","title":{"rendered":"Using Custom Controls in Xamarin.Forms on Android"},"content":{"rendered":"

\t\t\t\tWith over 40 pages, layouts, and controls built into the Xamarin.Forms library, you are sure to find something to fit your needs when building out native mobile apps on iOS, Android, and Windows Phone. One of the key features that I love about Xamarin.Forms is that you are able to not only completely customize each built in-control<\/a>, but you can extend and mix-and-match platform specific APIs and custom controls. This means that if you have been building and using custom controls in your Xamarin apps you are still able to re-use them in your Xamarin.Forms mobile apps with the concept of a custom renderer<\/b>. \"HoloProgressBar\"<\/a><\/p>\n

Over the past 3 years I have built out a lot of custom controls and one of my favorite has to be this circular progress bar<\/a>. It has the look and feel of the built in Android stop watch, but I re-wrote it in C# as part of my Xamarin.Android Toolkit<\/a>. Of course I want to re-use this control and others in my Xamarin.Forms apps, so let’s take a look at how to take this pre-existing custom control and make a custom renderer for it.<\/p>\n

Xamarin.Forms Control<\/h2>\n

There are two main parts to implementing a custom control with a renderer. <\/p>\n

    \n
  1. Create your own custom Xamarin.Forms control with bindable properties.\n
  2. Create a renderer in each platform that will be used to display the custom control and subscribe to property changed notifications.\n<\/ol>\n

    This means that you can give your custom controls new functionality with the built-in data binding system in Xamarin.Forms. In my shared code project I am going to create a new control that will be used in my pages and layouts called CircularProgress<\/b> and this will inherit from Xamarin.Forms.View. <\/b><\/b><\/p>\n

    \nusing Xamarin.Forms;\nnamespace CustomProgressBar.CustomControls\n{\n  public class CircularProgress : View\n  {\n    ...\n  }\n}\n<\/pre>\n
    Bindable Properties<\/h2>\n
    The real magic is to implement the two way data binding with custom properties in this class. I can create these with the BindableProperty<\/b> class which describes what the property is and knows how to trigger a PropertyChanged Notification. Here I will implement just a few such as if the progress bar is indeterminate, the current progress, and what color the bar is.<\/p>\n
    \n\/\/Bindable property for the progress color\npublic static readonly BindableProperty ProgressColorProperty =\n  BindableProperty.Create<CircularProgress,Color> (p => p.ProgressColor, Color.Red);\n\n\/\/Gets or sets the color of the progress bar\npublic Color ProgressColor {\n  get { return (Color)GetValue (ProgressColorProperty); }\n  set { SetValue (ProgressColorProperty, value); }\n}\n...\n<\/pre>\n
    Notice here that I am using the Color<\/b> property, which is a Xamarin.Forms specific color, that I am setting to Red as the default. I would do the same for other properties that I wan to bind to.<\/p>\n
    Circular Progress Renderer<\/h2>\n
    With my new Xamarin.Forms control in place I can now implement the platform specific renderer in my Xamarin.Android project, which I will call CircularProgressRenderer<\/b>. Each Xamarin.Forms control has a custom renderer that you can inherit from if you are customizing a built in control. However since this is completely custom View I am going to inherit from ViewRenderer<\/b>.<\/p>\n
    \nnamespace CustomProgressBar.Droid.Renderers\n{\n  public class CircularProgressRenderer \n    : ViewRenderer<CircularProgress, HoloCircularProgressBar> {\n    ...\n  }\n}\n<\/pre>\n
    This type of renderer on Android inherits from View, which means Xamarin.Forms will handle all of the size calculations and normal properties of a standard Android View. All I have to do now is create my custom control and tell the renderer to display it. I can do this in our OnElementChanged<\/b> method where I have access to two very important properties. <\/p>\n