Creación de controles personalizados

Resumen

El corazón de Xamarin.Forms son los Renderers, que son los que permiten convertir las etiquetas de diseño de controles en XAML a componentes de código nativo en cada plataformay. Cada control disponible en cada una de las APIs del proyecto: Xamarin.Android, Xamarin.iOS, Xamarin.WUF, etc., tienen sus respectivos renderers que dibujan cada control en su forma nativa para cada plataforma.

Así por ejemplo, un control XAML de tipo <Entry /> se va a renderizar de la siguiente manera:

En Android: como un componente EditText
En iOS: como un componente UITextView
En WUF: como un TextBox
etc.

Para crear Controles Personalizados, no sólo tenemos que crear el control en Xamarin.Forms usando .NET Standard sino también tenemos que crear su renderer para la plataforma destino.

Para crear el control personalizado:

Se declara la clase del control en C#, heredando una clase base de Xamarin.Forms
Se identifican las propiedades enlazables que se van a asociar luego con los valores del componente nativo
Se crean las BindableProperties con su respectiva fachada CLR de la propiedad enlazable, con los accesores get y set.
Crear el renderer en el folder de la plataforma respectiva
Descargamos el paquete NuGet específico para el componente nativo que queremos implementar
En el renderer se asocian el control de Xamarin.Forms y el control nativo expuesto por el paquete NuGet
Se programa el override para cada método / evento que queremos enlazar entre los controles
Se indica SetNativeControl()
Se crea el método OnElementProperyChanged() para enlazar los eventos asociados al cambio de valores
Se exporta el renderer.

Y ya se puede usar el nuevo control en la interfaz de la aplicación usando Xaml.

Giovanny Farto

student•

Y el equivalente de monoDroid para iOS?

Eduardo Saligari C.

student•

Profesor, suba los archivos de este proyecto

kevin leonardo sinza salcedo

student•

hubiera sido bueno poner el ejemplo para ios!!? alguien sabe como hacerlo en ios

Andre Huaman Yovera

student•

CircularProgress.cs

 public class CircularProgress : View
    {
        public static readonly BindableProperty ProgressProperty =
            BindableProperty.Create("Progress", typeof(float), typeof(CircularProgress), 0f);
        public static readonly BindableProperty MaxProperty =
            BindableProperty.Create("Max", typeof(float), typeof(CircularProgress), 0f);
        public static readonly BindableProperty IndeterminateProperty =
            BindableProperty.Create("Indeterminate", typeof(bool), typeof(CircularProgress), false);
        public static readonly BindableProperty IndeterminateSpeedProperty =
            BindableProperty.Create("IndeterminateSpeed", typeof(int), typeof(CircularProgress), 0);
        public static readonly BindableProperty ProgressBackgroundColorProperty =
            BindableProperty.Create("ProgressBackgroundColor", typeof(Color), typeof(CircularProgress), Color.White);
        public static readonly BindableProperty ProgressColorProperty =
            BindableProperty.Create("ProgressColor", typeof(Color), typeof(CircularProgress), Color.Red);

        public float Progress
        {
            get
            {
                return (float)GetValue(ProgressProperty);
            }
            set
            {
                SetValue(ProgressProperty, value);
            }
        }
        public float Max
        {
            get
            {
                return (float)GetValue(MaxProperty);
            }
            set
            {
                SetValue(MaxProperty, value);
            }
        }
        public bool Indeterminate
        {
            get
            {
                return (bool)GetValue(IndeterminateProperty);
            }
            set
            {
                SetValue(IndeterminateProperty, value);
            }
        }
        public int IndeterminateSpeed
        {
            get
            {
                return (int)GetValue(IndeterminateSpeedProperty);
            }
            set
            {
                SetValue(IndeterminateSpeedProperty, value);
            }
        }
        public Color ProgressBackgroundColor
        {
            get
            {
                return (Color)GetValue(ProgressBackgroundColorProperty);
            }
            set
            {
                SetValue(ProgressBackgroundColorProperty, value);
            }
        }
        public Color ProgressColor
        {
            get
            {
                return (Color)GetValue(ProgressColorProperty);
            }
            set
            {
                SetValue(ProgressColorProperty, value);
            }
        }
    }

Alexander Heleno Brizuela Vega

student•

Alguien tiene algun ejemplo con Entry?, por que no me funciona. Lo que quiero hacer es que no aparesca la underline.

irwin laguado

student•

Tengo una excepción no controlada en el archivo

MainPage.xaml.g.cs

Unhandled Exception:
System.TypeInitializationException: The type initializer for ‘Directorios.CircularProgress’ threw an exception.ocurrió

Facundo Adrian Narvaiz

student•

supongo que ya lo resolviste pero igual lo respondo por su a alguien le sucede. Yo tuve ese error y lo solucione revisando la clase CircularProgress. En mi caso era que esta ingresando por default un decimal y no un float, entonces tiraba ese error

public static readonly BindableProperty ProgressProperty =
            BindableProperty.Create(&quot;Progress&quot;, typeof(float), typeof(CircularProgress), 0m);

lo cambie por :

public static readonly BindableProperty ProgressProperty =
            BindableProperty.Create(&quot;Progress&quot;, typeof(float), typeof(CircularProgress), (float)0);

Alberto González

student•

¡Hola!
Al igual que @irwin9507, también tengo una excepción: ‘System.TypeInitializationException’.
¿Cómo se puede solucionar?
Saludos.

Ludian Quiñones Solano

student•

<code>
Profesor me sale este error al momento de emular que puede ser ? no tengo errores en el codigo pero al momento de emular si 

Gravedad	Código	Descripción	Proyecto	Archivo	Línea	Origen	Estado suprimido
Error		Error inesperado en la tarea "ReadAdditionalResourcesFromAssemblyCache".
System.Xml.XmlException: '.', valor hexadecimal 0x00, es un carácter no válido. línea 1, posición 1.
   en System.Xml.XmlTextReaderImpl.Throw(Exception e)
   en System.Xml.XmlTextReaderImpl.Throw(String res, String[] args)
   en System.Xml.XmlTextReaderImpl.ThrowInvalidChar(Char[] data, Int32 length, Int32 invCharPos)
   en System.Xml.XmlTextReaderImpl.ParseRootLevelWhitespace()
   en System.Xml.XmlTextReaderImpl.ParseDocumentContent()
   en System.Xml.XmlTextReaderImpl.Read()
   en System.Xml.Linq.XDocument.Load(XmlReader reader, LoadOptions options)
   en System.Xml.Linq.XDocument.Load(String uri, LoadOptions options)
   en Xamarin.Android.Tasks.ReadAdditionalResourcesFromAssemblyCache.Execute()
   en Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
   en Microsoft.Build.BackEnd.TaskBuilder.<ExecuteInstantiatedTask>d__26.MoveNext()	ControlesPersonalizados.Android			Compilación

RODRIGO DIAZ CONCHA

teacher•

Hola, creo que puede ser tu código XAML. Intenta dejando las páginas completamente vacías y ve agregando el código poco a poco.

Diego Forero

Team Platzi•

Por lo que dice el error tienes un carácter no valido en la primera linea en la columna 1, prueba borrar esa linea y escribirla a mano, sin copiar o pegar de otra fuente.

Albert Jiménez

student•

Genial!! El limite lo pone la imaginación. Como siempre digo, TODO es posible, que te lleve mas o menos tiempo…

Tomás Díaz

student•

Falto la parte de poner en funcionamiento el mismo.

Brian Sánchez Izquierdo

student•

funciona el mismo paquete nuGet para iOS?

Marcos Avila Rodriguez

student•

Todas las propiedades enlazadas

Andre Huaman Yovera

student•

CircularProgressRenderer.cs

[assembly: ExportRenderer(typeof(CircularProgress), typeof(CircularProgressRenderer))]

public class CircularProgressRenderer : ViewRenderer<CircularProgress, HoloCircularProgressBar>
    {
        public CircularProgressRenderer(Context context) : base(context)
        {

        }

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

            if (e.OldElement != null || this.Element == null)
            {
                return;
            }

            var progress = new HoloCircularProgressBar(Context);
            progress.Max = Element.Max;
            progress.Progress = Element.Progress;
            progress.Indeterminate = Element.Indeterminate;
            progress.ProgressColor = Element.ProgressColor.ToAndroid();
            progress.ProgressBackgroundColor = Element.ProgressBackgroundColor.ToAndroid();
            progress.IndeterminateInterval = Element.IndeterminateSpeed;

            SetNativeControl(progress);
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (Control == null || Element == null)
            {
                return;
            }

            if (e.PropertyName == CircularProgress.MaxProperty.PropertyName)
            {
                Control.Max = Element.Max;
            }
            else if (e.PropertyName == CircularProgress.ProgressProperty.PropertyName)
            {
                Control.Progress = Element.Progress;
            }
            else if (e.PropertyName == CircularProgress.IndeterminateProperty.PropertyName)
            {
                Control.Indeterminate = Element.Indeterminate;
            }
            else if(e.PropertyName == CircularProgress.ProgressColorProperty.PropertyName)
            {
                Control.ProgressColor = Element.ProgressColor.ToAndroid();
            }
            else if(e.PropertyName == CircularProgress.ProgressBackgroundColorProperty.PropertyName)
            {
                Control.ProgressBackgroundColor = Element.ProgressBackgroundColor.ToAndroid();
            }
            else if(e.PropertyName == CircularProgress.IndeterminateSpeedProperty.PropertyName)
            {
                Control.IndeterminateInterval = Element.IndeterminateSpeed;
            }
        }
    }

Luis Rogelio Ponce Perez

student•

Alguien sabe porque me sale este error? System.InvalidCastException: 'Specified cast is not valid.' en el archivo MainActivity.cs linea 19

Cristian Giagante

student•

No me quedo claro que hace OnElementChanged, alguna ayuda?