1. Ing. Vicente Guzmán
@LucioMSP
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
<ImageButton Source="esferaDB.png"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="300"
FlexLayout.Grow="1"
Clicked="ImageButton_Clicked"
Aspect="AspectFit" />
Resultado
2. Ing. Vicente Guzmán
@LucioMSP
¿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:
<ImageButton Source="dbLogo.png"
BackgroundColor="Transparent"
WidthRequest="300"
HeightRequest="300"
FlexLayout.AlignSelf="Center"
FlexLayout.Grow="1"
Aspect="AspectFit">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="Scale" Value="1"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Property="Scale" Value="0.8"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ImageButton>
Resultado
3. Ing. Vicente Guzmán
@LucioMSP
Descarga el código completo desde mi GitHub.
¡Hasta la próxima!
Mas Información:
Xamarin.Forms 3.4.0: Say Hello to ImageButton
Docs Microsoft – Xamarin.Forms ImageButton
Respuesta: TapGestureRecognizer