Xamarin Forms Custom Renderers And Effects Complete Guide

Custom Renderer Example: Creating a Custom Entry with a Blue Border

Step 1: Create a Xamarin.Forms App

First, create a new Xamarin.Forms project in Visual Studio.

1. Open Visual Studio.
2. Select "Create a new project...".
3. Choose "Mobile App (Xamarin.Forms)" and click "Next".
4. Name your project and set the location.
5. In the next screen, choose "Blank" and make sure to check "Use .NET Standard" (even if it's not strictly necessary for .NET MAUI, it's good practice). Click "Create".

Step 2: Define Control in Xamarin.Forms

Create a custom control in your Xamarin.Forms project. This will be a simple Entry with a custom property for the border color.

1. Add a new class to your .NET Standard project named CustomEntry.cs.

using Xamarin.Forms;

namespace YourNamespace
{
    public class CustomEntry : Entry
    {
        public static readonly BindableProperty BorderColorProperty
            = BindableProperty.Create(
                nameof(BorderColor),
                typeof(Color),
                typeof(CustomEntry),
                Color.Default);

        public Color BorderColor
        {
            get => (Color)GetValue(BorderColorProperty);
            set => SetValue(BorderColorProperty, value);
        }
    }
}

Step 3: Create Custom Renderer on Android

Next, create a custom renderer for Android that applies the border color.

1. In the YourNamespace.Droid project, add a new class named CustomEntryRenderer.cs.

using Android.Content;
using Android.Graphics.Drawables;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using YourNamespace;
using YourNamespace.Droid;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace YourNamespace.Droid
{
    public class CustomEntryRenderer : EntryRenderer
    {
        public CustomEntryRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control is EditText editText && e.NewElement is CustomEntry customEntry)
            {
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(Android.Graphics.Color.Transparent);
                gd.SetStroke(2, customEntry.BorderColor.ToAndroid());
                editText.SetBackground(gd);
            }
        }
    }
}

Step 4: Create Custom Renderer on iOS

Similarly, create a custom renderer for iOS.

1. In the YourNamespace.iOS project, add a new class named CustomEntryRenderer.cs.

using ObjCRuntime;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourNamespace;
using YourNamespace.iOS;

[assembly: ExportRenderer(typeof(CustomEntry), typeof(CustomEntryRenderer))]
namespace YourNamespace.iOS
{
    public class CustomEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control is UITextField textField && e.NewElement is CustomEntry customEntry)
            {
                textField.Layer.BorderColor = customEntry.BorderColor.ToCGColor();
                textField.Layer.BorderWidth = 1.0f;
            }
        }
    }
}

Step 5: Use the Custom Entry in Your Page

Finally, use the custom Entry in one of your XAML pages.

1. In MainPage.xaml, add the following XAML code to use the CustomEntry:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.MainPage">

    <StackLayout Padding="20">
        <local:CustomEntry Placeholder="Enter text" BorderColor="Blue" WidthRequest="200" />
    </StackLayout>
</ContentPage>

Custom Effect Example: Create a Focused Entry Highlight

Step 1: Define an Effect in Xamarin.Forms

Create the effect interface that you will implement in your Android and iOS projects.

1. In your .NET Standard project, add a new class named FocusedEffect.cs.

using Xamarin.Forms;

namespace YourNamespace
{
    public class FocusedEffect : RoutingEffect
    {
        public FocusedEffect() : base("YourNamespace.FocusedEffect")
        {
        }
    }
}

Step 2: Implement the Effect on Android

Now, create the effect implementation for Android.

1. In the YourNamespace.Droid project, add a new class named FocusedEffect.cs.

using Android.Views;
using Android.Graphics.Drawables;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using YourNamespace;
using YourNamespace.Droid;

[assembly: ResolutionGroupName("YourNamespace")]
[assembly: ExportEffect(typeof(FocusedEffect), "FocusedEffect")]
namespace YourNamespace.Droid
{
    public class FocusedEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            if (Control is EditText editText)
            {
                editText.SetBackgroundColor(Android.Graphics.Color.LightBlue);
            }
        }

        protected override void OnDetached()
        {
           
        }

        protected override void OnElementPropertyChanged(System.ComponentModel.PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(args);
        }
    }
}

Step 3: Implement the Effect on iOS

Implement the effect for iOS as well.

1. In the YourNamespace.iOS project, add a new class named FocusedEffect.cs.

using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourNamespace;
using YourNamespace.iOS;

[assembly: ResolutionGroupName("YourNamespace")]
[assembly: ExportEffect(typeof(FocusedEffect), "FocusedEffect")]
namespace YourNamespace.iOS
{
    public class FocusedEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            if (Control is UITextField textField)
            {
                textField.BackgroundColor = UIKit.UIColor.LightBlue;
            }
        }

        protected override void OnDetached()
        {
            
        }

        protected override void OnElementPropertyChanged(System.ComponentModel.PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(args);
        }
    }
}

Step 4: Use the Effect in Your Page

Finally, use the FocusedEffect on an Entry in your XAML page.

1. In MainPage.xaml, add the following XAML code to use the effect: