SlideShare una empresa de Scribd logo
1 de 3
Descargar para leer sin conexión
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 
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 
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

Más contenido relacionado

La actualidad más candente

Ppt caracteristicas de internet
Ppt caracteristicas de internetPpt caracteristicas de internet
Ppt caracteristicas de internetTICS & Partners
 
An Introduction to Software Architecture
An Introduction to Software ArchitectureAn Introduction to Software Architecture
An Introduction to Software ArchitectureRahimLotfi
 
Android Components & Manifest
Android Components & ManifestAndroid Components & Manifest
Android Components & Manifestma-polimi
 
Android: Intent, Intent Filter, Broadcast Receivers
Android: Intent, Intent Filter, Broadcast ReceiversAndroid: Intent, Intent Filter, Broadcast Receivers
Android: Intent, Intent Filter, Broadcast ReceiversCodeAndroid
 
Exception Handling in VB.Net
Exception Handling in VB.NetException Handling in VB.Net
Exception Handling in VB.Netrishisingh190
 
PresentacióN De Photoshop
PresentacióN De PhotoshopPresentacióN De Photoshop
PresentacióN De PhotoshopMARIUXI
 
Component based software development
Component based software developmentComponent based software development
Component based software developmentEmmanuel Fuchs
 
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la WebHerramientas y Tecnologías para la Web
Herramientas y Tecnologías para la WebErick David Juarez
 
Abstracción en programación
Abstracción en programaciónAbstracción en programación
Abstracción en programaciónRicardo Dominguez
 
Patron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorPatron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorHenry Vargas
 

La actualidad más candente (20)

Componentes de eclipse
Componentes de eclipseComponentes de eclipse
Componentes de eclipse
 
Alice 14
Alice 14Alice 14
Alice 14
 
MFC Message Handling
MFC Message HandlingMFC Message Handling
MFC Message Handling
 
Ppt caracteristicas de internet
Ppt caracteristicas de internetPpt caracteristicas de internet
Ppt caracteristicas de internet
 
Java Beans
Java BeansJava Beans
Java Beans
 
An Introduction to Software Architecture
An Introduction to Software ArchitectureAn Introduction to Software Architecture
An Introduction to Software Architecture
 
Builder pattern
Builder patternBuilder pattern
Builder pattern
 
Android Components & Manifest
Android Components & ManifestAndroid Components & Manifest
Android Components & Manifest
 
Android: Intent, Intent Filter, Broadcast Receivers
Android: Intent, Intent Filter, Broadcast ReceiversAndroid: Intent, Intent Filter, Broadcast Receivers
Android: Intent, Intent Filter, Broadcast Receivers
 
Java servlets
Java servletsJava servlets
Java servlets
 
Exception Handling in VB.Net
Exception Handling in VB.NetException Handling in VB.Net
Exception Handling in VB.Net
 
Docker-Dasar.pptx
Docker-Dasar.pptxDocker-Dasar.pptx
Docker-Dasar.pptx
 
PresentacióN De Photoshop
PresentacióN De PhotoshopPresentacióN De Photoshop
PresentacióN De Photoshop
 
Component based software development
Component based software developmentComponent based software development
Component based software development
 
Herramientas y Tecnologías para la Web
Herramientas y Tecnologías para la WebHerramientas y Tecnologías para la Web
Herramientas y Tecnologías para la Web
 
Struts
StrutsStruts
Struts
 
ASP.NET Basics
ASP.NET Basics ASP.NET Basics
ASP.NET Basics
 
Fragment
Fragment Fragment
Fragment
 
Abstracción en programación
Abstracción en programaciónAbstracción en programación
Abstracción en programación
 
Patron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista ControladorPatron de Desarrollo Modelo Vista Controlador
Patron de Desarrollo Modelo Vista Controlador
 

Similar a Image Button [Xamarin.Forms]

Actionscrip linakrdona n2
Actionscrip linakrdona n2Actionscrip linakrdona n2
Actionscrip linakrdona n2LinaCtriana
 
Que es action scrip 3
Que es  action scrip 3Que es  action scrip 3
Que es action scrip 3Harolsmr1103
 
Para subir hoy
Para subir hoyPara subir hoy
Para subir hoytaniamabel
 
Como crear botones pulsantes
Como crear botones pulsantesComo crear botones pulsantes
Como crear botones pulsantesKmilitha Estrada
 
Action scrip
Action scrip Action scrip
Action scrip tatago96
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3Lina2397
 
Que es action scrip 3
Que es  action scrip 3Que es  action scrip 3
Que es action scrip 3Harolsmr1103
 
Que es action scrip 3
Que es  action scrip 3Que es  action scrip 3
Que es action scrip 3Harolsmr1103
 
ActionScript 3.0 GERMAN MIELES11-2
ActionScript 3.0 GERMAN MIELES11-2ActionScript 3.0 GERMAN MIELES11-2
ActionScript 3.0 GERMAN MIELES11-2caresucio
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3Lina2397
 
Action script 3 yahir ayala
Action script 3  yahir ayalaAction script 3  yahir ayala
Action script 3 yahir ayalaYahir17
 
Action script 3
Action script 3Action script 3
Action script 3YahirAyala
 
Introducción a action script 3 milena
Introducción a action script 3 milenaIntroducción a action script 3 milena
Introducción a action script 3 milenamilenaandreabeltran
 
Jowin Rojas Venecia IED
Jowin Rojas Venecia IEDJowin Rojas Venecia IED
Jowin Rojas Venecia IEDdeluxefalen
 
Action script 3 juan jose caceres diaz
Action script 3  juan jose caceres diazAction script 3  juan jose caceres diaz
Action script 3 juan jose caceres diazjuanjo2727
 

Similar a Image Button [Xamarin.Forms] (20)

Actionscrip linakrdona n2
Actionscrip linakrdona n2Actionscrip linakrdona n2
Actionscrip linakrdona n2
 
Que es action scrip 3
Que es  action scrip 3Que es  action scrip 3
Que es action scrip 3
 
Para subir hoy
Para subir hoyPara subir hoy
Para subir hoy
 
Como crear botones pulsantes
Como crear botones pulsantesComo crear botones pulsantes
Como crear botones pulsantes
 
Angie tovar (1)
Angie tovar (1)Angie tovar (1)
Angie tovar (1)
 
Action scrip
Action scrip Action scrip
Action scrip
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3
 
Camila botones
Camila botonesCamila botones
Camila botones
 
Que es action scrip 3
Que es  action scrip 3Que es  action scrip 3
Que es action scrip 3
 
Que es action scrip 3
Que es  action scrip 3Que es  action scrip 3
Que es action scrip 3
 
ActionScript 3.0 GERMAN MIELES11-2
ActionScript 3.0 GERMAN MIELES11-2ActionScript 3.0 GERMAN MIELES11-2
ActionScript 3.0 GERMAN MIELES11-2
 
Introducción a action script 3
Introducción a action script 3Introducción a action script 3
Introducción a action script 3
 
Action script 3 yahir ayala
Action script 3  yahir ayalaAction script 3  yahir ayala
Action script 3 yahir ayala
 
Action script 3
Action script 3Action script 3
Action script 3
 
Unidad 4
Unidad 4Unidad 4
Unidad 4
 
Introducción a action script 3 milena
Introducción a action script 3 milenaIntroducción a action script 3 milena
Introducción a action script 3 milena
 
Jowin Rojas Venecia IED
Jowin Rojas Venecia IEDJowin Rojas Venecia IED
Jowin Rojas Venecia IED
 
Action script
Action scriptAction script
Action script
 
2trabajo
2trabajo2trabajo
2trabajo
 
Action script 3 juan jose caceres diaz
Action script 3  juan jose caceres diazAction script 3  juan jose caceres diaz
Action script 3 juan jose caceres diaz
 

Más de Vicente Gerardo Guzman Lucio

Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsVicente Gerardo Guzman Lucio
 
Consumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en AlexaConsumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en AlexaVicente Gerardo Guzman Lucio
 

Más de Vicente Gerardo Guzman Lucio (20)

GPPB2024 - Integrando ChatGPT en Power Automate
GPPB2024 - Integrando ChatGPT en Power AutomateGPPB2024 - Integrando ChatGPT en Power Automate
GPPB2024 - Integrando ChatGPT en Power Automate
 
Introducción a Amazon Alexa.pptx
Introducción a Amazon Alexa.pptxIntroducción a Amazon Alexa.pptx
Introducción a Amazon Alexa.pptx
 
Creando un Chatbot en C# con ChatGPT.pdf
Creando un Chatbot en C# con ChatGPT.pdfCreando un Chatbot en C# con ChatGPT.pdf
Creando un Chatbot en C# con ChatGPT.pdf
 
ChatGPT & Alexa.pptx
ChatGPT & Alexa.pptxChatGPT & Alexa.pptx
ChatGPT & Alexa.pptx
 
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.FormsBienvenido .Net MAUI - la evolución de Xamarin.Forms
Bienvenido .Net MAUI - la evolución de Xamarin.Forms
 
Conectando un Azure Bot con una Alexa Skill
Conectando un Azure Bot con una Alexa SkillConectando un Azure Bot con una Alexa Skill
Conectando un Azure Bot con una Alexa Skill
 
Azure DevOps y Blazor Web Assembly
Azure DevOps y Blazor Web AssemblyAzure DevOps y Blazor Web Assembly
Azure DevOps y Blazor Web Assembly
 
Desarrollo de Interfaces de Voz: Alexa Skills
Desarrollo de Interfaces de Voz: Alexa SkillsDesarrollo de Interfaces de Voz: Alexa Skills
Desarrollo de Interfaces de Voz: Alexa Skills
 
Blazor vs VUE
Blazor vs VUEBlazor vs VUE
Blazor vs VUE
 
Introducción a Blazor
Introducción a BlazorIntroducción a Blazor
Introducción a Blazor
 
Infraestructura como Código en Azure
Infraestructura como Código en AzureInfraestructura como Código en Azure
Infraestructura como Código en Azure
 
Diseño de Experiencias de Voz con Amazon Alexa
Diseño de Experiencias de Voz con Amazon AlexaDiseño de Experiencias de Voz con Amazon Alexa
Diseño de Experiencias de Voz con Amazon Alexa
 
Alexa Skill con .NETCore & AWS Lambda
Alexa Skill con .NETCore & AWS LambdaAlexa Skill con .NETCore & AWS Lambda
Alexa Skill con .NETCore & AWS Lambda
 
Skills Nights - Vol.III - Primeros Pasos
Skills Nights - Vol.III - Primeros PasosSkills Nights - Vol.III - Primeros Pasos
Skills Nights - Vol.III - Primeros Pasos
 
¿Qué es la Nube?
¿Qué es la Nube?¿Qué es la Nube?
¿Qué es la Nube?
 
Consumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en AlexaConsumiendo un servicio externo con Axios en Alexa
Consumiendo un servicio externo con Axios en Alexa
 
La era de los Chatbots
La era de los ChatbotsLa era de los Chatbots
La era de los Chatbots
 
Android 64x con Xamarin.Forms
Android 64x con Xamarin.FormsAndroid 64x con Xamarin.Forms
Android 64x con Xamarin.Forms
 
Creando nuestra propia Skill de YouTube
Creando nuestra propia Skill de YouTubeCreando nuestra propia Skill de YouTube
Creando nuestra propia Skill de YouTube
 
Alexa Skill en 5 pasos
Alexa Skill en 5 pasosAlexa Skill en 5 pasos
Alexa Skill en 5 pasos
 

Image Button [Xamarin.Forms]

  • 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