Xamarin Forms Custom Renderers

In Android Lollipop button text defaults to upper case. The default Button in Xamarin Forms will also appear in all caps. In this post I show how to use a custom renderer to make the text preserve its casing.

The code for this sample is available here. Here’s what it looks like running on Android and IOS.

Screen Shot 2016-05-09 at 21.54.08
Android
Screen Shot 2016-05-09 at 21.50.34
IOS

The Custom Renderer lets us access the properties of the platform specific button – in this case the Android Button. To achieve this we need to subclass the button in the cross platform project. This doesn’t need to do anything, it just provides a class to use in the XAML which can be targeted by the platform specific renderer…

using System;
using Xamarin.Forms;

namespace ButtonCustomRenderer
{
	public class CustomButton : Button
	{
	}
}

… and the make the custom button available in the XAML by adding it’s namespace at the top…

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
				xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
				x:Class="ButtonCustomRenderer.DemoPage"
				xmlns:local="clr-namespace:ButtonCustomRenderer;assembly=ButtonCustomRenderer">
	<ContentPage.Content>
		<StackLayout Padding="10, 20, 10, 10">
			<Button Text="This is a standard button" />
			<local:CustomButton Text="This is a custom button" />
		</StackLayout>
	</ContentPage.Content>
</ContentPage>

Then we add create the renderer in the platform specific project…

using System;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using ButtonCustomRenderer;
using ButtonCustomRenderer.Droid;

[assembly: ExportRendererAttribute (typeof(CustomButton), typeof(CustomButtonRenderer))]
namespace ButtonCustomRenderer.Droid
{
	public class CustomButtonRenderer : ButtonRenderer
	{
		protected override void OnElementChanged(ElementChangedEventArgs&lt;Xamarin.Forms.Button&gt; e)
		{
			base.OnElementChanged(e);

			if (Control != null)
			{
				Control.SetAllCaps(false);
			}
		}
	}
}

The custom renderer subclasses ButtonRenderer, not CustomButton. All it has to do is override OnElementChanged and make the necessary changes to the Android Button object it provides. I just set all caps to false.

The ExportRendererAttribute is used to tie the renderer to the custom button in the cross platform project.

In this example the IOS button doesn’t need any changes. This means we don’t need a custom render in the IOS project – the app doesn’t need one to work either.

Advertisements
Xamarin Forms Custom Renderers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s