Custom Entry Para IOS y Android en Xamarin Forms

Para crear cualquier tipo de custom render es necesario crear una parte de el en el proyecto portable de la solución y un render para cada OS. En el caso de Android debemos agregar un archivo xml que contendrá el color y borde del Entry, ademas del render propio del OS.

Paso1: Crear el custom render el el proyecto portable

Para eso vamos al proyecto. Lo ideal en estos casos es agregar estos elementos en una carpeta especial. En mi caso “Controls”, asi que vamos a Controls>agregar>nueva clase. Esta la llamaremos “MyEntry.cs”

Aquí determinaremos todos los elementos que se podrán customizar de nuestro Entry o campo de texto. El código debe quedar así:

using System;using System;using System.Collections.Generic;using System.Text;using Xamarin.Forms;namespace TSM4K.Controls{public class MyEntry: Entry{
public static readonly BindableProperty BorderColorProperty = BindableProperty.Create("BorderColor", typeof(Color), typeof(Entry), Color.Blue);
public Color BorderColor{get { return (Color)GetValue(BorderColorProperty); }set { SetValue(BorderColorProperty, value); }
}
}}

Es muy importante destacar que el namespace corresponde al nombre de tú proyecto, que en este caso es TSM4K.

Paso 2: Recurso xml en el Drawable

Vamos al proyecto .Droid>Drawable>Agregar nuevo item>Data. Y creamos nuestro recurso que en este caso nombre “EntryStyle.xml” y este es el código:

<?xml version="1.0" encoding="utf-8" ?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:thickness="1dp"
android:shape="rectangle"
android:maxWidth="150dp">
<stroke android:width="2dp"
android:color="#689F38"/>
<corners android:radius="10dp" /><gradient
android:startColor="#FFFFFF"
android:endColor="#FFFFFF"
android:type="linear"
android:angle="270"/>
</shape>

Paso 3: Agregar el Renderer en Android

Nuevamente el el proyecto .Droid creamos una nueva clase que en este caso llamé “MyEntryRenderer.cs”

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using TSM4K.Controls;
using TSM4K.Droid;
using TSM4K.Droid.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly:ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]namespace TSM4K.Droid.Renderers{
public class MyEntryRenderer : EntryRenderer
{public MyEntryRenderer(Context context) : base(context){}protected override void OnElementChanged(ElementChangedEventArgs<Entry> e){base.OnElementChanged(e);if(Control !=null){Control.Background = Android.App.Application.Context.GetDrawable(Resource.Drawable.EntryStyle);}}}}

Como se observa, acá es donde llamamos al recurso drawable que generamos anteriormente con:

“Control.Background = Android.App.Application.Context.GetDrawable(Resource.Drawable.EntryStyle);”

Esto último ha sido modificado porque la antigua manera de llamar a un recurso drawable quedó drepecada.

Paso 3: Agregar el Renderer en IOS

Ahora en el proyecto .iOS creamos una nueva clase que llamaremos de la misma manera que al de Android “MyEntryRenderer.cs”. Acá solo basta con configurar el estilo directamente en el renderer. Idealmente la guardaremos en una carpeta espacial para los renderers

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
namespace TSM4K.iOS.Renderers{public class MyEntryRenderer: EntryRenderer{protected override void OnElementChanged(ElementChangedEventArgs<Entry> e){base.OnElementChanged(e);if (Control != null){// do whatever you want to the UITextField here!Control.BackgroundColor = UIColor.FromRGB(220, 237, 200);Control.BorderStyle = UITextBorderStyle.RoundedRect;Control.Layer.BorderColor = Color.Red.ToCGColor();}}}}

Este mismo procedimiento sirve para crear botones, pickers, etc.

Katherine Durán Sanzana

Written by

Diseñadora Gráfica UI, comenzando en UX . Apasionada por la nada y por todo ❤

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade