ImageButton [Xamarin.Forms]


Introducción

Normalmente como desarrolladores necesitamos hacer que una imagen cuente con determinada acción al tocarla, como por ejemplo que nos lleve a otra sección de la aplicación, esto porque nuestros usuarios así lo intuyen al ver una imagen, ya sea un icono o una fotografía, esta última para verla más grande. En Xamarin anteriormente no existía esta funcionalidad, por lo cual teníamos que hacer nuestra magia para que pudiéramos realizar esto.

Hace algunas semanas se lanzó la versión 3.4 de Xamarin.Forms y una de sus características notables y más solicitadas fue la del ImageButton. Este nuevo control está separado funcionalmente de la de un botón típico, donde la propiedad de la imagen es generalmente centrada a mostrar un icono al lado del texto del botón.

Y como suponen, este cuenta con un evento Clicked y Command, tal como su hermano el Button. Pero dejemos de lado la teoría, veamos cómo funciona.

Ejemplo

Voy a suponer que ya han creado su aplicación en Xamarin.Forms, una vez realizado esto, procedamos a agregar el control en nuestro MainPage.

XAML

CodeImageButton

Resultado:

ImageButton

¿Recuerdan que se utilizaba antes para que una imagen efectuara determinada acción a partir de un clic?

Extra

Usando el VisualStateManager presentado en Xamarin.Forms 3.0, se pueden realizar efectos de escalamiento en el botón cuando este se presiona. Veamos cómo aplicarlo:

CodeVisualStateManagerImageButton

Resultado:

VisualStateManager.gif

Descarga el código completo desde mi GitHub.

GitIronMan

¡Hasta la próxima!

Mas Información:

Xamarin.Forms 3.4.0: Say Hello to ImageButton

Docs Microsoft – Xamarin.Forms ImageButton

 

 

Respuesta: TapGestureRecognizer

Anuncios

Responder

Por favor, inicia sesión con uno de estos métodos para publicar tu comentario:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s