Top

Using Effects on Xamarin.Forms

Using Effects on Xamarin.Forms

Custom Renderers are useful when we want to customize native controls of a given type all around our app.But when we want to customize only some specific properties of a given native view, we could make use of Effects.

An Effect is a simple and reusable piece of code that will allow us to access a native control to customize it.

 

Let’s see a sample that will prevent the underline decoration when an Entry is focused.

Core project

In the core project add a class inheriting RouttingEffect like this:

public class NoUnderlineEffect : RoutingEffect
{
    public NoUnderlineEffect()
        : base("Blogpost.NoUnderlineEffect")
    {
    }
}

We could add properties to be able to pass parameters and info that would be used in the target platform effect, but this is not the case.

Now on iOS and Android platforms we will give an implementation for that effect that will customize the native control. In both cases we will subclass  PlatformEffect

Android project

The Android effect should be something like:

[assembly: ResolutionGroupName("Blogpost")]
[assembly: ExportEffect(typeof(Blogpost.Droid.NoUnderlineEffect), nameof(Blogpost.NoUnderlineEffect))]

namespace Blogpost.Droid
{
    public class NoUnderlineEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            if (this.Control != null)
            {
                GradientDrawable gd = new GradientDrawable();
                gd.SetColor(global::Android.Graphics.Color.Transparent);
                this.Control.SetBackgroundDrawable(gd);

                if (this.Control is EditText editText)
                {   
                    editText.SetRawInputType(Android.Text.InputTypes.TextFlagNoSuggestions);
                }
            }
        }

        protected override void OnDetached()
        {
        }
    }
}

ResolutionGroupName is a property to allow us to group effects and avoid conflicts with other effects that can exist on the project.

The OnAttached method allow us get the native control and do whatever we want with it, so we set the gradient to transparent and set the input text type to  TextFlagNoSuggestions.

iOS project

The iOS effect is similar to:

[assembly: ResolutionGroupName("Blogpost")]
[assembly: ExportEffect(typeof(SGUK.ClassAction.IOS.Effects.NoUnderlineEffect), nameof(NoUnderlineEffect))]

namespace SGUK.ClassAction.IOS.Effects
{
    public class NoUnderlineEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            if (this.Control != null)
            {
                var entry = (UITextField)this.Control;
                entry.BorderStyle = UITextBorderStyle.None;
            }
        }

        protected override void OnDetached()
        {
        }
    }
}

It has the same structure as Android one:

  • Set the ResolutionGroupName
  • The OnAttached method sets the border style to none.

Summary

Now we have an effect that remove the underline of an input and we can apply only on those inputs we want.

 

Juan Maria Laó
No Comments

Post a Comment