El nuevo Checkbox en Xamarin.Forms 4.1 y revisando el control de InputKit

Screen-Shot-2019-07-05-at-4.57.17-PM
Share on facebook
Share on twitter
Share on linkedin

Con el lanzamiento de Xamarin.Forms 4.1 llega un nuevo control de casilla de verificación (Checkbox). Voy a usar ambos terminos Checkbox y Casilla de verificación intercambiablemente a lo largo del artículo. Así se ve el nuevo control:

Imagen tomada directamente de la documentación https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/checkbox

Para instanciar el control en XAML o C#:

El CheckBox tiene una propiedad bindeable para el estado de cotejado (IsChecked) y también puede manejar el evento de cotejo modificado (CheckedChanged).

Una observación

El control tiene una forma redondeada en iOS. Si deseas que tenga una forma cuadrada, puedes usar la API Visual.

Por ahora, el control CheckBox no incluye una propiedad de texto y no muestra una etiqueta al lado, para lograrlo, debes incluir explícitamente un Label y asegurarte de alinearlo al lado, por ejemplo:

El resultado se ve así:

En el lado izquierdo está la versión de iOS en el lado derecho, la de Android.

Otras opciones

Si estás trabajando en un proyecto legacy o por el motivo que sea, no puedes actualizar a la versión 4.1 de Xamarin.Forms pero aún así estás buscando incluir un CheckBox, aquí hay un par de opciones para tí:

  1. Utiliza el control de interruptor (Switch). De una manera práctica / funcional, es lo mismo que un CheckBox en que con él puedes manejar los estados de encendido / apagado (verdadero / falso). La interfaz de usuario ciertamente no es la de un CheckBox, pero si todo lo que necesitas es la funcionalidad, te debe bastar.
  2. Usa el paquete Xamarin.Forms.InputKit. Este paquete lleva un buen tiempo de publicado, por lo que el equipo ha tenido el tiempo de incluir algunas características interesantes, como poder configurar la etiqueta para el control, usar botones de radio y establecer un ícono de verificación personalizado para nombrar unos pocos.

Usando la librería Xamarin.Forms.InputKit

Al igual que la mayoría de las bibliotecas de terceros en el ecosistema de Xamarin, es muy fácil de configurar y te brinda acceso a una variedad de controles pero nos centraremos en la funcionalidad de la casilla de verificación por ahora.

Para configurar la biblioteca sigue estos pasos:

  • Incluye el paquete de Nuget Xamarin.Forms.InputKit en todos tus proyectos.
  • Inicialízalo en los proyectos de destino llamando a Plugin.InputKit.Platforms.iOS.Config.Init(); o Plugin.InputKit.Platforms.Droid.Config.Init (this, savedInstanceState);
  • Haz referencia al namespace de InputKit en tu XAML agregando esta línea en la declaración de la página xmlns: input = “clr-namespace: Plugin.InputKit.Shared.Controls; assembly = Plugin.InputKit”.
  • Prepon el namespace input a los controles que desees utilizar

Para crear una casilla de verificación (CheckBox) puedes escribir algo como esto:

Al igual que el nuevo control Checkbox de Xamarin.Forms, el de InputKit incluye una propiedad vinculable (bindable) para el checked llamada IsChecked y puedes escuchar el estado de cambio del cotejo con el controlador de eventos (EventHandler) para CheckChanged o con el comando CheckChangedCommand.

Como se mencionó anteriormente, este paquete ha estado disponible por algún tiempo e incluye algunas cosas más que la nueva casilla de verificación nativa de Xamarin.Forms, como la capacidad de incluir el texto de la etiqueta de la casilla de verificación y el tipo de casilla de verificación que desea procesar. Estos son los diferentes tipos de Checkbox:

Imagen tomada directamente desde el repositorio. https://github.com/enisn/Xamarin.Forms.InputKit

Escribí un proyecto de muestra aquí si deseas verlo https://github.com/eatskolnikov/CheckBoxSample

Y eso es todo amigos, como siempre, espero que esta información te haya sido de utilidad y si te gustó te animo a que lo compartas en las redes sociales y a que veas los demás artículos en el sitio web.

¿Te gustó el artículo o tienes algún comentario? Puedes darme mention en twitter @eatskolnikov

Comparte este post con tus amigos

Share on linkedin
Share on twitter
Share on facebook

¿quieres recibir los artículos en tu correo?

Suscribete a mi boletín de correos y enterate cuando haya una nueva publicación

Otros artículos

Xamarin

Definiendo estilos para nuestras aplicaciones

El uso de estilos (Styles) puede ayudar a definir una interfaz de usuario coherente para tu aplicación y es una excelente manera de hacer que tus archivos XAML sean más legibles y mantenibles a largo plazo. Algunas características de los estilos: Son muy fáciles de definir. Se puede heredar para

Leer más »
Enmanuel Toribio hablando sobre Xamarin en codecamsdq 2019
Eventos

La Experiencia CodecampSDQ

El sábado pasado, 1 de junio, tuve el privilegio de participar como miembro del personal y orador en el CodecampSDQ. Se llevó a cabo en las instalaciones de la Universidad INTEC aquí en Santo Domingo. Este evento ha estado ocurriendo durante muchos años y se ha convertido en una especie

Leer más »
Xamarin

Cambiando la etiqueta del botón Back en iOS con Xamarin Forms

Algo de contexto He estado trabajando en la aplicación para CodecampSDQ (iOS | Android) que se celebrará en las instalaciones de Intec este 1 de junio. El código se basa en este repositorio y hemos realizado algunas adaptaciones de las que probablemente hablaré con mayor detalle más adelante. En un momento me

Leer más »
Xamarin

Áreas seguras del Layout para iOS en Xamarin Forms

Desde el lanzamiento del iPhone X, hay un “notch” en la parte superior de la pantalla en los dispositivos iOS que tiende a ser molesto porque se sobrepone al contenido de nuestra aplicación. Normalmente tendrías que agregar algún tipo de margen para evitar este problema. El mayor inconveniente con este

Leer más »
From https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/images?tabs=macos
Xamarin

Almacenamiento en caché de imágenes en Xamarin Forms

Alguien me preguntó sobre un problema que estaba teniendo al mostrar un ListView que tenía una imagen para cada celda. Cuando el usuario se movía por la lista, las imágenes parpadeaban y la interfaz de usuario se comportaba un poco lento. Las imágenes se estaban cargando desde internet. El problema

Leer más »